CSS动画

最新推荐文章于 2024-05-23 22:54:35 发布

高鹏飞白羊

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量103

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43755916/article/details/102464909

版权

web前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

将多个过度效果结合在一起就是动画
动画是通过关键帧开控制动画的每一步

关键帧

1，动画执行的时间点
2，在该点上的样式

动画的使用步骤

1，声明关键帧
@keyframes change{
0%{background:#f00;border-radius:0%;}
25%{background:#ff0;border-radius:50%;}
50%{background:pink;border-radius:50%;}
75%{background:#00f;border-radius:50%;}
100%{background:orange;border-radius:0%;}
}
2，调用动画
指定动画名称：animation-name:
指定动画播放周期：animation-duration
指定动画播放速度时间曲线函数：animation-timing-fuction:
ease/linear/ease-in/ease-out/ease-in-out
指定动画延时：animation-delay
指定动画循环次数：animation-iteration-count:infinite;
默认为1，infinite无限循环
动画播放顺序：animation-direction:reverse;
默认为normal，
reverse为反转播放，
alternate轮流播放，奇数次正向，偶数次逆向
简写方式:animation:name duration timing-function delay iteration-count-direction
有延时的时候，将第一帧显示：animation-fill-mode:backwards;
运行完的时候，将最后一帧显示：animation-fill-mode:forwards;both是同事设置
设置动画是处于播放还是暂停状态上：animation-play-state:
running运行，
paused暂停

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}		
		@keyframes change{
			0%{background:#f00;border-radius:0%;}
			25%{background:#ff0;border-radius:50%;}
			50%{background:pink;border-radius:50%;}
			75%{background:#00f;border-radius:50%;}
			100%{background:orange;border-radius:0%;}
		}
		div{
			width:200px;
			height:200px;
			border:1px solid red;
			font-size:30px;
			text-align:center;
			line-height:200px;
			animation:change 2s linear 3s;
			animation-fill-mode:both;
			animation-play-state:paused;
		}
		div:hover{
			/*animation-name:change;*/
			/*animation-duration:2s;*/
			/*animation-timing-function:linear;*/
			/*animation-delay:1s;*/
			/*animation-iteration-count:infinite;*/
			/*animation-direction:alternate;*/
		}
	</style>
	</head>
	<body>
		<div id="d1">
			福
		</div>
	</body>
	
</html>

动画放在div中，不许用鼠标放上去自己就会变化

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}		
		@keyframes change{
			0%{background:#f00;border-radius:0%;}
			25%{background:#ff0;border-radius:50%;}
			50%{background:pink;border-radius:50%;}
			75%{background:#00f;border-radius:50%;}
			100%{background:orange;border-radius:0%;}
		}
		div{
			width:200px;
			height:200px;
			border:1px solid red;
			font-size:30px;
			text-align:center;
			line-height:200px;
			animation:change 2s linear 0.1s infinite alternate;
		}
		div:hover{
			/*animation-name:change;*/
			/*animation-duration:2s;*/
			/*animation-timing-function:linear;*/
			/*animation-delay:1s;*/
			/*animation-iteration-count:infinite;*/
			/*animation-direction:alternate;*/
		}
	</style>
	</head>
	<body>
		<div id="d1">
			福
		</div>
	</body>
	
</html>

钟表

<!doctype html>
<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="max-age=3600">
	<!--引入外部样式-->
	<style>
		*{margin:0;padding:0}
		@keyframes cake{
			0%{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(360deg);
			}
		}
		#d1{
			width:500px;
			height:500px;
			border:3px solid #f00;
			border-radius:50%;
			margin:50px 50px;
			position:relative;
		}
		#d2{
			width:20px;
			height:200px;
			background:#f0f;
			position:absolute;
			bottom:250px;
			left:250px;
			transform-origin:center bottom;
			animation:cake 60s linear infinite;
		}
		#d3{
			width:20px;
			height:150px;
			background:#00f;
			position:absolute;
			bottom:250px;
			left:250px;
			transform-origin:center bottom;
			animation:cake 3600s linear infinite;
		}
	</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	</body>
	
</html>