先貼**：
css部分：
@-webkit-keyframes fadein {
0% {
opacity: 0.2;width:100%; /*初始狀態 透明度為0.2大小為100%*/
10%{
opacity: 0.3;width:105%; /*補間動畫10% 透明度0.3 大小105%*/
20%{
opacity: 0.4;width:110%;
30% {
opacity: 0.5;width:115%;
40%{
opacity: 0.6;width:125%;
50%{
opacity: 0.7;width:130%;
60%{
opacity: 0.8;width:135%;
70%{
opacity: 0.7;width:140%;
80%{
opacity: 0.6;width:145%;
90%{
opacity: 0.4;width:150%;
100% {
opacity: 0.3;width:155%; /*結尾狀態 透明度為0.3,大小放大為155%*/
.sae{
-webkit-animation-name: fadein; /*動畫名稱*/
-webkit-animation-duration: 2s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數*/
-webkit-animation-delay: 0s; /*延遲時間*/
.sae1{
-webkit-animation-name: fadein; /*動畫名稱*/
-webkit-animation-duration: 2s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數*/
-webkit-animation-delay: 3s; /*延遲時間*/
.sae2{
-webkit-animation-name: fadein; /*動畫名稱*/
-webkit-animation-duration: 2s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數*/
-webkit-animation-delay: 5s; /*延遲時間*/
.sae3{
-webkit-animation-name: fadein; /*動畫名稱*/
-webkit-animation-duration: 2s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數*/
-webkit-animation-delay: 2s; /*延遲時間*/
html部分：
效果：
用pc截圖 看起來雲被放的太大 不明顯 手機端更清晰
解釋下：
首先是css部分
@-webkit-keyframes fadein 這部分為css動畫
通過百分比控制 補間動畫
我這做的是乙個雲從後面飄上來的乙個效果。
所以我的補間動畫
雲從 透明 小 --》明顯 大 --》透明 更大
如果覺得畫面漂浮動畫卡頓，可以建立更多補間時間，以及調整動畫時長來讓它更流暢。
.sae{
-webkit-animation-name: fadein; /*動畫名稱*/
-webkit-animation-duration: 2s; /*動畫持續時間*/
-webkit-animation-iteration-count: infinite; /*動畫次數:無限迴圈*/
-webkit-animation-delay: 0s; /*延遲時間*/
引用動畫，並設定動畫引數。
因為有多朵雲，所以要設定不同的引數，這樣雲才能有快有慢，
延遲讓雲朵出現錯開
html 部分即使 設定雲的位置已經 雲
因為我們要有雲不停飄動的效果，所以新增了多張雲圖，同時位置錯開。
下面附上一張雲朵的png圖
雲在上面喲。右擊儲存
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...