JS实现背景图的颜色实时渐变

渐变通过@keyfram动画实现，通过不断改变背景颜色的位置。

首先设置大盒子的高度为100vh，宽度为100%，覆盖整个页面

设置背景颜色：通过background的渐变属性 linear-gradient设置：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

其中停止位置可选

CSS动画：

animation: name duration timing-function delay iteration-count direction fill-mode play-state；

其中name为绑定到选择器的关键帧的名称，也就是@keyframs后面的名字。

duration：为动画时长

iteration-count：为播放次数：infinite：无限次

animation-timing-function：linear 匀速

CSS代码：

#app {width: 100%;height: 100vh;background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);background-size: 500%;animation: bgAnimation 15s linear infinite;
}
//定义动画
@keyframes bgAnimation{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}
}
</style>

效果图：

JS实现背景图的颜色实时渐变相关推荐

vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
vue3利用JS切换背景图
VUE3利用JS切换背景图实践记录需要实现的功能:鼠标移入移除图标切换(在这只做移入展示) 新建一个读取图片的函数,如下 // 动态读取图片 function getImageUrl(name: s ...
css js 打印背景图
参考:https://blog.csdn.net/lidysun/article/details/88995208 如果不对浏览器设置,直接打印时是无法打印背景图的. 方法1:css @media p ...
第6章第8节：幻灯片背景：使用颜色和渐变作为幻灯片的背景 [PowerPoint精美幻灯片实战教程]
幻灯片根据内容的不同,通常都拥有不同样式的背景,常见的背景样式有纯色.渐变.纹理和图像.首先演示如何给幻灯片设置纯色背景. 当前使用一个矩形作为幻灯片其它对象的背景,现在来给矩形设置填充颜色. 在颜色 ...
ElementUI - 全局loding加载自定背景图或颜色（指令方式）
前言 ElementUI 组件文档:https://element.eleme.cn/#/zh-CN/component/loading 默认情况下,默认为白色半透明背景,想要自定义如下图所示效果: ...
用js改变背景图的位置
$(document).ready(function() {$("li span").mouseover(function(e){var lengthx=$(this).css(' ...
永恒python图片_python 数据词云展示实例（3）- 背景图设置
记录wordcloud库背景图的设置及样板之前介绍了wordcloud的基本使用wordcloud的基本使用,本文记录一下如何设置背景图. 样图背景图 tim.jpg 生成样图 dream.png ...
html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...

JS实现背景图的颜色实时渐变

JS实现背景图的颜色实时渐变相关推荐

最新文章

热门文章