代码笔记 / 网页设计

给关于页面添加了学习进度条

Yolen · 2月28日 · 2020年 · ·

个人来说比较喜欢这样的效果,特意学习了一下关于css动画的规则和方法,然后写出这篇文章,可以引用,也可以参考

html代码:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="https://picyolen-1251613259.cos.ap-beijing.myqcloud.com/2020/02/28/aaedbafec7196.css" /> 
  <!-- css可以引用也可以下载下来,有些网站主题不需要这段css,可能会导致导航错误,本站是不需要的,所有这个引用代码我没有添加 --> 
 </head> 
 <body> 
  <div class="about"> 
   <div class="container"> 
    <div class="row"> 
     <div class="col-md-offset-3 col-md-6"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:50%;"> 
        <div class="progress-value">HTML</div> 
       </div> 
      </div> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:50%;"> 
        <div class="progress-value">CSS</div> 
       </div> 
      </div> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:50%;"> 
        <div class="progress-value">JavaScript</div> 
       </div> 
      </div> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:50%;"> 
        <div class="progress-value">PHP</div> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

CSS样式:

<style type="text/css"> .about {
	padding: 2em 0;
}

.progress {
	height: 25px;
	background: #ffffff;
	padding: 5px;
	overflow: visible;
	border-radius: 20px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	margin-top: 50px;
}

.progress .progress-bar {
	border-radius: 20px;
	position: relative;
	animation: animate-positive 2s;
}

.progress .progress-value {
	display: block;
	padding: 3px 7px;
	font-size: 13px;
	color: #fff;
	border-radius: 4px;
	background: #20a0ff;
	border: 1px solid #20a0ff;
	position: absolute;
	top: -40px;
	right: -10px;
}

.progress .progress-value:after {
	content: "";
	border-top: 10px solid #20a0ff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: -6px;
	left: 26%;
}

.col-md-offset-3 {
	margin-left: -0%;
}

.progress-bar.active {
	animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}

@-webkit-keyframes animate-positive {
	0% {
		width: 0;
	}
}

@keyframes animate-positive {
	0% {
		width: 0;
	}
} </style>

css 里面的参数和样式可以自己自定义修改一下。

上面样式中的 .col-md-offset-3{ margin-left: -0%; } 这个值根据自己的网站整体宽度来修改,我是直接 -0% 网站宽度比较大我直接干掉。

引用方法:

css 放入 html 代码中的 <body>这里是css样式 <div class="about">,这样整个页面效果就都出来了

有不懂或者需要改进的可以在下方留言,或E-Mail联系我!

0 条回应