CSS3實現載入效果

預期實現的效果如下如所示

首先基本的html布局如下

首先設定一下基本的樣式

#wrap 

#wrap div 

然後我們來新增動畫效果

在#wrap div加入如下**

-webkit-animation: fadeout 1s infinite ease-in-out;

@-webkit-keyframes fadeout 

20% 
}

那麼現在就是使用animation-delay來設定動畫的觸發時間，實現原先的效果

#wrap .line1 

#wrap .line2 
#wrap .line3 
#wrap .line4 
#wrap .line5 

css3效果 載入動畫

這些效果可以直接用，沒必要自己寫，多去網上發現一下好用的 效果好的即可其中有 gg bd ad 720x90.js 和 follow.js 那麼他們分別是什麼意思呢 follow.js中有這麼一句 document.writeln istitle 0 noborder 1 isweibo 0 isf...

css3實現網格效果

利用background image裡的liner gradient屬性可以實現一些簡單的css網格背景，能自適應背景，挺實用的，下面就簡單的介紹兩款網格背景 1.桌布花紋 紅.png 塊height 300px width 300px background white background ima...

css3實現動畫效果

transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...