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>
上一篇下一篇

猜你喜欢

热点阅读