目前想做一个通过雪碧图做成的GIF动画。实现功能：长条雪碧图实现GIF（主要能实现GIF就行，多图的话第一次要多次请求各个图的资源，会有闪烁而且耗资源）窗口自适应（雪碧图的窗口）宽度始终使用%，非定宽高...

javascript - 关于雪碧图制作Gif的时候自适应窗口大小的方法？

目前想做一个通过雪碧图做成的GIF动画。
实现功能：

长条雪碧图实现GIF（主要能实现GIF就行，多图的话第一次要多次请求各个图的资源，会有闪烁而且耗资源）
窗口自适应（雪碧图的窗口）
宽度始终使用%，非定宽
高度父容器随子容器变化
子容器的高度随图片宽度变化而变化

基本上就是利用修改background-position的数值，对背景图片展示的位置进行修改。
自适应的方式利用了img图片对父容器撑起高宽的方式实现的。
然后利用cover属性进行的背景图片缩放。

因为搞前端真的只有一个月多，大神轻喷。。

现阶段遇到一个问题：
在窗口变动之后（也就是imgp），雪碧图的高宽也要变动。cover实现的。但是出现一个问题，无法获取雪碧图变化后的宽度，无法使用px？使用%的话，其真实的效果还需要引入margin将自身变化的数值（怎么搞？不能动态计算吧，每个step的数值怎么计算）（参考链接： position1 position2）
用%的方法是可以，但是出现了抖动。感觉是由于自适应之后产生的误差引起的。貌似没办法解决啊。难道说是需求有问题还是这个实现方法不好？

所以，怎么实现我的需求？有懂的大神给个方案么？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>p</title>
    <style type="text/css">
        .container{
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: green;
            opacity: 0.5;
            margin: 0;
            padding: 0;
        }
        .imgp{
            width: 50%;
            border: 1px solid;
            margin:0 auto;
            background-image: url("sprite.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
            animation: temp 1s steps(10,start) infinite;
        }
        .hiddenImg{
            width: 100%;
            height: auto;
            visibility: hidden;
        }
        @keyframes temp {
            0% {
                background-position:0% 0;
            }
            100% {
                background-position: 100% 0;
            }
        }
        
    </style>
</head>
<body>
    <p class="container">
    <p class="imgp">
            <img class="hiddenImg" src="container.png"></img>
        </p>
    </p>
</body>
</html>

天蓬老师2774 Il y a quelques jours342

javascript - 关于雪碧图制作Gif的时候自适应窗口大小的方法？

répondre à tous(0)je répondrai