CSS3實現的環形旋轉載入補全效果程式碼例項
本章節分享一段程式碼例項,它實現了環形旋轉載入效果。
這種效果在很多實際應用中都有使用,特別是需要一點時間等待功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .spinner{ width:70px; height:70px; position:relative; left:100px; top:100px; color:white; } .spinner .top, .spinner .bottom{ width:70px; height:35px; position:relative; -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0) scale(1.0, 1.0); overflow:hidden; } .spinner::before, .spinner .top::before, .spinner .bottom::before{ content: ''; width: 70px; height: 70px; display: inline-block; border-style: solid; border-top-color: #FFF; border-right-color: #FFF; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; border-width: 5px; box-sizing: border-box; } /* 使用spinner::before來覆蓋空隙*/ .spinner::before { position: absolute; border-right-color: transparent; border-top-color: transparent; transform: rotateZ(47deg); -webkit-animation: fix-gap 2s ease-in infinite; } .spinner .top::before { transform: rotateZ(-225deg); -webkit-animation: rotate-top 2s ease-in infinite; /*-webkit-animation-delay: 0.3s;*/ } .spinner .bottom::before { border-bottom-color: #fff; border-top-color: transparent; position: relative; bottom: 35px; transform: rotateZ(-135deg); -webkit-animation: rotate-bottom 2s ease-out infinite; /*-webkit-animation-delay: 0.3s;*/ } @-webkit-keyframes fix-gap { 49% { border-top-color: transparent; } 50% { border-top-color: white; } 100% { border-top-color: white; } } @-webkit-keyframes rotate-top { 50% { transform: rotateZ(-45deg); } 100% { transform: rotateZ(-45deg); } } @-webkit-keyframes rotate-bottom { 50% { transform: rotateZ(-135deg); } 100% { transform: rotateZ(45deg); } } body { background: rgb(235, 205, 86); } </style> </head> <body> <div class="spinner"> <div class="top"></div> <div class="bottom"></div> </div> </body> </html>
相關文章
- css3實現的旋轉魔方效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- css3實現的旋轉載入等待效果CSSS3
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- CSS3實現的3D旋轉程式碼例項CSSS33D
- 旋轉等待內容載入完畢實現程式碼例項
- css3實現環狀旋轉效果CSSS3
- canvas實現的旋轉的太極圖效果程式碼例項Canvas
- CSS3心形效果程式碼例項CSSS3
- jQuery環形旋轉載入進度條效果jQuery
- css3實現的loadding旋轉載入效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- 滑鼠懸浮實現環形旋轉效果
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現的折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- CSS3旋轉載入等待效果CSSS3
- 3D旋轉效果程式碼例項3D
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css3實現的三角形對插效果程式碼例項CSSS3
- CSS3實現的平行四邊形程式碼例項CSSS3
- canvas實現的動態心形效果程式碼例項Canvas
- canvas實現的圓形鐘錶效果程式碼例項Canvas
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- css3實現平行四邊形程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3