如何利用CSS简单实现一个跳动的小红心呢？
请看下文，简要分为三个步骤：
1、首先定义3个div。
2、调整div的距离和形状。
3、增加阴影和实现动画功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color:#ffa5a5 ;
}
.cen{
width: 200px;
height: 200px;
background-color: #d5093c;
box-shadow: 0px 0px 70px #D5093C;
animation: 1s aj infinite;
}
.lef{
border-radius: 100px;
position: absolute;
top:200px;
left: 300px;
}
.c{
transform: rotate(45deg);
position: absolute;
top:275px;
left: 375px;
}
.rig{
border-radius: 100px;
position: absolute;
top:200px;
left: 450px;
}
@keyframes aj{
0%{transform: scale(1)rotate(45deg);}
50%{transform: scale(1.1)rotate(45deg);}
100%{transform: scale(1)rotate(45deg);}
}
</style>
</head>
<body>
<div class="cen lef" ></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
