H部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹光暈進度條</title>
<link rel="stylesheet" href="css/6-4.css">
</head>
<body>
<div class="shoot">
<div class="out">
<!-- 內框顏色部分 -->
<div class="shoot_power power"></div>
</div>
</div>
</body>
</html>
css部分：
* {
margin: 0;
padding: 0;
}
body {
background: #161616;
}
.shoot {
margin: 300px auto;
width: 100%;
}
.out {
padding: 6px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
/* inset： 定義元素的陰影類型爲內陰影。該值爲空時，則元素的陰影類型爲外陰影 */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
text-align: center;
}
.shoot_power {
height: 8px;
/* background-color: #fff000; */
border-radius: 4px;
transition: 0.6s linear;
transition-property: width, background-color;
box-shadow: 0 0 50px white, 0 0 30px skyblue, 0 0 6px blue, 0 0 100px orange, 0 0 160px green, 0 0 220px yellow, 0 0 340px cyan, 0 0 400px blue, 0 0 450px purple;
}
.power {
/* background-color: #FCBC51; */
background-color: #2187e7;
width: 100%;
animation: kobePower 9s;
}
@keyframes kobePower {
0% {
width: 0;
}
100% {
width: 100%;
}
}
沒啥創意