css跳动的心

最新推荐文章于 2024-05-21 21:13:29 发布

qq_59739040

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量80

点赞数

分类专栏： div+css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_59739040/article/details/126928538

版权

div+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用css动画完成一个简单的跳动效果

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跳动</title>
		<style>
			body{
				background-color: #000;
			}
		.box{
			width: 300px;
			height: 300px;
			margin: 200px auto;
			/* 动画名称 运动时间  匀速运动  无限次数  往复运动 */
			animation: kill 1.5s linear infinite alternate;
		}
			.box div{
				width: 120px;
				height: 200px;
				background-color: darkred;
			}
			.left{
				border-radius: 60px 60px 0 0; 
				transform: rotate(-45deg) translateX(45px);
				float: left;
				box-shadow: 0px 2px 20px 5px red;
			}
			.right{
				border-radius: 60px 60px 0 0; 
				transform: rotate(45deg) translateX(-45px);
				float: left;
				box-shadow: 15px -2px 20px -2px red;
			}
			@keyframes kill {
				0%{
					transform: scale(1);
				}
				
				100%{
					transform: scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>