CSS3扇形旋轉效果詳解
分享一段程式碼例項,它實現了扇形旋轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{ background-color:#ccc; } .main{ width:100px; height:100px; position:relative; } .content{ width:90px; height:90px; text-align:center; line-height:90px; background-color:rgba(255,255,255,0.9); border-radius:50%; position:absolute; top:5px; left:5px; } .bg{ width:50px; height:100px; position:absolute; overflow: hidden; animation:run 10s infinite linear; transform-origin: right center; box-shadow:inset #000 0 0 0 1px; } .bgInsed{ width: 100px; height: 100px; border-radius: 50%; position: absolute; background-color: green; clip: rect(0,50px,100px,0px); transform: rotate(80deg); } @keyframes run{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } </style> </head> <body> <div class="main"> <div class="bg"> <div class="bgInsed"></div> </div> <div class="content">螞蟻</div> </div> </body> </html>
上面的效果帶有矩形旋轉只是為了便於演示理解,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼body{ background-color:#ccc; }
設定body的背景顏色為#ccc。
[CSS] 純文字檢視 複製程式碼.main{ width:100px; height:100px; left:150px; top:150px; position:relative; }
旋轉效果的容器元素的樣式。
將其設定為相對定位,那麼它的定位子元素就可以以其為定位參考物件。
[CSS] 純文字檢視 複製程式碼.content{ width:90px; height:90px; text-align:center; line-height:90px; background-color:rgba(255,255,255,0.9); border-radius:50%; position:absolute; top:5px; left:5px; }
這個是文字的容器。
文字在其中會垂直水平居中。
設定透明度為0.9;在html結構中,此元素在bg元素的後面,所以它會覆蓋在bg元素之上。
高度和寬度分別為90px,並且top和left值都是5px,所以外緣會有5px沒有覆蓋在bg元素,這也就讓我們看到了純綠色部分。
[CSS] 純文字檢視 複製程式碼.bg{ width:50px; height:100px; position:absolute; overflow: hidden; animation:run 10s infinite linear; transform-origin: right center; box-shadow:inset #000 0 0 0 1px; }
實際旋轉的是bg元素。
旋轉的中心點是它左邊框的中心位置。
我們所看到的黑色邊框是,由box-shadow的內陰影實現的。
[CSS] 純文字檢視 複製程式碼.bgInsed{ width: 100px; height: 100px; border-radius: 50%; position: absolute; background-color: green; clip: rect(0,50px,100px,0px); transform: rotate(80deg); }
首先將此元素進行裁切,然後再旋轉80deg就實現扇形效果。
[CSS] 純文字檢視 複製程式碼@keyframes run{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
動畫分段效果。
二.相關閱讀:
(1).rgba可以參閱CSS3 RGBA一章節。
(2).border-radius可以參閱CSS3 border-radius一章節。
(3).animation可以參閱CSS3 animation一章節。
(4).transform-origin可以參閱CSS3 transform-origin一章節。
(5).box-shadow可以參閱CSS3 box-shadow一章節。
(6).clip可以參閱CSS3 clip一章節。
(7).transform: rotate()可以參閱transform: rotate()一章節。
(8).@keyframes可以參閱CSS3 @keyframes一章節。
相關文章
- CSS3旋轉大風車效果詳解CSSS3
- CSS3 旋轉魔方效果CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3點狀旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- css3實現的立方體旋轉效果CSSS3
- CSS3花瓣狀360度不停旋轉效果CSSS3
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- CSS3立方體3D旋轉效果CSSS33D
- CSS3 螺旋旋轉黑白相間條紋效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- css3實現的旋轉載入等待效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- css3過渡效果詳解CSSS3
- CSS3對勾效果詳解CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的loadding旋轉載入效果CSSS3
- css3實現的立方體3D旋轉效果CSSS33D
- CSS3開關門效果詳解CSSS3
- CSS3動態月食效果詳解CSSS3
- CSS3打字效果詳解CSSS3