CSS3动画片图片头像

CSS3动画可以让图片头像更生动、有趣。在这篇文章中，我们将学习如何创建一些简单而有趣的动画效果。

为了展示这些效果，我们需要准备一个图片头像。下面是我们将使用的头像图像：

接下来，我们将为这个头像图片添加两个动画效果。

1. 旋转动画

第一个动画效果将是一个简单的旋转动画。我们将利用CSS3中的transform属性来实现它。以下是代码：

img {
      transform: rotate(360deg);
      transition: transform 1s ease;
}
img:hover {
      transform: rotate(0deg);
}

这个代码利用了CSS3中的transform属性。首先，我们将图片旋转360度，然后我们将其在1秒钟内平滑地转换回来。当鼠标移动到图片上时，我们将其旋转回原始位置。

2. 抖动动画

第二个动画效果将是一个抖动效果。我们将使用CSS3中的@keyframes规则来制作它。以下是代码：

img {
      animation: shake 0.5s infinite;
}
@keyframes shake {
  0% {
     transform: translate(0, 0);
 }
  25% {
     transform: translate(-5px, 0);
 }
  50% {
     transform: translate(0, 0);
 }
  75% {
     transform: translate(5px, 0);
 }
  100% {
     transform: translate(0, 0);
 }
}
    

这个代码利用了CSS3中的@keyframes规则。我们定义了一个抖动动画，它将无限循环（由于我们将其设置为0.5秒循环）。抖动的关键是变换属性的使用（transform）。我们在动画的每个阶段都定义一个不同的位置变换（translate），从而使图像有一个自然的抖动效果。

这些是仅仅两个简单的CSS3动画效果。它们能够使您的图片头像更加活力和吸引人。请尝试在您自己的网站上应用它们，当然也可以应用类似的动画效果来改善网站的其它部分。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！