①投籃能力值
②運球能力值
③籃板能力值
④防守能力值
純屬練習
H部分：(結構複製黏貼即可)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KoBe進度條能力值</title>
<link rel="stylesheet" href="css/5-27.css">
</head>
<body>
<div class="shoot">
<!-- /外框部分 -->
<p class="kb">KoBe·Bryant :</p>
<p class="kb kb1">shoot :</p>
<div class="out">
<!-- 內框顏色部分 -->
<div class="shoot_power power"></div>
</div>
</div>
<div class="shoot">
<!-- /外框部分 -->
<p class="kb kb2">Dribble :</p>
<div class="out">
<!-- 內框顏色部分 -->
<div class="shoot_power power1"></div>
</div>
</div>
<div class="shoot">
<!-- /外框部分 -->
<p class="kb kb3">backboard :</p>
<div class="out">
<!-- 內框顏色部分 -->
<div class="shoot_power power2"></div>
</div>
</div>
<div class="shoot">
<!-- /外框部分 -->
<p class="kb kb4">defense :</p>
<div class="out">
<!-- 內框顏色部分 -->
<div class="shoot_power power3"></div>
</div>
</div>
</body>
</html>
css模塊：（大部分複製黏貼，挺多冗餘的）
* {
margin: 0;
padding: 0;
}
body {
background: #2c303a;
}
.shoot {
margin: 100px auto;
width: 500px;
}
.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: 18px;
background-color: #fff000;
border-radius: 4px;
transition: 0.6s linear;
transition-property: width, background-color;
}
.power {
background-color: #FCBC51;
width: 75%;
background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 40%, #fca311 40%, #fca311 75%, transparent 75%, transparent);
animation: kobePower 6s;
}
.power1 {
background-color: #f22f11;
width: 83%;
background-image: linear-gradient(45deg, pink 25%, transparent 25%, transparent 50%, pink 50%, pink 83%, transparent 83%, transparent);
animation: kobePower1 6s;
}
.power2 {
background-color: tomato;
width: 55%;
background-image: linear-gradient(45deg, #ff5100 35%, transparent 35%, transparent 50%, #ff5100 50%, #ff5100 85%, transparent 85%, transparent);
animation: kobePower2 6s;
}
.power3 {
background-color: turquoise;
width: 91%;
background-image: linear-gradient(45deg, green 25%, transparent 25%, transparent 50%, green 50%, green 85%, transparent 85%, transparent);
animation: kobePower3 6s;
}
@keyframes kobePower {
0% {
width: 0;
}
100% {
width: 75%;
}
}
@keyframes kobePower1 {
0% {
width: 0;
}
100% {
width: 83%;
}
}
@keyframes kobePower2 {
0% {
width: 0;
}
100% {
width: 55%;
}
}
@keyframes kobePower3 {
0% {
width: 0;
}
100% {
width: 91%;
}
}
/* 科比能力部分 */
.kb {
position: absolute;
top: 31px;
left: 260px;
color: blueviolet;
font-size: 30px;
font-weight: 700;
}
.kb1 {
top: 91px;
left: 377px;
color: #fca311;
}
.kb2 {
top: 221px;
left: 352px;
color: #f22f11;
}
.kb3 {
top: 351px;
left: 305px;
color: tomato;
}
.kb4 {
top: 481px;
left: 344px;
color: turquoise;
}
代碼仍有冗餘部分，爲了節省時間沒優化。