HTML部分:
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
CSS部分:
.content{
width:300px;
height:300px;
margin:0 auto;
position:relative;
animation-name: dump;
animation-delay: 0ms;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.content .left,.content .right{
position:absolute;
width:150px;
height:240px;
background:red;
filter: drop-shadow(0 0 20px rgb(255,20,20));
border-radius:75px 75px 0 0;
}
.content .left{
transform: rotate(-45deg);
}
.content .right{
transform: rotate(45deg);
left:64px;
}
@keyframes dump{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
30%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}