利用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>