雪碧图的使用

最新推荐文章于 2022-09-07 01:54:55 发布
最新推荐文章于 2022-09-07 01:54:55 发布
阅读量1k 收藏
点赞数 4
分类专栏： 前端js技术，问题集合 文章标签： 雪碧图的使用 steps
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dalqyou/article/details/100099426
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title> Sprite Sheet Animation</title>
    <style>
        body {
            font-size: 12px;
        }

        section {
            width: 500px;
            text-align: center;
        }

        /* star */
        .star {
            /* 如果为横向的雪碧图 则 height 为图片分辨率的高，反之若为纵向雪碧图 则 width 为图片分辨率的宽*/
            /* 这里为横向图  1800*60  所以height:60px ，宽的话随意设定只要能把图片显示出来都是可以的*/
            width: 60px;
            height: 60px;
            box-shadow: 0 0 5px 0 #939393;
            /*这些都是为了显眼设置 不是必须的  */
            margin: 10px auto;
            /*这些都是为了显眼设置 不是必须的  */
            background: url(./image/stars.png);
        }

        @keyframes star {
            0% {
                background-position: 0;
            }

            100% {
             /*这里的1740是用分辨率的宽高相减得到 */
                background-position: -1740px;
            }

            /* to {background-position:100%;} */
        }

        #starcss {
            /*star是keyframes动画名称   第一个时间是完成动画花费的时间第二是延迟多少秒开始动画  然后是无限循环，normal是正常顺序播放 （reverse为反向）*/
            animation: star 2000ms steps(29, end) 0ms infinite normal;
            /* 这个动画中的 steps(29, end)   29指的是雪碧图里面图与图的间隔，必须为正整数，必选，把动画分割的段数， 即 a.b.c（a|b|c） 之中有两个点（或者|），分为两段*/
              /* 用css 需要知道间段数 ：29 */
        }

        /* 地鼠 */
        .ds {
            width: 400px;
            height: 430px;
            margin: 10px auto;
            background: url(./image/Mouse.png);
            background-size: auto 100%;  //  这个在适配里面很重要 ··············································**
        }

        @keyframes mouse {
            from {
                background-position: 0;
            }

            to {
              /*这里的9890是用分辨率的宽高相减得到 */
                background-position: -9890px;
            }

            /* to {background-position:100%;}  一样*/
        }

        #ds {
            /*star是keyframes动画名称   第一个时间是完成动画花费的时间第二是延迟多少秒开始动画  然后是无限循环，normal是正常顺序播放 （reverse为反向）*/
            /* animation: mouse 2000ms steps(23, end) 0ms infinite normal; */
              /* 用css 需要知道间段数 ：23 */
        }

        /* light */

        .light {
            position: relative;
            width: 614px;
            height: 161px;
            background: url(./image/LOGO_05.png) no-repeat;
        }

        @keyframes light {
            from {
                background-position-y: 0;
            }

            to {
                background-position-y: 100%;
            }
        }

        .lighta {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url(./image/light.png) no-repeat;
            background-position: 0 0;
            background-size: 100% auto;    //  这个在适配里面很重要 ·········································**
            /*star是keyframes动画名称   第一个时间是完成动画花费的时间第二是延迟多少秒开始动画  然后是无限循环，normal是正常顺序播放 （reverse为反向）*/
            animation: light 1450ms steps(23, end) 0ms infinite normal;
            /* 用css 需要知道间段数 ：23 */
        }
    </style>
</head>

<body>
    <!-- 星星js控制的 -->
    <section>
        <!-- <div class="star" id="starjs"></div>
        <div>星星js控制的</div> -->
        <!-- <span>
            <button id="cssPlay">播放/暂停</button>
            <button id="cssSlowDown">-减速-</button>
            <button id="cssSpeedUp">+加速+</button>
            <button id="cssReverse">切换播放顺序</button>
        </span> -->
    </section>
    <script>
        let css = document.getElementById('starjs');
        // let cssPlay = document.getElementById('cssPlay');
        // let cssSlowDown = document.getElementById('cssSlowDown');
        // let cssSpeedUp = document.getElementById('cssSpeedUp');
        // let cssReverse = document.getElementById('cssReverse');
        let xPos = 0;
        let interval = 33.333333;  //100 是3s
        let direction = -1; // -1: forward, 1: reverse
        function cstarnimate() {
                                                    // //需要知道图片分辨率的高，宽
            css.style.backgroundPosition = direction * (xPos += 60) % 1800 + 'px';
        }
        function resetInterval() {
            clearInterval(timer);
            timer = setInterval(cstarnimate, interval);
        }
        /* Initial timer setup */
        // let timer = setInterval(cstarnimate, interval);
        // cssPlay.addEventListener('click', function() {
        //     if(timer) {
        //         clearInterval(timer);
        //         timer = undefined;
        //     } else {
        //         timer = setInterval(cstarnimate, interval);
        //     }
        // });
        // cssSlowDown.addEventListener('click', function() {
        //     if(interval + 10 >= 200) interval = 200;
        //     else interval += 10;
        //     resetInterval();
        // });
        // cssSpeedUp.addEventListener('click', function() {
        //     if(interval - 10 <= 20) interval = 20;
        //     else interval -= 10;
        //     resetInterval();
        // });
        // cssReverse.addEventListener('click', function() {
        //     if(direction === 1) direction = -1;
        //     else direction = 1;
        //     resetInterval();
        // });
    </script>

    <section>--------</section>

    <!-- 星星css animation 写的 -->
    <section>
        <div class="star" id="starcss"></div>
        <div>星星css animation 写的</div>
        <!-- <span>
                    <button id="starcssPlay">播放/暂停</button>
                    <button id="starcssSlowDown">-减速-</button>
                    <button id="starcssSpeedUp">+加速+</button>
                    <button id="starcssReverse">切换播放顺序</button>
                </span> -->
    </section>
    <script>
            // var starcss = document.getElementById('starcss');
            // let starcssPlay = document.getElementById('starcssPlay');
            // let starcssSlowDown = document.getElementById('starcssSlowDown');
            // let starcssSpeedUp = document.getElementById('starcssSpeedUp');
            // let starcssReverse = document.getElementById('starcssReverse');
            // starcssPlay.addEventListener('click', function() {
            //     if(getComputedStyle(starcss).animationPlayState === 'running') {
            //         starcss.style.animationPlayState = 'paused';
            //     } else {
            //         starcss.style.animationPlayState = 'running';
            //     }
            // });
            // starcssSlowDown.addEventListener('click', function() {
            //     let duration = +getComputedStyle(starcss).animationDuration.slice(0, -1);
            //     if(duration + 0.3 >= 6) duration = 6;
            //     else duration += 0.3;
            //     starcss.style.animationDuration = duration + 's';
            // });
            // starcssSpeedUp.addEventListener('click', function() {
            //     let duration = +getComputedStyle(starcss).animationDuration.slice(0, -1);
            //     if(duration - 0.3 <= 0.6) duration = 0.6;
            //     else duration -= 0.3;
            //     starcss.style.animationDuration = duration + 's';
            // });
            // starcssReverse.addEventListener('click', function() {
            //     if(getComputedStyle(starcss).animationDirection === 'normal') {
            //         starcss.style.animationDirection = 'reverse';
            //     } else {
            //         starcss.style.animationDirection = 'normal';
            //     }
            // });
    </script>


    <section>--------</section>


    <!-- 地鼠 css  和js 分别都有-->
    <section>
        <div class="ds" id="ds"></div>
        <div>地鼠</div>
    </section>
    <script>
        // 用js 不需要知道间段数
        var ds = document.getElementById('ds');
        var xPos4 = 0;
        var interval4 = 50;  //100 是3s    周期定时器，什么时间开始执行
        var direction4 = -1; // -1: forward, 1: reverse  负数为正 从左往右播放
        function cstarnimate() {
            //横向雪碧图 高分辨率宽430px
            // 求余的好处是 不会出现小数，而且利用的是加法 ， 最初的初始位置是430 ，然后一直累加 860 , 
            // 求余之后 860% 10320 = 860 , 2580% 10320 = 2580 ... 最后 10320%10320 = 0， 这些都是倍数关系， 10750%10320 = 430，往后的结果都是重复的
            // 不想要数字那么大也可以加个判断
            if (xPos4 == 10320) xPos4 = 0; //可以重新归0， 初始位置
            xPos4 = xPos4 + 430; //需要知道图片分辨率的高
            ds.style.backgroundPosition = direction4 * xPos4 % 10320 + 'px';
        }
        var timer4 = null;
        function resetInterval() {
            clearInterval(timer4);
            timer4 = setInterval(cstarnimate, interval4);
        }
        /* Initial timer setup */
        timer4 = setInterval(cstarnimate, interval4);


    </script>

    <section>--------</section>

    <!--  css animation流光字 -->
    <section>
        <div class="light">
            <div class="lighta"></div>
        </div>
        <div>流光字</div>
    </section>


</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

今夜你是我的模特
关注
专栏目录
背景图片时一个雪碧图。图片写在数组中通过循环获取
肖肖肖丽珠的博客
03-06 851
css因为引用的是一个图片，只是位置的变化。所有直接在css里面设置背景图.pic{width:80px;height:80px;display:inline-block;background:url('img/index.png') no-repeat;}&lt;ul class="app_list_box"&gt;&lt;/ul&gt;&lt;script src="js/jquery-3.1...
五步使用雪碧图
Britney10_21的博客
03-23 1843
五步使用雪碧图（CSS-Sprite） 你以为我要跟你介绍这样的雪碧图？那你就大错特错了！此雪碧非彼雪碧，现在就跟我一起来瞧瞧吧！！ 一、什么是雪碧图 CSS雪碧 即CSS-Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的部分图片。雪碧图被运用在众多使用了很多小图标的网站上。（ps:此处为度娘给我的答案） 二、雪碧图的特点 1、一次性将多个图片加载进页面，可以提高页面的加载和访问速度； 2、降低请求次数之后便
css sprite 雪碧图生成小程序
04-28
css sprite 雪碧图生成小程序,已在github上开源，地址：https://github.com/iwangx/sprite
教你来使用雪碧图（CSS sprite）
热门推荐
Allenyhy的博客
08-07 6万+
什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
道阻且长，行则将至。
03-15 1万+
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite） 一、什么是雪碧图？ 雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。 想必大家都用过雪碧图吧，话不多说，看看雪碧图是啥玩意儿： 看看金立官网的雪碧图： 二、那
雪碧图的简单使用
丁七岁的博客
09-14 378
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>简单尝试雪碧图</title> <style type="text/css"> .x1{ width: 98px; height: 95px;
Webpack中雪碧图插件使用详解
08-27
Webpack 中雪碧图插件使用详解 Webpack 中雪碧图插件使用详解主要介绍了如何使用 Webpack 中的雪碧图插件来优化图标的加载，减少 HTTP 请求数量，提高网站性能。在开发过程中，我们需要用到很多图标，这些图标的...
简易亚马逊雪碧图
09-12
"简易亚马逊雪碧图"可能是指一个简化版的亚马逊网站使用雪碧图技术的例子。这个压缩包文件中可能包含了亚马逊网站上用于各种元素（如按钮、图标、导航条等）的图片，这些图片被整合到了一张或多张大图中。开发者可以...
webpack中如何使用雪碧图的示例代码
12-09
一、什么是雪碧图？ CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用...三：如何使用雪碧图 雪碧图在之前有很多方式，如ps之类，现在最佳的
什么是雪碧图，怎么用？
初漾的博客
05-10 6060
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，该图片使用CSS background和background-position属性渲染。  优点：加载网页图片时，减少服务器的请求次数，提高页面的加载速度。  缺点：耗费内存，影响浏览器的缩放功能，拼图维护比较麻烦，使
雪碧图介绍及简单使用......
hertha_js的博客
01-18 620
雪碧图怎么使用？
雪碧图／精灵图使用教程（CSS Sprites）
李静静
10-20 2万+
雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 一、使用雪碧图的优点有以下几点： 将多张图片合并到一张图片中，可以减小图片的总大小。 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。 使用步骤：（首先理解下sprites图其实就是将一大块图用来做背景图，与普通背景图不同的是：只在某固定位置显示某部分图） 找到页面上固定的图片（不会动态发...
三分钟学会如何使用css雪碧图（Sprite）
MMccGrady的博客
09-07 2682
雪碧图是一种网页图片处理方式。我们制作一张网页往往需要用到很多的图片，如果都用img导入，每张图片都需要向服务器发送请求，图片多了，服务器的负担就大了，用户使用过程中延迟也会增加。雪碧图通过将小图片整合在一张大图中，这样访问页面时大大减少了向服务器发送请求的次数。 往下↓看
按钮变换及通用方式（雪碧图使用）
comegoing_xin_lv的博客
08-11 2190
通过图片来设置按钮变化
图标字体 VS 雪碧图——图标字体应用实践
weixin_34111819的博客
05-01 166
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。 雪碧图 雪碧图实例：淘宝PC端 将多张小图放至一张大图 使用的时候，通过background-position调整显示的位置，如下图所示： 雪碧图的使用方法 ...
雪碧图 移动端雪碧图
徐同保的专栏
11-30 1184
雪碧图
雪碧图HTML人物,animateSprite-可控制雪碧图（sprites）动画的jQuery插件
weixin_32859127的博客
06-18 566
jquery.animateSprite是一款可控制雪碧图(sprites)制作动画效果的jQuery插件。通过该插件可以控制雪碧图播放、暂停、反向播放和更改播放动画速度等。安装可以通过npm或bower来安装animateSprite插件。bower install animatesprite使用方法使用该插件需要引入jQuery和jquery.animateSprite.js文件。HTML结构...
cesium使用雪碧图
最新发布
12-23
在Cesium中，可以使用雪碧图（Sprite）来实现贴图效果。雪碧图是一种将多个小图标合并到一张大图上的技术，通过指定不同的纹理坐标来显示不同的图标。 要在Cesium中使用雪碧图，可以按照以下步骤进行操作： 1. 创建自定义的Geometry形状，并指定贴图规则。可以使用Cesium的Geometry和GeometryInstance来创建自定义的几何体，并使用Material来指定贴图规则。 2. 将图片作为材质贴到自己的Geometry上。可以使用Cesium的TextureAtlas类来加载雪碧图，并将其作为材质贴到自定义的Geometry上。 3. 通过primitives加载自定义的Geometry。可以使用Cesium的Primitive和PrimitiveCollection来加载自定义的Geometry，并将其添加到场景中。 4. 可以通过更换appearance实现动态切换图片。可以使用Cesium的Appearance类来定义几何体的外观，并通过更换材质贴图来实现动态切换图片的效果。 以下是一个使用雪碧图的示例代码： ```javascript // 创建自定义的Geometry形状 var geometry = new Cesium.Geometry({ // ... 定义几何体的顶点信息 }); // 指定贴图规则 var material = new Cesium.Material({ // ... 定义贴图规则 }); // 将图片作为材质贴到自己的Geometry上 var textureAtlas = new Cesium.TextureAtlas({ // ... 加载雪碧图 }); material.setTextureAtlas(textureAtlas); // 创建自定义的GeometryInstance var geometryInstance = new Cesium.GeometryInstance({ geometry: geometry, attributes: { // ... 定义几何体的属性信息 }, id: 'customGeometry' }); // 创建Primitive并添加到场景中 var primitive = new Cesium.Primitive({ geometryInstances: [geometryInstance], appearance: new Cesium.Appearance({ material: material }) }); scene.primitives.add(primitive); // 动态切换图片 function changeTexture() { var newTexture = new Cesium.TextureAtlas({ // ... 加载新的雪碧图 }); material.setTextureAtlas(newTexture); } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值