如何让背景逐渐变色?

2024-01-07

我正在尝试制作一个网页,其中图像的背景颜色逐渐改变颜色。我知道如何在 Javascript 中更改某些内容的背景颜色,但我不知道如何对其进行“动画”处理(不使用 Flash)。


您可以使用 CSS 过渡来获得这种效果。只需将 css 代码添加到从 js 更改的元素中即可:

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

在 css 上,每次更改任何样式值时,该更改都会以 1 秒的时间从当前值动画到新值。

它仅适用于现代浏览器。看一个例子:click http://jsfiddle.net/87DZC/17/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让背景逐渐变色? 的相关文章

  • 在 javascript 原型事件处理程序中保留“this”引用[重复]

    这个问题在这里已经有答案了 正确的保存方法是什么this存储在对象原型内的事件处理程序中的 javascript 引用 我不想创建像 this 或 that 这样的临时变量 而且我不能使用像 jQuery 这样的框架 我看到很多人谈论使用
  • JavaScript 支持逐字字符串吗?

    在 C 中 您可以像这样使用逐字字符串 server share file txt JavaScript中有类似的东西吗 模板字符串支持换行 so you can do this if you want https developer mo
  • Flex、AngularJS + Masonry、akoenig/angular-deckgrid 等 [重复]

    这个问题在这里已经有答案了 我一直在发送此电子邮件 我即将发布一个用于 Web 应用程序安全的应用程序 它需要使用像 Masonry 这样的网格 我已经尝试过所有的 每一个角度模块 指令和不同的方法 包括基于 CSS 的技术 纯 Vanil
  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭
  • Pug 从模板内的另一个文件调用 js 函数

    我花了将近四个小时都无法解决这个问题 而且我找不到任何针对此类问题的有用文档 这就是问题 我正在使用 pug jade 模板 我想调用 pug 模板内的函数来转换一些数据 这是主要模板 main template section each
  • 玉石压痕错误

    因此 对于我的 Express 网站 我使用 jade 所以我决定尝试修改我的布局文件 以便我可以开始设计我的网站 我修改了原始布局代码 有效 但我开始在任何扩展布局的文件中出现缩进错误 如下所示 500 Error home kevin
  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge
  • 为什么我可以使用 Date 对象进行数学运算? [复制]

    这个问题在这里已经有答案了 当我像这样减去两个日期对象时 const startTime new Date await someAsyncStuff const endTime new Date const elapsedTime endT
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 插件 gulp-babel 错误:插件/预设文件不允许导出对象,只能导出函数

    我现在尝试在我的 Ionic v1 应用程序中使用 JavaScript 2015 ES6 包 json name test version 1 0 0 dependencies ionic native deeplinks 4 18 0
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • document.write 在同一页面上显示内容。

    我对 javascript document write 方法有疑问 大多数情况下 当我使用 document write 时 它会向我显示在不同页面中使用该方法编写的内容 例如 如果我写这样的命令 document write Hello
  • 是否有跨浏览器的方式在Javascript中设置style.float?

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter? [复制]

    这个问题在这里已经有答案了 I m doing it for texarea A function should be called when the user press Enter but nothing should be done
  • 加载 Angular 库时,IE9 和 IE10 中出现 Angular JS“SCRIPT5007:预期对象”错误

    我正在开发一个 AngularJS 应用程序 该应用程序应在 Firefox IE 9 和 IE 10 上运行 我使用最新版本的 angularjs 库 现在是 1 3 15 服务器端是在JavaEE平台上用Java编写的 服务器运行在Gl
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f

随机推荐

  • 导入错误:没有名为 cv2.cv 的模块

    python 3 5 和 Windows 10 我使用以下命令安装了 open cv pip install opencv python 3 1 0 cp35 cp35m win amd64 whl 这个命令在 python 中工作正常 i
  • 是否有与 git archive 相反的命令用于导入 zip 文件

    在主要修订正式纳入 大 公司 SCM 系统之前 我们的本地工作流程倾向于使用一系列 zip 文件作为本地 源代码控制 我正在尝试引入 git 作为一种更好的本地 SCM 方法 当前的工作流程对于我们的小团队来说非常有效 特别是当测试机器离线
  • Visual Studio 2015 中缺少 Xamarin 空白应用程序(本机)模板

    我已经在 Visual Studio 2015 中安装了使用 Xamarin 进行开发的所有工具 但不知何故 当我创建新项目时 我没有看到空白应用程序 本机 模板 我只能使用空白应用程序 Xamarin Forms 模板 我已经尝试重新安装
  • 如何对 Symfony2 控制器进行单元测试?

    我想尽可能多地使用测试驱动开发 这是一种很好的工作方式 我对 Symfony2 控制器创建并返回一个新的事实感到困扰Response object 我希望能够对控制器进行单独的单元测试 你怎么做呢 答案是创建一个控制器作为普通旧 PHP 对
  • SQL Server 更改计算列

    有谁知道如何更改计算列而不删除 SQL Server 中的列 我想停止使用该列作为计算列并开始直接在列中存储数据 但希望保留当前值 这可能吗 据我所知 但这是你可以做的事情 添加另一列到表中 使用计算列的值更新该列 然后删除计算列
  • 使用 Python 将 BMP/PNG/JPEG 转换为 SVG 文件

    我目前正在尝试使用 Python 将 BMP 文件转换为 SVG 文件 我正在尝试找到一个 Python 库 使我能够将 BMP PNG JPEG 文件转换为 SVG 文件 我已经尝试过使用 Potrace 但质量很糟糕 我需要相当高质量的
  • 不同文件夹中的文件具有相同的命名空间

    我正在尝试构建一个项目 以便自动生成的一些代码位于子文件夹中generated 但它与父目录中的文件具有相同的命名空间 例如 我有这个结构 它给了我错误PHP Fatal error Uncaught Error Class MyProje
  • 将文本字符串中的任何 url 替换为可单击的 php 链接

    假设我有一串文本 例如 text Hello world be sure to visit http whatever com today 我如何 可能使用正则表达式 插入链接的锚标记 将链接本身显示为链接文本 您可以使用正则表达式来执行此
  • 检测颜色并从图像中删除该颜色

    我的图像背景为浅紫色图像 字符为深蓝色 我的目标是从图像中识别文本 所以我试图从背景中删除浅紫色 以便我的图像没有噪音 但我找不到该图像的确切颜色代码 因为它在各处都有些不同 所以我无法遮盖图像 这是我的代码 import numpy as
  • 构建自引用元组

    在看到多年前的论坛上的一次从未解决的对话后 我想知道如何正确创建一个引用自身的元组 从技术上讲 这是一个非常糟糕的主意 因为元组应该是不可变的 一个不可变的对象怎么可能包含它自己呢 然而 这个问题不是关于最佳实践 而是关于 Python 中
  • setInterval 在 Chrome 上无法正常工作

    我有一个定制的幻灯片对象来执行名称在网站上指示的常见操作 一切正常 除非我在 Chrome 中切换选项卡并返回网站选项卡 当这种情况发生时 幻灯片就会变得疯狂并开始淡化图像 而不管setInterval给定的间隔 找不到与此相关的任何内容
  • 按字母顺序选择排序程序的问题

    我遇到了涉及选择排序概念的家庭作业问题 我们得到了一个框架代码 我们需要在其中完成bool compare and void selectionsort 功能 我已经完成了 然后 运行程序应该对给出的字符串进行排序main 按字母顺序排列
  • Windows cmd git bash:conda.sh没有这样的文件或目录(Windows行结尾,缺少斜杠)

    我正在 Windows 10 中工作 全新安装了 Anaconda 和 Git Bash 我决定将 cmd exe 设置为默认控制台程序以使用 git bash 而不是 minTTY 并且我认为我已经遇到了 Unix 风格字符与 Windo
  • 在matlab中使用FFT去除图像中的图案和噪声

    我使用 clown jpg 图像来消除其明显的图案 噪音 在对图像进行 FFT 之前所做的第一步是将其重新调整为 2 次幂的方形图像 即 256 x 256 在 matlab 中使用 FFT 和 fftshift 可以实现快速傅里叶变换 其
  • 使用 webpack 生成多个 html 文件

    我正在尝试在一个项目中做一些我不确定是否可能的事情 我的方式错误或误解了某些事情 我们正在使用 webpack 其想法是提供多个 html 文件 本地主机 8181 gt 提供index html本地主机 8181 example html
  • 为什么系统类方法无法访问?

    您好 我对 java 有点陌生 正在尝试从 txt 文件中提取字符串 BufferedReader br new BufferedReader new FileReader file txt try StringBuilder sb new
  • 将 OCaml 字符串转换为 format6

    以下代码无法编译 let x hello in Printf printf x 错误是 Error This expression has type string but an expression was expected of type
  • Swagger 不扫描位于不同 jar 文件中的实体类中的 ApiModel 和 ApiModelProperty 注释

    我有以下两个实体类 第一堂课是SampleApiEntity package my company rest import io swagger annotations ApiModel import io swagger annotati
  • Hive 动态分区和静态分区的主要区别

    Hive 中静态分区和动态分区的主要区别是什么 使用单独的插入意味着静态 而对分区表的单个插入意味着动态 还有其他优点吗 在静态分区中 我们需要在每个 LOAD 语句中指定分区列值 假设我们对表 t1 的列国家 地区进行分区 用户 ID 姓
  • 如何让背景逐渐变色?

    我正在尝试制作一个网页 其中图像的背景颜色逐渐改变颜色 我知道如何在 Javascript 中更改某些内容的背景颜色 但我不知道如何对其进行 动画 处理 不使用 Flash 您可以使用 CSS 过渡来获得这种效果 只需将 css 代码添加到