1.有趣的进度条,仅由css制作。
有趣的进度条.gif
代码：
<!DOCTYPE html>
<!--html5与css3实例教程（第二版）第二章-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meter的使用</title>
<style>
/*meter的样式*/
meter {
cursor: pointer;
/*-webkit-appearance: none;*/
position: relative;
display: block;
margin: 8px auto;
width: 100px;
height: 17px;
border-radius: 0px;
padding: 4px 5px 4px 5px;
box-sizing: border-box;
/*background: rgba(255,2,188,0.5);*/
-webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,1);
-webkit-transform-origin: center 8px;
}
meter::-webkit-meter-bar {
background-color: hsl(200,10%,14%);
background-size: 2px 5px;
background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
-webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
background-size: inherit;
background-image: inherit;
-webkit-box-shadow: 0 0 10px 0px rgb(87,169,253);
-webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
}
meter::-webkit-meter-optimum-value { background-color:rgb(87,169,253); }
meter::-webkit-meter-suboptimum-value { background-color:rgb(87,169,253); }
meter::-webkit-meter-even-less-good-value { background-color:rgb(87,169,253); }
meter:hover::-webkit-meter-optimum-value,
meter:hover::-webkit-meter-suboptimum-value,
meter:hover::-webkit-meter-even-less-good-value {
width: 100% !important;
}
</style>
</head>
<body>
<div class="meter">
<meter class="meter-goal" min="0" max="100" value="30"></meter>
</div>
</body>
</html>
