Google LOGO的CSS Sprite

Batkid 发布于2019-08-29 13:48 / 1174人阅读

摘要：限制不高于的单张图片整合处理图片的目的是减少请求次数，如果每一张图片都向服务器发送请求，即影响服务器负载也影响页面性能。

为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰，Google Doodle推出了一款极其炫酷的LOGO，整个LOGO使用CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，实现了动画，而非传统的GIF动画图像。

效果

原文查看效果

CSS Sprite简介

CSS Sprites(css精灵)，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
限制：不高于200KB的单张图片

整合处理图片的目的是减少请求次数，如果每一张图片都向服务器发送请求，即影响服务器负载也影响页面性能。

CSS Sprite原理

CSS Sprites的原理就是把网页中用到的小图标、图片类集中整合到一张图片中。
再利用CSS中的背景属性

background-image

background-repeat

background-position

当需要显示指定图片时，定位到图片相应位置即可

Google粘土动画

实现步骤：
1、准备素材，设计动画的每一帧图片并整合成一张图片
2、监听点击事件执行动画
3、根据延迟时间设置图片背景位置以显示下一帧图片

素材

HTML

Google舞蹈者

实现步骤：
1、准备素材，收集舞蹈者每一个动作集成到一张图片
2、初始化每一个动作的位置
3、定时动态创建div元素设置背景位置和元素位置

素材

HTML

(function () {
    window.google={};
        if (!google.doodle) google.doodle = {};
        var d = [
                [307, 48, 88, 89],
                [307, 48, 89, 89],
                [307, 48, 91, 89],
                [305, 49, 93, 89],
                [305, 50, 93, 88],
                [305, 50, 93, 88],
                [306, 52, 92, 86],
                [305, 53, 93, 84],
                [305, 54, 94, 83],
                [306, 54, 93, 83],
                [307, 54, 92, 83],
                [307, 54, 92, 83],
                [308, 54, 90, 83],
                [308, 54, 90, 83],
                [306, 53, 91, 84],
                [306, 53, 91, 84],
                [308, 53, 90, 84],
                [308, 53, 90, 84],
                [305, 53, 92, 84],
                [305, 52, 92, 85],
                [306, 52, 91, 85],
                [308, 51, 88, 87, 1],
                [308, 50, 88, 88],
                [308, 49, 88, 88],
                [307, 49, 89, 88],
                [307, 50, 89, 87],
                [308, 51, 89, 86],
                [307, 54, 90, 83],
                [307, 57, 90, 80],
                [306, 58, 92, 79],
                [306, 58, 92, 79],
                [305, 60, 92, 77],
                [302, 61, 95, 76],
                [302, 63, 95, 74],
                [302, 51, 96, 86],
                [302, 66, 98, 71],
                [304, 67, 96, 69],
                [301, 63, 96, 74],
                [301, 58, 93, 79],
                [291, 52, 94, 85],
                [288, 50, 71, 88],
                [285, 43, 76, 95],
                [285, 37, 70, 101],
                [281, 29, 55, 109],
                [278, 20, 58, 119],
                [278, 20, 55, 119, 1],
                [277, 12, 121, 127],
                [271, 2, 122, 138],
                [267, 1, 126, 139],
                [264, 0, 136, 140],
                [260, 0, 141, 140],
                [255, 0, 148, 140],
                [252, 0, 151, 140],
                [249, 2, 121, 138],
                [247, 3, 123, 137],
                [246, 3, 123, 137],
                [246, 2, 124, 137],
                [258, 2, 112, 137],
                [263, 2, 106, 137],
                [263, 2, 106, 137],
                [262, 2, 103, 137],
                [260, 2, 104, 136],
                [260, 2, 104, 137, 1],
                [268, 2, 98, 137],
                [267, 2, 99, 137],
                [266, 2, 97, 137],
                [266, 3, 96, 136],
                [264, 3, 99, 136],
                [263, 3, 100, 136],
                [261, 3, 100, 136],
                [259, 2, 138, 137],
                [254, 2, 126, 137],
                [247, 2, 101, 136],
                [240, 2, 108, 136],
                [238, 1, 110, 137],
                [230, 1, 118, 138],
                [220, 15, 128, 124],
                [211, 18, 137, 121],
                [205, 43, 102, 96],
                [202, 45, 104, 93],
                [200, 38, 97, 101],
                [198, 38, 104, 101, 1],
                [197, 39, 107, 100],
                [197, 39, 112, 100],
                [213, 39, 94, 110],
                [212, 40, 95, 111],
                [211, 41, 97, 111],
                [209, 42, 99, 112],
                [209, 43, 98, 112],
                [213, 43, 87, 112],
                [213, 42, 83, 113],
                [211, 40, 86, 109],
                [211, 38, 86, 103],
                [211, 37, 88, 112],
                [211, 20, 186, 131],
                [213, 27, 167, 122],
                [212, 44, 87, 105],
                [210, 44, 88, 98],
                [195, 44, 106, 98],
                [189, 44, 110, 98],
                [182, 46, 117, 99],
                [173, 44, 118, 96, 1],
                [161, 43, 130, 99],
                [154, 42, 137, 97],
                [153, 42, 137, 97],
                [153, 42, 137, 97],
                [152, 41, 137, 98],
                [151, 41, 137, 97],
                [149, 41, 145, 97],
                [148, 25, 144, 114],
                [148, 13, 144, 126],
                [141, 12, 153, 127],
                [115, 11, 173, 128],
                [108, 7, 180, 133],
                [108, 4, 180, 136],
                [108, 3, 176, 137, 1],
                [108, 1, 161, 139],
                [105, 1, 235, 138],
                [103, 1, 295, 148],
                [103, 0, 277, 149],
                [108, 0, 234, 137],
                [101, 0, 232, 137],
                [99, 0, 135, 139],
                [95, 0, 244, 139],
                [81, 0, 152, 139],
                [69, 0, 164, 139, 1],
                [66, 0, 169, 139],
                [65, 0, 170, 139],
                [63, 0, 168, 138],
                [61, 0, 159, 138],
                [35, 0, 304, 139],
                [19, 0, 189, 140],
                [18, 11, 138, 129],
                [18, 11, 137, 129],
                [18, 11, 137, 128],
                [18, 6, 135, 133],
                [7, 4, 146, 136],
                [6, 4, 147, 136],
                [3, 4, 150, 136, 1],
                [3, 5, 150, 135],
                [3, 8, 150, 132],
                [4, 6, 394, 145],
                [12, 6, 388, 145],
                [11, 8, 389, 144],
                [11, 8, 387, 144],
                [11, 8, 387, 143, 1],
                [10, 8, 113, 131],
                [11, 8, 111, 131],
                [10, 9, 112, 130],
                [12, 9, 116, 130],
                [12, 9, 111, 130],
                [12, 9, 111, 130],
                [12, 9, 110, 131],
                [12, 34, 113, 106],
                [13, 35, 110, 104]
            ],
            e = d.length,
            f, g, h, i, j = -1,
            c = document.getElementById("graham-logo"),
            l = function () {
                var a = d[f];
                if (c && a[0]) {
                    var b = document.createElement("div");
                    b.id = "graham-logo" + f;
                    b.style.position = "absolute";
                    b.style.left = a[0] + "px";
                    b.style.top = a[1] + "px";
                    b.style.width = a[2] + "px";
                    b.style.height = a[3] + "px";
                    b.style.background = "url(/images/css-sprite/graham-sprite.png) no-repeat " + -g + "px " + -h + "px";
                    a[3] > i && (i = a[3]);
                    a[4] ? (g = 0, h += i, i = 0) : g += a[2];
                    c.appendChild(b);
                    ++f;
                    f < e && (j = window.setTimeout(l, 83))
                }
            },
            m = function () {
                google.doodle.a = !1;
                i = h = g = f = 0;
                j != -1 && (window.clearTimeout(j), j = -1);
                c.innerHTML = "";
                j = window.setTimeout(l, 83)
            };
            c.addEventListener ? c.addEventListener("click", m, !1) : c.attachEvent("onclick", m);
        if (!google.doodle.a) {
            google.doodle.a = !0;
            var n = document.createElement("img");
            n.addEventListener ? n.addEventListener("load", m, !1) : n.attachEvent("onload", m);
            n.src = "/images/css-sprite/graham-sprite.png"
        }
})();

总结

希望大家可以通过本文的Google动画实现了解到一些CSS Sprite技术，CSS Sprite是前端优化的一部分，合理的利用好可以提高网页的性能，也可以丰富网页内容。

GPU云服务器云服务器含有域名的logo 可添加logo的直播 -sprite Sprite

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112720.html

编写高质量的CSS

摘要：以上，从分层组织，模块化，使用时注意低权重原则，以及巧用雪碧图阐述了提高代码质量的四个方面。编写高质量代码前端开发修炼之道曹刘阳分层组织CSS 我们应用CSS的能力应该分成两部分：一部分是CSS的API，重点是如何用CSS控制页面内元素的样式；另一部分是CSS框架，重点是如何对CSS进行组织。推荐一种组织CSS的方法： base.css + common.css + page.c...

xuexiangjys 2019-08-29 11:09 评论0 收藏0
SVG Sprite 入门（SVG图标解决方案）

摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...

opengps 2019-08-02 15:54 评论0 收藏0
SVG Sprite 入门（SVG图标解决方案）

摘要：关于浏览器图标解决方案，一直就有很多以及相对而言矢量图标以及支持浏览器自身解析的优点，很多团队都已经在使用了。这篇文章主要说明图标的使用和制作。在中可以在任何地方复用文件中定定义的的形，包括和已经。 showImg(https://segmentfault.com/img/bVvef3); 关于浏览器图标解决方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...

dance 2019-08-19 18:13 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

wua_wua2012 2019-08-22 16:13 评论0 收藏0
Web前端开发规范手册

摘要：规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。文件规范文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

Tamic 2019-08-02 10:09 评论0 收藏0