迟疑的节奏

导航

心跳动画 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>心跳</title>
	<style type="text/css">
       /*心跳*/
       div {
       	width: 100px;
       	height: 100px;
       	background-color: pink;
       	margin: 100px auto;
       	animation: heart 0.5s infinite;  /*每隔5s执行动画，无限次*/
       }

       @keyframes heart {
       	0% {
       		transform: scale(1);
       	}
       	50% {
       		transform: scale(1.1);
       	}
       	100% {
       		transform: scale(1);
       	}
       }

	</style>
</head>
<body>
	<div></div>
</body>
</html>

　　

posted on 2020-02-20 21:08  迟疑的节奏  阅读(127)  评论(0)    收藏  举报