使用box-shadow畫赤橙黃綠藍靛紫7個弧形,拼接在一起
after偽元素寫投影樣式
彩虹和投影都有動畫
dom結構
用兩個巢狀的div容器,父容器來控制圖示顯示的位置,子容器用來寫彩虹的樣式。
css樣式
1、定義父容器樣式,控制圖示位置,順便給整個頁面加個背景色,方便預覽
複製**
body
.container
複製**
2、彩虹樣式,彩虹有乙個左右搖擺的動畫效果
複製**
.rainbow
@keyframes rainbow
}複製**
3、投影樣式,別忘了是同樣有動畫的喲
複製**
.rainbow::after
@keyframes rainbow_shadow
}東莞**建設www.zg886.cn
CSS3簡單動畫
css3的動畫確實非常絢麗!瀏覽器相容性很重要!分享兩個小動畫 doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta n...
簡單CSS資料載入動畫
眾所周知,我們在開發前台頁面的時候總是會涉及到資料載入的過程,期間資料量比較大的時候可能會出現載入的空檔期,通過使用者體驗上來看,這段時間使用者並不知道是卡了還是在載入過程中,所有才有了載入動畫,我做了個比較簡單的載入css,接下來看一下 css.loader keyframes load 100 ...
CSS簡單動畫的製作
簡單動畫通常稱之為 過渡transition transition是css屬性,通常表示為在一定時間內,從乙個值變化為另乙個值。transition property 需要過渡的屬性 transition duration 需要過渡的時間 transition timing function 過渡的...