526互联

实现鼠标hover内容旋转取消暂停并状态维持当前状态

发布时间 2023-12-12 14:11:11作者: 朱自清的散文集

实现鼠标 hover 内容旋转 取消暂停并状态维持当前状态

❓：知识点总结
?：控制动画开始 控制动画结束 无限播放属性

animation-play-state: running;

animation-play-state: paused;

infinite

代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      .icon-container {
        display: inline-block;
        position: relative;
        font-size: 24px;
        /* 设置图标大小 */
      }

      .icon-container {
        animation: rotate 2s linear infinite;
        /* 添加旋转动画 */
        animation-play-state: paused;
        /* 初始状态下暂停动画 */
      }

      .icon-container:hover {
        animation-play-state: running;
        /* 鼠标悬停时播放动画 */
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>

  <body>
    <div class="icon-container">
      <i class="icon">✨</i>
      <!-- 这里放置你要旋转的图标或内容 -->
    </div>
  </body>
</html>