使用box-shadow畫赤橙黃綠藍靛紫7個弧形，拼接在一起
after偽元素寫投影樣式
彩虹和投影都有動畫
dom結構
用兩個巢狀的div容器，父容器來控制圖示顯示的位置，子容器用來寫彩虹的樣式。
css樣式
1、定義父容器樣式，控制圖示位置，順便給整個頁面加個背景色，方便預覽
複製**
body
.container
複製**
2、彩虹樣式，彩虹有乙個左右搖擺的動畫效果
複製**
.rainbow
@keyframes rainbow
}複製**
3、投影樣式，別忘了是同樣有動畫的喲
複製**
.rainbow::after
@keyframes rainbow_shadow
}複製**
搞定，很簡單有沒有，跟著實現一遍，你也可以畫出美麗的彩虹咯~
東莞**建設www.zg886.cn
CSS製作各種樣式的彩虹效果
今天看到一篇文章，說到margin的塌陷的問題，並提供了好幾個例子。自己之前還沒怎麼遇到過這個問題，正好來研究一下。css code複製內容到剪貼簿 css樣式一，使用margin塌陷 css code複製內容到剪貼簿 效果 css樣式二，也是使用的margin塌陷，不過做出來的是弧形的彩虹 css...
純css寫出來的小彩虹
今天在codepen上看見乙個用純css寫出來的動畫，所以就自己敲了一下 源 鏈結 這段 表示居中 left 50 top 50 transform translate 50 50 vmin說明 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin 示例 h1 如果視口的寬...
css3畫花瓣 border radius的妙用
css3中新增的 border radius 屬性在前端開發工作中，一般是還有從來做乙個簡單的圓角效果，看起來讓塊狀元素更加圓潤柔和一點，百分之九十的同學可能用到的就是這個層級，但是 border radius 的功能遠不止於此。首先要明白的是 border radius 的使用方法 classna...