跳动的心
<style>
* {
margin:0;
padding:0;
background-color: #FCC7C7;
}
.all {
margin: 100px auto;
width: 200px;
height: 200px;
position: relative;
animation: shake 0.5s linear 1s infinite;
}
.all div{
width: 100%;
height: 100%;
position: absolute;
background: #FC6666;
}
.left{
border-radius: 100px 100px 0 0;
transform: translate(-50px,0) rotate(-45deg);
}
.right {
border-radius: 100px 100px 0 0;
transform: translate(50px,0) rotate(45deg);
}
.down {
transform: translate(0,64px) rotate(45deg) scale(.9,.9);
}
@keyframes shake {
from {
transform:scale(.9,.9);
}
to {
transform:scale(1.1,1.1);
}
}
@keyframes shadow {
from {
}
to {
box-shadow:0px 0px 50px red; /*阴影*/
}
}
</style>
<body>
<div class="all">
<div class="left"></div>
<div class="right"></div>
<div class="down"></div>
</div>
</body>
