Question

我想让我的字体真棒图标每隔1秒“响”，按响，我的意思是制作一个css动画，使手机看起来像在响（如果是在变换起始中心的情况下进行短暂旋转？），一个带有CSS动画的菜鸟：

<div style="width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color:white;"><i class="LAYOUTnav7_links_button_icon fa fa-phone fs_bigger main"></i></div>

有帮助吗？

Answer 1

您可以使用动画和关键帧来做到这一点，这是一个示例：

.phone {
  display:block;
  width: 60px;
  height: 60px;
  font-size: 40px;
  margin:50px auto 0;
  color: #9e9e9e;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@keyframes ring {
  0% { transform: rotate(0); }
  5% { transform: rotate(30deg); }
  10% { transform: rotate(-28deg); }
  15% { transform: rotate(34deg); }
  20% { transform: rotate(-32deg); }
  25% { transform: rotate(30deg); }
  30% { transform: rotate(-28deg); }
  35% { transform: rotate(26deg); }
  40% { transform: rotate(-24deg); }
  45% { transform: rotate(22deg); }
  50% { transform: rotate(-20deg); }
  55% { transform: rotate(18deg); }
  60% { transform: rotate(-16deg); }
  65% { transform: rotate(14deg); }
  70% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
  80% { transform: rotate(-8deg); }
  85% { transform: rotate(6deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div>
  <span class="phone fa fa-phone"></span>
</div>

CSS手机铃声动画

1 个答案: