练习：滚动渐变色背景

最新推荐文章于 2021-08-30 14:26:03 发布

前方请直行

最新推荐文章于 2021-08-30 14:26:03 发布

阅读量386

点赞数

分类专栏：前端基础笔记文章标签： html css

本文链接：https://blog.csdn.net/w1226234212/article/details/111301219

版权

前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇前端基础笔记介绍了如何使用CSS动画创建一个滚动渐变色背景的特效。代码示例中，通过设置`linear-gradient`背景，调整`background-size`和`animation`属性，实现了背景颜色在横向上的平滑过渡，形成了视觉上的滚动效果。此外，还展示了关键帧动画`@keyframes`的用法，以控制背景位置变化，达到循环滚动的动态效果。

摘要由CSDN通过智能技术生成

前端基础笔记06-练习：滚动渐变色背景

利用动画特效制作带有滚动渐变色背景效果

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景滚动渐变色</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 50px;
				border-radius: 25px;
				/* position: absolute; */
				/* 设置背景渐变色 */
				background-image: linear-gradient(to right, #fabcaf,#ffff00,#83ff75,#ff00ff,#00ffff,#ff55ff,#acd6fe,#4efeb3,#fabcaf); 
				/* 将背景的渐变色范围变大，横向尽量拉宽 */
				background-size: 1000% 150%;
				/* 设置 动画名（自定义） 时间 动画过渡类型（ease平滑过渡） 循环次数（infinite无限循环）*/
				animation: bg-color-move 3s ease infinite;
			}
			/* 帧动画 */
			@keyframes bg-color-move{
				0%{background-position: 0%,100%;}
				25%{background-position: 25%,75%;}
				50%{background-position: 50%,50%;}
				75%{background-position: 75%,25%;}
				100%{background-position: 100%,0%;}
			}
			p{
				display: block;
				width: 200px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 32px;
				font-weight: 600;
				font-family: "ms reference sans serif";
			}
		</style>
	</head>
	<body>
        <div>
            <p>submit</p>
        </div>
	</body>
</html>