HTML+CSS跳動的心
阿新 • • 發佈:2019-01-30
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; } }