前端一张连续的静态长图鼠标移入移除显示动态效果。

最新推荐文章于 2024-07-04 18:15:00 发布

小白6402

最新推荐文章于 2024-07-04 18:15:00 发布

阅读量753

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/nihaio25/article/details/121879811

版权

前言：看了腾讯云有静态的一张长图，动画的那种移入移出的效果。我们的项目也想做这种效果。主管叫我看了下怎么实现的，叫我模仿一下实现。我也试了一下。先看效果图吧

在这里插入图片描述

然后我写的原生代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    html ,body{
        width: 100%;
        height: 100%;
     }
     .content{
      width: 500px;
      height: 500px;
      margin: 0 auto;
      overflow: hidden;
     }
     .box{
         width: 60px;
         height: 60px;
         background: url(./1.png);
         overflow: hidden;
         margin-top: 40px;
         background-repeat: no-repeat;
         background-size: 100% auto;
     }
     .box{
        animation-duration: 1s;
        animation-timing-function: steps(24);
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-play-state: running;
        /* animation-name: move ; */
     }
     @keyframes  entery {
         0%{
            background-position: 0 0;
         }
        to {
            background-position: 0 -1440px;
        }
     }
     @keyframes  leave {
         0%{
            background-position: 0 -1440px;
         }
        to {
            background-position: 0 0;
        }
     }
    </style>
</head>
<body>
    <div class="content">
        <div class="box" id='boxi'>
        </div>
    </div>
</body>
<script>
    window.onload=function(){
        var id=document.getElementById('boxi');
        id.onmouseenter=function(){
            id.style.animationName='entery'
        }
        id.onmouseleave=function(){
            id.style.animationName='leave'
        }
    }
</script>
</html>

附上图片

在这里插入图片描述

emm,你的图片肯定跟我的图片是不一样的，要想达到这种效果，那就要做调整了，主要改哪里呢，首先：你要知道你的图片长度，跟你有多少张图片，

step()//图片的个数一般 -1

在这里插入图片描述

下面这段代码可以简写

        animation-duration: 1s;
        animation-timing-function: steps(24);
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-play-state: running;
        /* animation-name: move ; */
      简写   animation: move 0.5s steps(24) forwards;

如果你的效果你发现它是往上拉图的感觉，那就是你参数没调好。刚开始我也是郁闷，所以啊，用别人的代码的同时，也要记得改好参数。

小白6402

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端一张连续的静态长图鼠标移入移除显示动态效果。

前言：看了腾讯云有静态的一张长图，动画的那种移入移出的效果。我们的项目也想做这种效果。主管叫我看了下怎么实现的，叫我模仿一下实现。我也试了一下。先看效果图吧然后我写的原生代码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
复制链接

扫一扫