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