动画暂停与开始

最新推荐文章于 2023-09-19 11:28:48 发布

木木木和小琳琳

最新推荐文章于 2023-09-19 11:28:48 发布

阅读量120

点赞数 1

文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/qq_19820589/article/details/129236964

版权

文章介绍了如何使用CSS实现雪碧图动画，并在鼠标悬停时暂停动画的效果。通过设置特定的width、height、overflow属性以及使用keyframes和animation属性创建动画，同时利用:hover选择器暂停动画播放，实现交互性用户体验。

摘要由CSDN通过智能技术生成

一张雪碧图，

<div class="banner">
            <div class="banner1">
                <img src="img/*****.png" alt="">
                <!-- 图片为雪碧图 -->
            </div>
        </div>

* {
      padding: 0%;
      margin: 0%;
}


.banner {
      width: 218.3px;
      height: 200px;
      overflow: hidden;
}

.banner1 {
      width: 655px;
      height: 200px;
      animation: ban 3s steps(3) infinite;
}
            
.banner1:hover{
      animation-play-state: paused;
      /* 动画开始状态animation-play-state*/
      /* 动画暂停paused，就是说鼠标放上去暂停动画 */
      /* 动画running 鼠标放上去执行,这个配合一开始的暂停paused使用在上面animation里面的值写入即可 */
}

.banner1 img {
      width: 100%;
}

@keyframes ban {
      0% {
        margin-left: 0%;
     }

      100% {
        margin-left: -655px;
     }
}