另外一種也可以用CSS簡單的實現的形狀是圓形。使用border-radius,你可以畫出各種漂亮的圓形圖案。
CSS代碼
只需要將你的網頁元素的每個邊的border-radius甚至成50%,你就能得到任意大小的圓:
代碼如下:
.circle { border-radius: 50%; width: 200px; height: 200px; /* 寬度和高度需要相等 */ }
這確實是非常的簡單,但我們無法抵擋在之上使用CSS漸變色和基本旋轉動畫的誘惑::
代碼如下:
/* 動畫定義 */
@ key frames spin { from { trans form: rotate(0deg); } to { transform: rotate(360deg); } }</p> <p>/* 旋轉,漸變色 */ #advanced { width: 200px; height: 200px;</p> <p> background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);</p> <p> animation-name: spin; animation-duration: 3s; /* 3 seconds */ animation-iteration-count: infinite; animation-timing-function: linear; }
哇塞,這就是這個漂亮的CSS圓形了!
用CSS畫圓的技術初看起來不像CSS畫三角技術那么有用,但在頁面設計中仍然不乏它的價值。你可以在頁面加載時使用動畫圓表現loading…,怎么用,這要看你的創意了。你有好的創意嗎?
【相關推薦】
1. CSS3免費視頻教程
2. CSS3完成一個方框圓角效果的代碼教程
3. 教你怎么去規范的書寫CSS樣式
4. 關于H5和CSS3表單驗證的使用教程
5. 通過CSS3偽元素完成逐漸發光的邊框的代碼詳解
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com