超簡單CSS3水平動態進度條+小圓球+背景色漸變
阿新 • • 發佈：2017-09-01
背景色漸變 query 技術分享 scale wid alt class ani position 實現的的效果圖如下：效果是動態加載的
@keyframes loader { 0% {width: 0%;} 100% { width: 80%;} } </style> </head> <body> <div class="box"> <div class="line" style="width:80%"> <div class="line_in green"></div> <div class="circle green"></div> </div> </div> <script src="./js/jquery/jquery.min.js"></script> </body> </html>
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> //為了將效果圖移到屏幕中間的盒子 .box{ width: 200px; margin: 50px auto; } //包含進度條和圓圈的盒子 .line { border-radius: 10px; height: 10px; margin-top: 6px; animation: loader 3s linear; position: relative; } //有背景色的進度條 .line_in { border-radius: 10px; height: 5px; margin-top: 6px; } //進度條前面的圓圈 .circle { position: absolute; top: -2px; right: 0px; width: 10px; height: 10px; border-radius: 50%; } //背景色實現漸變 .green { background-image: linear-gradient( -45deg, rgba(99, 193, 111, 1) 0%, rgba(20, 157, 37, 1) 25%, rgba(99, 193, 111, 1) 50%, rgba(20, 157, 37, 1) 75%, rgba(99, 193, 111, 1) 100% ); } //進度條能動態加載的動畫@keyframes loader { 0% {width: 0%;} 100% { width: 80%;} } </style> </head> <body> <div class="box"> <div class="line" style="width:80%"> <div class="line_in green"></div> <div class="circle green"></div> </div> </div> <script src="./js/jquery/jquery.min.js"></script> </body> </html>
超簡單CSS3水平動態進度條+小圓球+背景色漸變