[分享]css3动画电话小图标

CSS3动画可以让网页变得更生动、更吸引人，而电话小图标是一个常用的需要动画效果来增强用户体验的设计元素之一。下面我们来学习一下如何实现一个带有CSS3动画的电话小图标。/ CSS样式 / .icon...

CSS3动画可以让网页变得更生动、更吸引人，而电话小图标是一个常用的需要动画效果来增强用户体验的设计元素之一。下面我们来学习一下如何实现一个带有CSS3动画的电话小图标。

/* CSS样式 */
.icon{
  width: 50px;
  height: 50px;
  background-image: url('phone.png');
  background-size: cover;
  position: relative;
}

/* 动画实现 */
.icon:hover{
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
} 

以上代码中，我们首先定义了一个class为icon的元素，设置其宽高和背景图。然后，对其鼠标放上去时的状态进行动画处理，即通过animation-name指定动画名称为shake，设置动画持续时间为0.5秒，动画重复次数为无限次。

接下来，定义了一个keyframes的实例，即动画效果。通过transform属性对图标进行旋转，使其摇摆效果更加生动。设置0%、25%、50%、75%、100%五个时刻，旋转的角度不同，从而产生动态效果。

以上就是一个带有CSS3动画的电话小图标的实现方法。在实际应用中，可以根据具体需求对动画效果进行定制化，以达到更好的用户体验。