css使用animation进行播放长图片

Hello_oll

已于 2023-08-10 11:05:52 修改

阅读量760

点赞数 2

文章标签：前端 vue.js html5 javascript css3

于 2023-08-01 10:14:20 首次发布

本文链接：https://blog.csdn.net/hello_oll/article/details/132029344

版权

文章目录

概要

提示：参考TDesign页面

例如：鼠标放入或离开卡片中图标，就会出现动效。打开控制台发现此动效为一张长图进行一帧帧播放。

openAI 的 GPT 大模型的发展历程。

研究使用

首先准备一张长图（长图地址）
创建一个div，把图片设置为其背景图，div大小与单独的一张图片大小完全一致，初始时竖直方向上位于第一张图片的位置。

<div id="anime_icon" class="anime-icon"></div>

.anime-icon{
   width: 160px; /*这个尺寸不能乱动，按照图片的尺寸来（单张尺寸）*/
   height: 160px;
   cursor: pointer;
   /*每一帧拼接而成的长图*/
   background-image: url('./icon_anjian_out.png'); 
   background-repeat: no-repeat;
   background-size: 100%;/*使图片和div的大小匹配*/
   background-position-y: 0;/*竖直方向上位于第一张图片的位置*/
}

再之后需要两个animation，一个负责鼠标移入时的动画，一个负责鼠标移出时的动画，内容很简单，就是对图片的竖直方向位置进行修改，即background-position-y的值

下方4000px是(图片总张数-1)*单张高度

提示：如果使用图片总张数，鼠标移入后会出现最后一帧变成第一张

@keyframes mouse-in{
 /*鼠标移入时从第一张移动到最后一张*/
  from{
      background-position-y: 0;
  }
  to{
      background-position-y: -4000px; 
  }
}
@keyframes mouse-out{
/*鼠标移出时从最后一张移动回第一张*/
  from{
      background-position-y: -4000px;
  }
  to{
      background-position-y: 0;
  }
}

最关键的一步来了，把动画绑定到类上，但是此时不能直接把mouse-out动画丢进anime-icon类里，因为这样会导致页面加载的时候就自动播放了一次从”最后一张图片到第一张图片“的动画，所以这里需要借助jquery，当触发了hover事件的时候，把mouse-out-class类丢上去。具体如下：

.anime-icon:hover{
    /*hover时用0.5s执行mouse-in动画*/
    animation: mouse-in .5s;
 
    /*这一句极其重要，将mouse-in拆成20个步骤执行（还记得我们那张长图总共有多少张小图吗）*/
    animation-timing-function:steps(25, end);
 
    /*动画执行结束后，停在最后一帧上*/
    animation-fill-mode:forwards;
}

.mouse-out-class{
    /*0.5s执行移出动画*/
    animation: mouse-out .5s;
 
    /*移出动画依然分成20步骤*/
    animation-timing-function:steps(25, end);
 
    /*动画结束时停在最后一帧*/
    animation-fill-mode:forwards;
}

然后在页面加载完成后，把mouse-out-class添加到div上即可：

$("#anime_icon").one('mouseover', function(){
    $(this).addClass('mouse-out-class');
})

完整代码

<html>
    <header>
        <script src="./jquery.min.js"></script>
        <style>
        @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -4000px;
            }
        }
        @keyframes mouse-out{
            from{
                background-position-y: -4000px;
            }
            to{
                background-position-y: 0;
            }
        }
        .anime-icon{
            width: 160px;
            height: 160px;
            cursor: pointer;
            background-image: url('./icon_anjian_out.png');
            background-repeat: no-repeat;
            background-size: 100%;
            background-position-y: 0;
        }
        .anime-icon:hover{
            animation: mouse-in .5s;
            animation-timing-function:steps(25, end);
            animation-fill-mode:forwards;
        }
        .mouse-out-class{
            animation: mouse-out .5s;
            animation-timing-function:steps(25, end);
            animation-fill-mode:forwards;
        }
        </style>
    </header>
    <body>
        <div id="anime_icon" class="anime-icon"></div>
        <script>
            $("#anime_icon").one('mouseover', function(){
                $(this).addClass('mouse-out-class');
            })
        </script>
    </body>
</html>

在vue项目中使用

css部分同上
js部分如下
提示：在div标签中绑定mouseleave事件并传入$event，之后在js中增加class

<div id="anime_icon" class="anime-icon" @mouseleave="leaveIcon($event)"></div>

function leaveIcon(e) {
  e.currentTarget.className = `anime-icon mouse-out-class`
}

该文章参考教你用长图片实现悬浮动效（阿里云首页动效图标）进行补充完善

Hello_oll

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫