Chrome瀏覽器DevTools(F12)的NetWork頁簽下,訪問某個網站的時候會把所有的請求顯示出來,點擊某個請求就會出來上圖所示的一個面板,本文主要是Timing相關的一些內容。下面是圖片顯示內容的一些解釋及程序開發時可能的優化時間辦法。
Queued at 990.27ms:表示該請求加入到請求隊列中的時刻。
Started at 1.00s:表示請求開始處理的時刻。
Queueing:表示請求從加入到請求隊列中排隊花費的時間。原因可能由于該請求被渲染引擎認為是優先級比較低的資源、服務器不可用、 超過瀏覽器的并發請求的最大連接數(Chrome的最大并發連接數為6),
優化辦法: 1、減少HTTP請求,使用CSS雪碧圖、內聯圖片(不宜使用過大的圖片)、合并js文件和css文件表等。 2、異步請求,減少阻塞。
Stalled:請求在可以被發送出去之前的等待時間(阻塞時間),一般是等待可復用的TCP連接釋放的時間。瀏覽器對于單個域名只能同時建立4~6個TCP連接(不同瀏覽器實現有差異)。
優化辦法:可以將一些資源分放到多臺主機上,增大并發數。
Proxy Negotiation:瀏覽器和代理服務器連接的協商時間。
DNS Lookup:域名解析花費的時間。
優化辦法:可以緩存DNS。
Initial Connection:建立TCP連接花費的的時間,包括TCP握手/重試和協商SSL(包含SSL時間)。
優化辦法:使用長連接,復用已有連接。
SSL:花費在完成SSL上的時間。
Request sent:發送請求花費的時間。時間通常很短,大多數情況不會超過1毫秒(取決于網絡帶寬等因素),基本不需要優化。
Waiting (TTFB):從發出請求到接收到響應第一個字節經過的時間,包括網絡延遲時間。
優化辦法:1、可以使用CDN,將用戶的訪問指向距離最近的工作正常的緩存服務器上,如果這個時間花費比較長,就應該考慮對網絡進行性能優化了。2、如果是ajax請求,重點可能就是代碼層面的優化了。
Content Download:從接收響應到響應接收完成花費的時間。
優化辦法:1、可以考慮針對部分內容進行壓縮,如js文件壓縮(jquery.js換成jquery.min.js)、gzip等,減少響應數據大小。2、對于變化不頻繁的資源可以采用If-Modified-Since和Last-Modified等,讓服務器會返回304,不返回響應數據。
當然如果不限制使用的語言,那實現的方法有很多啦,簡單的javaScript語言就可以很容易實現,當然使用框架的話就會更加簡單啦。現在讓我們用一些更簡單單純的CSS語言來實現。
1、素材:云層
image:云層1.png 云層2.png 云層3.png 也就是需要幾張不同的云層圖片。
云層1.png
云層2.png
云層3.png
這看似什么也沒有的云層,能作出這樣美麗的變化圖,也是一種美的藝術。
細看之下的云層
2、文檔編輯軟件:Sublime Text3
Sublime Text3 是一款非常強大的,且非常好用前端常用開發工具之一。大家可以嘗試一下。
界面
快捷方式
3、HTML部分: 放置云層圖片
主要實現三張圖片的布局,所以用三個div標簽即可。
<div class="sky"> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div>
4、CSS部分:
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變任意多的樣式任意多的次數。用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同于 0% 和 100%。0% 是動畫的開始,100% 是動畫的完成。而且為了得到最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
通過在設定的開始時間和結束時間之間的特定時間段,設置背景的隨時間的樣式變換來實現。
第一部分:CSS常見兼容性問題解決
html,body{ margin:0; padding:0; height:100%; }
第二部分:CSS中動畫標簽animation 屬性兼容性問題解決:
-webkit-animation:; //代表Safari、Chrome等瀏覽器的私有屬性 -moz-animation: ; //代表火狐firefox瀏覽器私有屬性 -o-animation: ; //代表歐朋Opera瀏覽器私有屬性 -ms-animation:; //代表IE瀏覽器的私有屬性 animation: ;//自身兼容IE10、Firefox 以及 Opera 等瀏覽器。
還有其他CSS兼容性問題可參考:CSS樣式瀏覽器兼容性問題歸納
該標簽由三部分組成:
1、關鍵幀(keyframes) - 定義動畫在不同階段的狀態。
2、動畫屬性(properties) - 決定動畫的播放時長,播放次數,以及用何種函 數式去播放動畫等。(可以類比音視頻播放器)
3、css屬性 - 就是css元素不同關鍵幀下的狀態。
Animation
@Keyframes屬性
animation-timing-function
-webkit-animation: sky_background 50s ease-out infinite;/*動畫過程 時間 以慢速結束 無限循環*/ -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等瀏覽器內核,將其定義為3d轉換*/
div盒子的五大主要屬性:height、width、padding、margin、border。
div盒子常用布局屬性:position: ; 、overflow: ; 等
.sky { height: 100%; background: #007fd5; position: relative; /*相對定位*/ overflow: hidden; /*超出隱藏*/ -webkit-animation: sky_background 50s ease-out infinite;/ *動畫播放過程:50s(播放時長)以慢速結束(ease-out) 無限循環(infinite)*/ -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); //-webkit- Safari、Chrome等 -ms-transform: translate3d(0, 0, 0); //-ms- 代表IE瀏覽器的私有屬性 -o-transform: translate3d(0, 0, 0);//-o- 代表歐朋Opera瀏覽器私有屬性 transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是為了在播放之時保證能夠充分的銜接。
2、position:absolute; 絕對定位。
.sky .clouds_one { background: url("../images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%;// -webkit-animation: cloud_one 50s linear infinite; //linear:勻速 -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是為了在播放之時保證能夠充分的銜接。
2、position:absolute; 絕對定位。
.sky .clouds_two { background: url("../images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
注意:
1、width:300% ; 是為了在播放之時保證能夠充分的銜接。
2、position:absolute; 絕對定位。
.sky .clouds_three { background: url("../images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
開始-中間-結束按鈕 轉化為 0%--50%--100%,我們又可叫做進度條。在不同階段設置不同的背景色,是整個過程 呈現漸變動畫狀態。
注意:@ :千萬不能丟掉
@-webkit-keyframes sky_background { //可以把其他幾個兼容內核按照這個模板羅列 0% { //-o- 、-ms-、-moz- 和自身兼容 background: #007fd5; // 起點 color: #007fd5 ; //起點 } 50% { background: #000; //轉折點 color: #a3d9ff ; //轉折點 } 100% { background: #007fd5; //起點 color: #007fd5; //起點 } }
云層設置只用設置開始和結束的位置即可
@-webkit-keyframes cloud_one { //同上 0% { left: 0 } 100% { left: -200% //保證完美銜接 } } @-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } }
經過這些簡單的設置,一個云彩變換的動畫就可以展示出來了。 總結一下用到的動畫關鍵屬性:
animation:
animation: name duration timing-function delay iteration-count direction;
transform:
transform: none|transform-functions;
keyframes:
@keyframes animationname {keyframes-selector {css-styles;}/*0%{} 50%{} 100%{}*/}
position:
position:absolute /relative;
注意: 一般動畫animation 和 @KeyFrames是聯合使用的。
點擊擴展鏈接可查看源碼。
本文部分內容參考網絡,如有錯誤,感謝指出,如有侵權,請聯系修改。
1、transition-property 設置過渡的屬性,比如:width height background-color
2、transition-duration 設置過渡的時間,比如:1s 500ms
3、transition-timing-function 設置過渡的運動方式,常用有 linear(勻速)|ease(緩沖運動)
4、transition-delay 設置動畫的延遲
5、transition: property duration timing-function delay 同時設置四個屬性
綜合練習:
制作鼠標移入圖片時,圖片說明滑入的效果
1、translate(x,y) 設置盒子位移
2、scale(x,y) 設置盒子縮放
3、rotate(deg) 設置盒子旋轉
4、skew(x-angle,y-angle) 設置盒子斜切
5、perspective 設置透視距離
6、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設置三維移動
8、rotateX、rotateY、rotateZ 設置三維旋轉
9、scaleX、scaleY、scaleZ 設置三維縮放
10、tranform-origin 設置變形的中心點
11、backface-visibility 設置盒子背面是否可見
舉例:(翻面效果)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻面</title> <style type="text/css"> .box{ width:300px; height:272px; margin:50px auto 0; transform-style:preserve-3d; position:relative; } .box .pic{ width:300px; height:272px; position:absolute; background-color:cyan; left:0; top:0; transform:perspective(800px) rotateY(0deg); backface-visibility:hidden; transition:all 500ms ease; } .box .back_info{ width:300px; height:272px; text-align:center; line-height:272px; background-color:gold; position:absolute; left:0; top:0; transform:rotateY(180deg); backface-visibility:hidden; transition:all 500ms ease; } .box:hover .pic{ transform:perspective(800px) rotateY(180deg); } .box:hover .back_info{ transform:perspective(800px) rotateY(0deg); } </style> </head> <body> <div class="box"> <div class="pic"><img src="images/location_bg.jpg"></div> <div class="back_info">背面文字說明</div> </div> </body> </html>
1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線 linear(勻速)|ease(緩沖)|steps(步數)
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction 動畫結束后是否反向還原 normal|alternate
8、animation-play-state 動畫狀態 paused(停止)|running(運動)
9、animation-fill-mode 動畫前后的狀態 none(缺省)|forwards(結束時停留在最后一幀)|backwards(開始時停留在定義的開始幀)|both(前后都應用)
10、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
理解練習:
1、風車動畫
2、loading動畫
3、人物走路動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>走路動畫</title> <style type="text/css"> .box{ width:120px; height:180px; border:1px solid #ccc; margin:50px auto 0; position:relative; overflow:hidden; } .box img{ display:block; width:960px; height:182px; position: absolute; left:0; top:0; animation:walking 1.0s steps(8) infinite; } @keyframes walking{ from{ left:0px; } to{ left:-960px; } } </style> </head> <body> <div class="box"><img src="images/walking.png"></div> </body> </html>
動畫中使用的圖片如下:
CSS3圓角
設置某一個角的圓角,比如設置左上角的圓角:
border-top-left-radius:30px 60px;
同時分別設置四個角: border-radius:30px 60px 120px 150px;
設置四個圓角相同:
border-radius:50%;
rgba(新的顏色值表示法)
1、盒子透明度表示法:
.box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); }
2、rgba(0,0,0,0.1) 前三個數值表示顏色,第四個數值表示顏色的透明度
*請認真填寫需求信息,我們會在24小時內與您取得聯系。