css 实现跳动的心
作者:
flyjar | 来源:发表于
2022-02-14 11:44 被阅读0次 <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>
本文标题:css 实现跳动的心
本文链接:https://www.haomeiwen.com/subject/zgpclrtx.html
网友评论