纯CSS柱状图，无动画

来源：互联网发布：点名软件编辑：程序博客网时间：2024/05/17 09:29

<html><head>  <meta charset="UTF-8">  <title</title>    <link rel="stylesheet" href="style.css" media="screen" type="text/css"></head><body><section class="data">  <div class="bar-wrap">    <label>Data 1</label>    <div class="bar green" data-percentage="21" style="width: 21%;"></div>  </div>  <div class="bar-wrap">    <label>Data 2</label>    <div class="bar red" data-percentage="78.95" style="width: 78.95%;"></div>  </div>  <div class="bar-wrap">    <label>Data 3</label>    <div class="bar blue" data-percentage="94.7" style="width: 94.7%;"></div>  </div>  </section></body></html>

style.css代码：

*, *:before, *:after {  box-sizing: border-box;}body {  font-family: 'Source Sans Pro', sans-serif;  font-weight: 300;  font-size: 14px;  padding: 30px;  background: #eaeaea;}section.data {  position: relative;  overflow: hidden;}div.bar-wrap {  width: 100%;  display: block;  margin: 0 0 20px 0;  overflow: hidden;}div.bar-wrap label {  font-size: 0.8em;  color: #8a8a8a;  text-transform: uppercase;  margin: 0 0 2px 0;  display: block;}div.bar-wrap div.bar {  height: 40px;  width: 0;  position: relative;}div.bar-wrap div.bar:after {  content: attr(data-percentage) "%";  display: block;  position: absolute;  top: 0;  right: 0;  height: 40px;  padding: 10px;}div.bar-wrap div.bar.blue {  background-color: #61a7c4;  border-bottom: 3px solid #4290b0;}div.bar-wrap div.bar.blue:after {  color: #FFF;}div.bar-wrap div.bar.green {  background-color: #61c471;  border-bottom: 3px solid #42b054;}div.bar-wrap div.bar.green:after {  color: #FFF;}div.bar-wrap div.bar.red {  background-color: #c46161;  border-bottom: 3px solid #b04242;}div.bar-wrap div.bar.red:after {  color: #FFF;}div.bar-wrap div.bar.purple {  background-color: #a461c4;  border-bottom: 3px solid #8d42b0;}div.bar-wrap div.bar.purple:after {  color: #FFF;}

0 0