css3迴圈漸隱漸現效果程式碼例項
本章節分享一段程式碼例項,它利用css3實現了迴圈漸隱漸現效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { background-color: #efefef; } .main { width: 300px; height: 300px; border-radius: 10px; overflow: hidden; } .child { width: 100px; height: 100px; float: left; background-color: rgba(255,0,0,0.5); text-align: center; opacity: 0; line-height: 100px; animation-name: flash; animation-duration: 9s; animation-iteration-count: infinite; } .child:nth-child(1) { animation-delay: 0s; } .child:nth-child(2) { animation-delay: 0.5s; } .child:nth-child(3) { animation-delay: 1s; } .child:nth-child(4) { animation-delay: 3.5s; } .child:nth-child(5) { animation: none; background-color: #fff; opacity: 1; } .child:nth-child(6) { animation-delay: 1.5s; } .child:nth-child(7) { animation-delay: 3s; } .child:nth-child(8) { animation-delay: 2.5s; } .child:nth-child(9) { animation-delay: 2s; } @keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div class="main"> <div class="child child1"> 1 </div> <div class="child child2"> 2 </div> <div class="child child3"> 3 </div> <div class="child child4"> 4 </div> <div class="child child5"> 5 </div> <div class="child child6"> 6 </div> <div class="child child7"> 7 </div> <div class="child child8"> 8 </div> <div class="child child9"> 9 </div> </div> </body> </html>
相關文章
- jquery漸隱漸現程式碼例項jQuery
- CSS3圓形漸隱漸現迴圈出現CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- 設定div元素漸隱效果程式碼例項
- 點選實現元素的漸隱或者漸現程式碼例項
- javascript元素內容漸現效果程式碼例項JavaScript
- css3網頁底部漸隱漸現的箭頭效果CSSS3網頁
- css3實現的文字顏色漸變和漸隱效果CSSS3
- css3實現的徑向漸變和線性漸變程式碼例項CSSS3
- canvas實現文字線性漸變效果程式碼例項Canvas
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- css3實現的漸變線交錯程式碼例項CSSS3
- javascript元素透明度漸變效果程式碼例項JavaScript
- css3線性漸變簡單程式碼例項CSSS3
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- css徑向漸變程式碼例項CSS
- canvas徑向漸變程式碼例項Canvas
- canvas線性漸變程式碼例項Canvas
- Dreamweaver網頁元素怎麼製作漸隱漸現效果教程網頁
- canvas繪製小球漸隱漸現Canvas
- css3實現的具有漸變效果的選項卡功能CSSS3
- js div層漸變方式開啟和關閉效果程式碼例項JS
- 短視訊直播原始碼,實現頂部導航欄背景圖片漸隱漸現效果原始碼
- canvas簡單徑向漸變程式碼例項Canvas
- css3實現的折角效果程式碼例項CSSS3
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- js實現的加分後出現漸隱提示效果JS
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3