【构想】
CSS3 + JS
CSS3控制进度
利用CSS3中的 @keyframes
JS实现百分比
根据CSS来调整，时间
【页面代码】
CSS代码
body { background-color: #f5f7f9; color: #6c6c6c; font: 300 1em/1.5em; } .container { left: 50%; position: absolute; top: 40%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } /* PROGRESS */ .progress { background-color: #e5e9eb; height: 0.25em; position: relative; width: 24em; } #progress-bar { animation-duration: 3s; animation-name: width; background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); background-size: 24em 0.25em; height: 100%; position: relative; } @keyframes width { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } .container .notice { animation: change 5s linear 0s infinite; font-size: 15px; margin: 10px; } @keyframes change { 0% { color: #4cd964; } 25% { color: #5ac8fa; } 50% { color: #007aff; } 75% { color: #5856d6; } 100% { color: #ff2d55; } }
HTML代码
<div class="container"> <div class="notice"id="notice"> 奴家,正在~客官不要急啦~(づ￣ 3￣)づ </div> <div class="progress"> <div id="progress-bar"> </div> </div> </div>
JS代码
window.onload = function() { var progressBar = { //初始化 init: function() { var oBar = document.getElementById('progress-bar'); var oNotice = document.getElementById('notice'); var count = 0; //百分比计算,根据css的来 var timer = setInterval(function() { count++; oBar.innerHTML = count + '%'; if (count === 100) { oNotice.innerHTML = clearInterval(timer); } }, 30); } }; progressBar.init(); }