css 实现跳动的心
2022-02-14 本文已影响0人
flyjar
<div class="jump-heart"></div>
<style lang="scss" type="text/css">
.jump-heart{
width:50px;
height:50px;
position: relative;
background: #EB372C;
transform: rotate(45deg);
animation: identifier 1s ease infinite alternate-reverse;
&::before {
content: '';
width: 50px;
height: 50px;
background: #EB372C;
left:-50%;
position:absolute;
z-index: 2;
border-radius: 50%;
}
&::after {
content: '';
width: 50px;
height: 50px;
background: #EB372C;
top:-50%;
position:absolute;
border-radius: 50%;
z-index: 2;
}
}
@keyframes identifier {
to{
transform: rotate(45deg) scale(2)
}
}
</style>