[分享]css3多动画效果

CSS3多动画效果是目前网页设计中最热门的技术之一。它不仅能够增强网站的视觉效果，而且还可以提高用户的体验感。下面是一些常用的CSS3动画效果：/ 旋转效果 / .rotate { webkitani...

CSS3多动画效果是目前网页设计中最热门的技术之一。它不仅能够增强网站的视觉效果，而且还可以提高用户的体验感。下面是一些常用的CSS3动画效果：

/* 旋转效果 */
.rotate {
  -webkit-animation: rotate 2s linear 0s infinite;
  animation: rotate 2s linear 0s infinite;
}
 
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

上面的代码展示了旋转效果在CSS3中的实现。其中，@-webkit-keyframes 和 @keyframes 是定义动画的关键词。在这里，我们定义了一个名为 rotate 的动画，它将会在 2 秒内进行一次旋转，并且旋转方式是线性的，也就是一直进行。最后，在对不同浏览器添加前缀后，我们通过 transform: rotate() 来实现旋转操作。

/* 渐变效果 */
.gradient {
  -webkit-animation: gradient 2s linear 0s infinite;
  animation: gradient 2s linear 0s infinite;
  background-image: linear-gradient(to bottom, #f00, #00f);
  background-size: cover; 
}
 
@-webkit-keyframes gradient {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
}
 
@keyframes gradient {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
} 

另一个常用的CSS3动画效果是渐变效果。上述代码将在 2 秒内进行一个从上到下渐变的操作。在这里，我们通过使用 background-image: linear-gradient() 属性来定义渐变颜色，再通过 background-position 属性来控制渐变方向。

除了上述动画效果，CSS3还支持很多其他有趣的动画效果，如：缩放、闪烁、移动、摆动等。当然，在自己设计网站的时候，我们也需要注意效果在不同浏览器上的兼容性问题。