css实现元素跟随鼠标转动的效果（看板娘效果）

随着html的成熟，我们的网站已经不再满足于单纯的文本展示和图片展示，通常我们在站点中会加入一些动态的元素，来吸引读者的眼球。例如电商页面的活动的跳动，加入购物车的特效，又或者部分网站中页面滚动时候加载一个动态的特效等，一切都离不开css动画。

那么css动画又是如何使用的呢？让我们一起来看看吧！

关于translate、transform、transition和animation

• transform：用于元素的转换(2D、3D)， 作用：旋转(rotate(-45deg))、偏移(translate(x,y))、缩放(scale(x,y))、倾斜(skew(30deg,20deg))；
• translate：是transform的一个方法，可以偏移当前元素(translate(x,y))；
• transition: 过渡动画属性，当元素从一种样式变换为另一种样式时为元素添加效果，例如：

  <div>
       <img src="https://p3-passport.byteacctimg.com/img/user-avatar/49017ef57ec30b6aae55c67f97b54af6~90x90.awebp">
   </div>
   <style>
       div {
           width: 80px;
           height: 80px;
           border-radius: 50%;
           overflow: hidden;
           img {
               width: 100%;
               height: 100%;
               /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
               transition: all 500ms ease-in-out;
               scale: 1;
           }
           img:hover {
               scale: 1.3;
           }
       }
   </style>
  

• animation： 动画属性，元素变化的各个关键控制，必须与@keyframes一起使用；

css如何定义动画

任何一个css动画，都包含两个关键控制词@keyframes和animation，这两个参数，分别控制关键帧和控制属性。很容易理解，关键帧就是动画在特定的帧显示的样式的控制，控制属性就是控制动画进出场速度或时间等属性。例如：

@keyframes move{ 
    0% { opacity: 0; }      // 进度0%时候完全透明 
    50% { opacity: 0.5; }   // 进度50%时候半透明 
    100% { opacity: 1; }    // 进度100%时候完全不透明 
}
@keyframes move1 {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animated {
    animation-name: move;  // 动画关键帧
    animation-duration: 2s; // 动画时间
    animation-timing-function: ease-in-out; // 动画速度（缓动）
    animation-delay: 1s;  //动画延迟
    animation-iteration-count: infinite;  // 动画无限次循环播放
    animation-direction: alternate;  // 第一个周期内动画正向播放，第二个周期中反向播放（来回移动）
    // 简写作
    // animation: fadeIn 2s ease-in-out 1s infinite alternate;
}

速度控制常用属性

我们尝试做一个title的出现动画：

javascript控制动画适用场景

• 在帧动画中提供更多的控制和灵活性，因为它可以操作更多的属性和关键帧。
• 在过渡动画中，JavaScript 主要用于触发和控制整个过渡过程。

简单来说，过渡动画适用于简单的、与用户交互相关的状态变化，而帧动画适用于更复杂的、需要精细控制的动画效果。

接下来，我们通过html+css+js一起来实现一个简单的类似看板娘的行为吧！

实现一个简单的看板娘

实现一个简单的看板娘，我们需要的元素要领：

• 一个页面转动的元素，充当看板娘的载体（这里是从iconfont随便找了一个svg图标）；
• css控制动画过渡效果；
• js添加鼠标移动监听时间，并动态设置角度参数；

那么我们一起来看一下代码吧！

在这里我们为了效果明显，js部分计算基数给的比较大，也可以适当的调整，这样一个简单的跟随鼠标移动的看板娘效果就做好了，我们可以在上面再添加一下页面初始化事件或点击事件，这样就可以和它进行活动了，事件我在这里就不多赘述了。

原文链接：https://juejin.cn/post/7355482120707489855 作者：进阶的小叮当