css动画演示

最新推荐文章于 2024-01-28 15:10:08 发布

棒老师

最新推荐文章于 2024-01-28 15:10:08 发布

阅读量482

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/HTX_HelloWorld/article/details/40213327

版权

WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/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>