澳门蒲京娱乐 1

澳门蒲京娱乐 2

  不明白大家产生无发留意到谷歌今天官网及的logo,刚起同看还看是gif,在条分缕析一看,发现并非如此,原来是运用CSS
Sprite技术,利用一个始发图片与千篇一律张画满各个动作之拼接图片,从而实现了动画效果。

css-sprite

  本人时手痒,就想将此扒下,但发现谷歌的js写的太牛逼了,无奈,只能协调之所以自己之想去学一个了。首先,需要简单摆图,分别是:

啊纪念美国现代跳舞舞蹈家玛莎·葛兰姆诞辰,Google
Doodle推出了同等迟迟极其炫酷的LOGO,整个LOGO使用CSS
Sprite技术,利用一个初步图片与同一摆设写满各个动作的拼接图片,实现了动画片,而休传统的GIF动画图像。

澳门蒲京娱乐 3

效果

原文查看效果

澳门蒲京娱乐 4

CSS Sprite简介

CSS
Sprites(css精灵),是一样种植网页图片以处理方式。它同意你以一个页面涉及到之具备零星图片都饱含到均等布置大图中错过,这样一来,当访问该页面时,载入的图片就无见面像以前那么一帧一帧地逐渐显示出来了。
限制:不盖200KB的才张图纸

结处理图片的目的是减少请求次数,如果各一样摆放图片都朝着服务器发送请求,即影响服务器负荷也潜移默化页面性能。

  当有就简单摆放图后,我们尽管可以开始学了。

CSS Sprite原理

CSS
Sprites的法则就是是管网页遭到因故到之略图标、图片类集中结合至同样摆设图片被。
重运CSS中之背景属性

  • background-image
  • background-repeat
  • background-position

当得出示指定图片时,定位到图片相应岗位即可

  我事先通过firebug观察,发现google首页在运转的时候会循环加载以下html代码:

Google粘土动画

贯彻步骤:
1、准备材料,设计动画的诸一样幅图片并结合成为一摆设图纸
2、监听点击事件实施动画
3、根据延迟时间设置图片背景位置为展示下同样幅图片

<div id="hplogo0" style="left:307px;top:48px;width:88px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div>
<div id="hplogo1" style="left:307px;top:48px;width:89px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div>
<div id="hplogo2" style="left:307px;top:48px;width:91px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div>
<div id="hplogo3" style="left:305px;top:49px;width:93px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -268px 0px transparent;"></div>
<div id="hplogo4" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -361px 0px transparent;"></div>
<div id="hplogo5" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -454px 0px transparent;"></div>
<div id="hplogo6" style="left:306px;top:52px;width:92px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -547px 0px transparent;"></div>
<div id="hplogo7" style="left:305px;top:53px;width:93px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -639px 0px transparent;"></div>
<div id="hplogo8" style="left:305px;top:54px;width:94px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -732px 0px transparent;"></div>
<div id="hplogo9" style="left:306px;top:54px;width:93px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -826px 0px transparent;"></div>
<div id="hplogo10" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -919px 0px transparent;"></div>
<div id="hplogo11" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1011px 0px transparent;"></div>
<div id="hplogo12" style="left:308px;top:54px;width:90px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1103px 0px transparent;"></div>
...
...

素材

澳门蒲京娱乐 5

澳门蒲京娱乐 6

澳门蒲京娱乐 7

澳门蒲京娱乐 8

澳门蒲京娱乐 9

  实际上这就是是兑现动画效果的素,但自我发现,我好循环生成,但是本人无能为力循环生成每个div里的体,因为体的有余高、偏移像素都是乱套的,所以我的做法即是,把谷歌生成好之代码复制过来,然后默认全部隐蔽,然后循环为其形出。

HTML

<div>
    <div style="display:flex;align-items:flex-end;">
        <div style="width:135px;height:156px;background:url(ss-sprite/blockheads.png) 0 0;" id="blockheads"></div>
        <div style="width:65px;height:102px;background:url(ss-sprite/prickle.png) 0 0;" id="prickle"></div>
        <div style="width:67px;height:144px;background:url(ss-sprite/goo.png) 0 0;" id="goo"></div>
        <div style="width:98px;height:156px;background:url(ss-sprite/gumby.png) 0 0;" id="gumby"></div>
        <div style="width:75px;height:108px;background:url(ss-sprite/pokey.png) 0 0;" id="pokey"></div>
    </div>
</div>

  原理就是是这么,js的兑现呢进一步简单,所以自己就算不曾因此jquery,以下是js实现代码:

JS

<script>
    class Sprite {
        constructor(opt) {
            this.element = document.getElementById(opt.element);
            this.url = opt.url;
            this.delay = 1000 / (opt.speed || 20);
            this.defaultBackground = this.element.style.background;
            this.defalutUrl = this.element.style.backgroundImage;
            this.step = 0;
            this.width = this.element.clientWidth;
            this.height = this.element.clientHeight;
            let img = new Image();
            img.onload = () => {
                this.cols = parseInt(img.width / this.width);
                this.rows = parseInt(img.height / this.height);
                this.frames = this.cols * this.rows;
                this.element.onclick = () => {
                    this.play();
                };
            };

            img.src = this.url;
        }

        play() {
            if (this.playing) {
                return;
            }
            this.playing = true;
            this.next();
        }

        next() {
            this.step++;
            if (this.step > this.frames) {
                this.stop();
                return;
            }
            let x = this.step % this.cols;
            let y = parseInt(this.step / this.rows);
            if (this.step % this.rows > 0) {
                y++;
            }
            var position = "-" + (x - 1) * this.width + "px -" + (y - 1) * this.height + "px";
            this.element.style.background = "url(" + this.url + ") " + position;
            setTimeout(() => {
                this.next();
            }, this.delay);
        }

        stop() {
            this.step = 0;
            this.playing = false;
            this.element.style.background = this.defaultBackground;
        }
    }

    window.addEventListener('load', () => {
        new Sprite({
            element: 'blockheads',
            url:'ss-sprite/blockheads.png'
        });
        new Sprite({
            element: 'prickle',
            url:'ss-sprite/prickle.png'
        });
        new Sprite({
            element: 'goo',
            url:'ss-sprite/goo.png'
        });
        new Sprite({
            element: 'gumby',
            url:'ss-sprite/gumby.png'
        });
        new Sprite({
            element: 'pokey',
            url:'ss-sprite/pokey.png'
        });
    });
</script>
var i=0;
window.setInterval(google,83);
function google(){
    if(i<=154){
        var logo = document.getElementById("hplogo"+i);
        logo.style.display = 'block';
    }
    i++;
}

Google舞蹈者

实现步骤:
1、准备材料,收集舞蹈者每一个动作并到同摆放图片
2、澳门蒲京娱乐初始化每一个动作之职
3、定时动态创建div元素设置背景位置以及因素位置

  大功告成,看下demo吧。

素材

澳门蒲京娱乐 10

澳门蒲京娱乐 11

HTML

<div id="graham-logo" style="position:relative;height:150px;"></div>

  顺便把源码也沾满吧,没太多技术含量,如果出题目,希望赐教。源码下载

JS

(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(ss-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 = "ss-sprite/graham-sprite.png"
        }
})();

  附1:后来本身发觉google原来是拿坐标等信息是js数组里,然后循环添加div元素的时段,把价值一连形容进去,相关阅读《喜爱今天的Google
LOGO 玛莎·葛兰姆》

总结

欲大家可通过本文的Google动画实现了解及片CSS Sprite技术,CSS
Sprite是前者优化的相同片段,合理之应用好可以增强网页的特性,也得长网页内容。

  附2:补充知识

  Google今日写道是为着纪念现代舞先驱玛莎·葛兰姆(Martha
Graham,1894年5月11日-1991年4月1日)117周年诞辰,他是美国舞蹈家和编舞家,也是当代舞蹈史的老祖宗之一。其著述基本上坐美国人文或是希腊古典神话吗主题,代表作有《原始之心腹》(Primitive
Mysteries,1936年)、《给世界之信仰》(Letter to the
World,1940年)、《阿帕拉契山脈之春》 (Appalachian
Spring,1944年)、《夜旅》(Night Journey,1947年)。