CSS3中动画的制作案例

阿立聊代码

于 2024-08-03 18:14:20 发布

阅读量113

点赞数 5

分类专栏：网页设计文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_36324341/article/details/140894553

版权

网页设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@-webkit-keyframes 'expand' {
				0%	{border-width: 4px;}
				50%	{border-width: 12px;}
				100% {
					border-width: 4px;
					height: 130px;
					width: 150px;
				}
			}
			.donghua {
				border: 4px solid green;
				height: 100px;
				width: 100px;
				box-sizing: border-box;
				-webkit-animation: 'expand' 6s ease 1s 10 alternate;
			}
			.donghua:hover {
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div style="width: 800px;height: 600px;border: 1px solid;">
			<div class="donghua">
				
			</div>
		</div>
	</body>
</html>