• 雪碧图 css 使用方式与 Js使用方式

    示例雪碧图如下，雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能。

    雪碧图分析：该雪碧图横向为12等分，高度32px
    在这里插入图片描述

    1. JavaScript方式使用雪碧图（猜测力扣使用的方式就是这个）

    （步骤一）html格式为div嵌套img，div设置宽高overflow设置为hidden隐藏超出宽度，img设置高度宽度自适应图片完全展示。（html代码如下）

    <div class="mode javascript-mode">
    <button>javascript测试button>
    <div style="width: 18px;height: 18px;overflow: hidden;">
        <img style="height: 18px;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf64a103-2eee-41c9-b4a7-57511d30e28e/a27b3cbc-432f-4200-9f77-5f2c3b22d0fb.png" />
    div>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    （步骤二）Js代码编写，因设置宽高为18px，针对img使用translateX进行X轴平移即可实现效果，因12等分，为0时即展示的雪碧图第一张，所以循环11次就可以移动到雪碧图最后一张。（Js代码如下）

    // javascript方式
let x = 0;
document.querySelector('.javascript-mode button').addEventListener('click', function() {
    let mode = x == 0; // 变换模式
    document.querySelector('.javascript-mode img').style.transform = `translateX(-${x}px)`;
    let timer = setInterval(()=>{
        x += mode ? 18 : -18;
        document.querySelector('.javascript-mode img').style.transform = `translateX(-${x}px)`;
        // 为0即展示的是第一块
        // 雪碧图中存在12块 展示像素为18px 所以 18 * 11
        if(x == 0 || x >= 18 * 11){
                clearInterval(timer);
        }
    },50);
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    2. css方式使用雪碧图

    （步骤一）css主要使用background方式实现，html部分设置一个div承载图片即可（html代码如下）

    <div class="mode css-mode">
    <button>css测试button>
    <div />
div>

    • 1
    • 2
    • 3
    • 4

    （步骤二）background 设置为雪碧图url，background-size：参数一为宽度因为雪碧图宽度无法固定设置为auto，高度设置为100%即为18px，background-position：参数一为x轴 参数二为y轴。（css代码如下）

    .css-mode div{
    width: 18px;
    height: 18px;
    background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf64a103-2eee-41c9-b4a7-57511d30e28e/a27b3cbc-432f-4200-9f77-5f2c3b22d0fb.png);
    background-size: auto 100%; 
    background-position: 0% 0;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    （步骤三）定义从做到右的动画，background-position从0%-100%，steps为播放分为几步完成动画，因雪碧图为12等分且为0时即为展示的第一张图所以这边设置为11，forwards动画播放完毕时保持动画的最后一帧。

    @keyframes css-forward-move{
    0%{ background-position: 0% 0; }
    100%{ background-position: 100% 0; }
}
.css-mode div.forward-move{
    background-position: 0% 0;
    animation: css-forward-move 0.55s steps(11) forwards;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    （步骤四）定义从右向左的反向动画，解释参照步骤三

    .css-mode div.back-move{
    background-position: 100% 0;
    animation: css-back-move 0.55s steps(11) forwards;
}

@keyframes css-back-move{
    0%{ background-position: 100% 0; }
    100%{ background-position: 0% 0; }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    （步骤五）定义js代码动态赋值类名来展示动画

    document.querySelector('.css-mode button').addEventListener('click', function() {
    let div = document.querySelector('.css-mode div')
    div.className = div.className != 'forward-move' ? 'forward-move' : 'back-move';
})

    • 1
    • 2
    • 3
    • 4

    完整Html代码

    DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
    head>

    <style>
        
        .mode{
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .mode button{
            margin-bottom: 10px;
        }
        .css-mode div{
            width: 18px;
            height: 18px;
            background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf64a103-2eee-41c9-b4a7-57511d30e28e/a27b3cbc-432f-4200-9f77-5f2c3b22d0fb.png);
            background-size: auto 100%; 
            background-position: 0% 0;
        }
        
        .css-mode div.forward-move{
            background-position: 0% 0;
            /* forwards 动画保持最后一帧 */
            animation: css-forward-move 0.55s steps(11) forwards;
        }
        
        .css-mode div.back-move{
            background-position: 100% 0;
            /* forwards 动画保持最后一帧 */
            animation: css-back-move 0.55s steps(11) forwards;
        }
        
        @keyframes css-forward-move{
            0%{ background-position: 0% 0; }
            100%{ background-position: 100% 0; }
        }
        
        @keyframes css-back-move{
            0%{ background-position: 100% 0; }
            100%{ background-position: 0% 0; }
        }
        
    style>

    <body>
        
        <div class="mode javascript-mode">
            <button>javascript测试button>
            <div style="width: 18px;height: 18px;overflow: hidden;">
                <img style="height: 18px;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bf64a103-2eee-41c9-b4a7-57511d30e28e/a27b3cbc-432f-4200-9f77-5f2c3b22d0fb.png" />
            div>
        div>
        
        <div class="mode css-mode">
            <button>css测试button>
            <div />
        div>
        
        <script>
            // javascript方式
            let x = 0;
            document.querySelector('.javascript-mode button').addEventListener('click', function() {
                let mode = x == 0; // 变换模式
                document.querySelector('.javascript-mode img').style.transform = `translateX(-${x}px)`;
                let timer = setInterval(()=>{
                    x += mode ? 18 : -18;
                    document.querySelector('.javascript-mode img').style.transform = `translateX(-${x}px)`;
                    // 为0即展示的是第一块
                    // 雪碧图中存在12块 展示像素为18px 所以 18 * 11
                    if(x == 0 || x >= 18 * 11){
                        clearInterval(timer);
                    }
                },50);
            })
            
            // css 方式
            document.querySelector('.css-mode button').addEventListener('click', function() {
                let div = document.querySelector('.css-mode div')
                div.className = div.className != 'forward-move' ? 'forward-move' : 'back-move';
            })
            
        script>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
  • 相关阅读:
    TMS320F28335启动过程
    AIGC创作系统ChatGPT网站系统源码，支持最新GPT-4-Turbo模型
    【计算机毕业设计】网上商城购物系统
    rollup的使用
    海外短剧开源系统UNIAPP源码（支持多语言/海外支付/快捷登录）
    SAP RANGES定义及管理使用
    商陆花、秦丝、管家婆，到底服装加盟管理软件哪家强？来看排行榜
    element-ui使用el-date-picker日期组件常见场景
    基于STM32+华为云IOT设计的智能冰箱(华为云IOT)
    MDNNSVM
  • 原文地址：https://blog.csdn.net/qq_39342142/article/details/126306761