HTML图标动画 - Html

简介

HTML图标动画是一种基于HTML和CSS的动画效果，可以让网页中的图标或者图形动态展示。这种动画效果可以为网页带来更加生动有趣和吸引人的体验，突出网页的重点内容。

实现方法

使用CSS3实现

用CSS3的animation实现动画效果。

//示例代码

.icon {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

使用CSS3实现的优点是能够轻松创建精美的效果，并且能够兼容到较低版本的浏览器。同时也具备灵活性，可以做到各种形式，而且效果很棒。

使用JS/CSS实现

如下是一个JS/CSS实现的交互动画，它由三个同心圆的组合，随着时间以不断变大的速度散开。

CodePen 风格的演示页：

<div class="content-circle">
  <div id="cycle1" class="cycle"></div>
  <div id="cycle2" class="cycle"></div>
  <div id="cycle3" class="cycle"></div>
</div>

.content-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 160px;
  width: 160px;
  margin-left: -80px;
  margin-top: -80px;
  animation: show 1s ease-in-out 0s infinite alternate none;
}
.cycle {
  height: 80px;
  width: 80px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.cycle:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.05);
}
.cycle:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.15);
  animation: show 1s ease-in-out 0.3s infinite alternate none;
}
.cycle:nth-child(3) {
  background-color: rgba(0, 0, 0, 0.25);
  animation: show 1s ease-in-out 0.6s infinite alternate none;
}
@-webkit-keyframes show {
  to {
    transform: rotateY(360deg) scale(1.7);
  }
}
@keyframes show {
  to {
    transform: rotateY(360deg) scale(1.7);
  }
}

总结

HTML图标动画是一个能够美化网页的有效方法。使用CSS3实现动画效果可以更加方便的进行创作和变化，但是缺点是仅兼容到较低版本的浏览器。而利用JS和CSS实现的方案可以更加自由和灵活地控制动画效果，但相比之下更加代码臃肿。通过这些实现方式，能够让我们的网页更具创意，从而提高用户体验。