Google LOGO的CSS Sprite
爲記念美國現代舞舞蹈家瑪莎·葛蘭姆誕辰，Google Doodle推出了一款極其炫酷的LOGO，整個LOGO使用CSS Sprite技術，利用一個初始圖片和一張畫滿各個動做的拼接圖片，實現了動畫，而非傳統的GIF動畫圖像。
<!--more-->css
效果
原文查看效果前端
CSS Sprite簡介
CSS Sprites(css精靈)，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。
限制：不高於200KB的單張圖片服務器
整合處理圖片的目的是減小請求次數，若是每一張圖片都向服務器發送請求，即影響服務器負載也影響頁面性能。app
CSS Sprite原理
CSS Sprites的原理就是把網頁中用到的小圖標、圖片類集中整合到一張圖片中。
再利用CSS中的背景屬性前端優化
background-image性能
background-repeatflex
background-position優化
當須要顯示指定圖片時，定位到圖片相應位置便可動畫
Google粘土動畫
實現步驟：
一、準備素材，設計動畫的每一幀圖片並整合成一張圖片
二、監聽點擊事件執行動畫
三、根據延遲時間設置圖片背景位置以顯示下一幀圖片this
素材
HTML
<div>
<div style="display:flex;align-items:flex-end;">
<div style="width:135px;height:156px;background:url(/images/css-sprite/blockheads.png) 0 0;" id="blockheads"></div>
<div style="width:65px;height:102px;background:url(/images/css-sprite/prickle.png) 0 0;" id="prickle"></div>
<div style="width:67px;height:144px;background:url(/images/css-sprite/goo.png) 0 0;" id="goo"></div>
<div style="width:98px;height:156px;background:url(/images/css-sprite/gumby.png) 0 0;" id="gumby"></div>
<div style="width:75px;height:108px;background:url(/images/css-sprite/pokey.png) 0 0;" id="pokey"></div>
</div>
</div>
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:'/images/css-sprite/blockheads.png'
});
new Sprite({
element: 'prickle',
url:'/images/css-sprite/prickle.png'
});
new Sprite({
element: 'goo',
url:'/images/css-sprite/goo.png'
});
new Sprite({
element: 'gumby',
url:'/images/css-sprite/gumby.png'
});
new Sprite({
element: 'pokey',
url:'/images/css-sprite/pokey.png'
});
});
</script>
Google舞蹈者
實現步驟：
一、準備素材，收集舞蹈者每個動做集成到一張圖片
二、初始化每個動做的位置
三、定時動態建立div元素設置背景位置和元素位置
素材
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(/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是前端優化的一部分，合理的利用好能夠提升網頁的性能，也能夠豐富網頁內容。
相關文章
- 1. css sprite
- 2. CSS Sprite
- 3. CSS sprite
- 4. html-css和html實現Google logo
- 5. CSS Sprite（CSS貼圖）
- 6. css sprite合併
- 7. CSS sprite使用
- 8. CSS Sprite實例
- 9. Css Sprite Demo
- 10. CSS Sprite 圖標
- 更多相關文章...
- • Google Chrome 瀏覽器 - 瀏覽器信息
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css sprite
- 2. CSS Sprite
- 3. CSS sprite
- 4. html-css和html實現Google logo
- 5. CSS Sprite（CSS貼圖）
- 6. css sprite合併
- 7. CSS sprite使用
- 8. CSS Sprite實例
- 9. Css Sprite Demo
- 10. CSS Sprite 圖標