css动画演示

最新推荐文章于 2025-05-04 03:32:42 发布

原创最新推荐文章于 2025-05-04 03:32:42 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

WEB 专栏收录该内容

23 篇文章

订阅专栏

本文通过三个不同的DIV元素展示了使用CSS实现的动画效果。包括颜色渐变动画、多阶段颜色变化动画及鼠标悬停触发的颜色过渡动画。这些示例有助于理解如何运用CSS动画属性来创建动态视觉效果。

<img src="https://img-blog.youkuaiyun.com/20141018180843874?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSFRYX0hlbGxvV29ybGQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>动画演示</title>
	<style type="text/css">
		#div_1{
			width: 300px;
			height: 150px;
			background-color: #000000;
			-webkit-animation:htx 5s;
		}
		@-webkit-keyframes htx{
			from{background-color: yellow;}
			to{background-color: blue;}
		}
		#div_2{
			width: 300px;
			height: 150px;
			background-color: #000000;
			-webkit-animation:htx1 10s;
		}
		@-webkit-keyframes htx1{
			0%{background-color: yellow;}
			30%{background-color: blue;}
			60%{background-color: red;}
			100%{background-color: purple;}
		}
		#div_3{
			width: 300px;
			height: 150px;
			background-color: #000000;
			
		}
		#div_3:hover{
			-webkit-animation:htx2 12s;
		}
		@-webkit-keyframes htx2{
			0%{background-color: purple;}
			30%{background-color: yellow;}
			60%{background-color: blue;}
			100%{background-color: red;}
			
		}
	</style>
</head>
<body>
	<div id="div_1">
		
	</div>
	<div id="div_2"></div>
	<div id="div_3"></div>
</body>
</html>