使用Js让背景实现自动改变linear-gradient颜色

最新推荐文章于 2024-05-17 08:40:11 发布

BuerYouth

最新推荐文章于 2024-05-17 08:40:11 发布

阅读量2.2k

点赞数

分类专栏： H5前端文章标签： js css

本文链接：https://blog.csdn.net/qq_43656397/article/details/112508929

版权

H5前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渐变背景自动变换效果

CSS线性渐变函数linear-gradient()实例
- 菜鸟教程对函数的解释
- 直接上实例

CSS线性渐变函数linear-gradient()实例

菜鸟教程对函数的解释

CSS linear-gradient() 函数

直接上实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动渐变背景</title>
	</head>
	<!-- 需要设置背景id -->
	<body id="bg">
		<p>这是一个测试文本</p>
		<script language="javascript">
			/*设置渐变背景数组*/
			var Arraycolor = new Array(
				"linear-gradient(to right, #e66465, #9198e0)",
				"linear-gradient(to right, #9198e0, #69DEDB)",
				"linear-gradient(to right, #69DEDB, #EDF892)",
				"linear-gradient(to right, #EDF892, #DCB2C6)",
				"linear-gradient(to right, #DCB2C6, #e66465)");
			var n = 0;
			function turncolors() {
				n++;
				if (n == (Arraycolor.length - 1)) n = 0;
				document.getElementById("bg").style.backgroundImage = Arraycolor[n]
				setTimeout("turncolors()", 3000); //可以设置自动变换时间
			}
			turncolors();
		</script>
	</body>
</html>

BuerYouth

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Js让背景实现自动改变linear-gradient颜色

渐变背景自动变换效果CSS线性渐变函数linear-gradient()实例菜鸟教程对函数的解释直接上实例CSS线性渐变函数linear-gradient()实例菜鸟教程对函数的解释CSS linear-gradient() 函数直接上实例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自动渐变背景</title> </head>
复制链接

扫一扫