美文网首页
css 实现跳动的心

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