css实现图片人物在招手

CSS是一种样式语言，它可以让我们的网页更加美观和具有吸引力。在这篇文章中，我们将介绍如何使用CSS实现一张图片人物在招手的动画效果。

 /*HTML部分*/
 <div class="container">
   <img src="person.png" class="person" alt="person">
 </div>

 /*CSS部分*/
 .container {
   position: relative;
   width: 300px;
   height: 300px;
 }

 .person {
   position: absolute;
   top: 0;
   left: 0;
   animation: wave 2s infinite;
 }

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

首先，我们需要在HTML中创建一个容器元素和一个用于表示人物的img元素。容器元素用于相对定位，而人物元素用于绝对定位，这样我们就可以将人物元素放在容器元素中的任意位置。

在CSS中，我们定义了容器元素的大小，并在人物元素中使用了动画关键帧（animation keyframes）。通过旋转人物元素的角度，我们可以创建一种人物招手的效果。

最后，我们在人物元素的CSS中添加了一个animation属性，这样就可以让动画无限重复播放。

使用CSS实现这种动画效果，不仅能让网页更加有趣和生动，还可以吸引用户的注意力，进而提升网站的用户体验和品牌价值。