么樣制作這么一個簡單的（CSS3動畫）靜態網頁動態圖呢？

當然如果不限制使用的語言，那實現的方法有很多啦，簡單的javaScript語言就可以很容易實現，當然使用框架的話就會更加簡單啦。現在讓我們用一些更簡單單純的CSS語言來實現。

實現這樣的（CSS3動畫）靜態網頁動態圖，需要用到哪些東西呢？

1、素材：云層

image：云層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部分：

CSS3動畫是什么？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。可以改變任意多的樣式任意多的次數。用百分比來規定變化發生的時間，或用關鍵詞 "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樣式瀏覽器兼容性問題歸納

CSS3動畫animation標簽

該標簽由三部分組成：

1、關鍵幀(keyframes) - 定義動畫在不同階段的狀態。

2、動畫屬性(properties) - 決定動畫的播放時長，播放次數，以及用何種函 數式去播放動畫等。（可以類比音視頻播放器）

3、css屬性 - 就是css元素不同關鍵幀下的狀態。

 -webkit-animation: sky_background 50s ease-out infinite;/*動畫過程 時間 以慢速結束 無限循環*/
 -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等瀏覽器內核，將其定義為3d轉換*/

div盒子模型及布局方式：

div盒子的五大主要屬性：height、width、padding、margin、border。

div盒子常用布局屬性：position: ; 、overflow: ; 等

大div容器.sky的樣式如下：

.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);
}

云層1div塊的設置如下：

注意：

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);
}

云層2div塊的設置如下：

注意：

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);
}

云層3div塊的設置如下：

注意：

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);
}

設置動畫的關鍵幀@KeyFrames：

開始-中間-結束按鈕 轉化為 0%--50%--100%，我們又可叫做進度條。在不同階段設置不同的背景色，是整個過程 呈現漸變動畫狀態。

注意：@ ：千萬不能丟掉

大的div（.sky）關鍵幀設置：

@-webkit-keyframes sky_background { //可以把其他幾個兼容內核按照這個模板羅列
 0% { //-o- 、-ms-、-moz- 和自身兼容
	background: #007fd5; // 起點
	color: #007fd5 ; //起點
 }
 50% {
	background: #000; //轉折點
	color: #a3d9ff ; //轉折點
 }
 100% {
	background: #007fd5; //起點
	color: #007fd5; //起點
 }
}

云層div塊的關鍵幀設置：

云層設置只用設置開始和結束的位置即可

@-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是聯合使用的。

點擊擴展鏈接可查看源碼。

本文部分內容參考網絡，如有錯誤，感謝指出，如有侵權，請聯系修改。

ord插入gif動圖不動？簡單3步讓它們乖乖動起來！~效果圖先展示一波！~↓↓↓

想知道圖中的狗狗為什么一臉蒙蔽？想要【免費領取268份簡歷模板】？一起看到【文章最后】吧！~↓↓↓

1、Word插入圖片

將圖片導入Word文檔中，發現不動？？不急~我們進行后面簡單的操作~

2、設置圖片格式

修改圖片格式不難，這里和大家分享更快速的方法~

批量設置圖片相同大小：

（1）圖片之間按回車進行分行；

（2）雙擊第一張圖片，右上方【大小】修改【寬度】（一般默認鎖定縱橫比，所以高度可以不修改~）；

（3）剩余圖片分別單擊選中，按F4鍵，就可以快速批量應用相同大小啦！~

設置圖片位置：同樣利用快捷鍵~【Ctrl+E】快速居中！~然后再用F4鍵~

3、Word另存格式

怎樣快速另存為？圖片要保存為什么格式，才會在Word里動起來？

最終答案揭曉！~選中全部圖片，按F12鍵一秒喚出【另存為】對話框！~

【保存類型】選擇【網頁*.htm、*.html】。

打開另存的網頁格式文件~華麗麗的動圖效果如下~↓↓↓

表白美膩的淋淋！?~么么噠！~

哈哈哈原來那只狗狗一臉蒙蔽是因為：主人把雪塊丟到雪地里，它找不到哈哈哈哈哈哈哈嗝！~

贈268份簡歷模板（評論郵箱）

小哥辛苦搜集的簡歷模板，炒雞實用！~這還只是冰山一角！~大家積極點~【評論區留下郵箱】免費拿走268份完整版！~不要辜負小哥的一番心意喲~(＾Ｕ＾)ノ~↓↓↓

識別圖片中的文字，可以使用【捷速OCR文字識別軟件】~