一.实现效果
进度条.gif
简易代码效果
进度条2.gif
二.完整代码
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3炫酷进度条动画|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.progress{
height: 20px;
background: #fff;
border-radius:15px 0 0 15px;
box-shadow:none;
margin:20px 50px 40px 100px;
overflow: visible;
position: relative;
}
.progress .progress-title{
position: absolute;
left:-90px;
font-size: 18px;
font-weight: 700;
}
.progress .progress-value{
position: absolute;
right:-50px;
font-size:18px;
font-weight: 700;
color:#205580;
}
.progress .progress-bar{
background: #fff;
box-shadow: none;
border-radius:15px 0 0 15px;
position: relative;
-webkit-animation:animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-bar:before{
content:"";
position: absolute;
top:-10px;
right:-40px;
border:20px solid transparent;
}
.pink .progress-bar:before{
border-left:20px solid #ff4a98;
}
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}
</style>
</head>
<body>
<div class="container">
<div class="row text-center">
<h1>进度条实例</h1>
</div>
<div class="row">
<div class="progress pink">
<div class="progress-title">HTML5</div>
<div class="progress-value">90%</div>
<div class="progress-bar" style="width:90%;background:linear-gradient(to right,#f791bd,#ff4a98);"></div>
</div>
</div>
</div>
</body>
</html>
三.发现的问题
1.伪元素的使用
参考详细介绍的网址：https://www.cnblogs.com/ranzige/p/4554484.html
2.用伪元素实现三角形箭头
<html>
<head>
<meta charset="utf-8" />
<style>
span{
display: block;
height: 30px;
line-height: 30px;
width:100px;
text-align: center;
background: #ccc;
position: relative;
}
span::before{
content:"";
border:7px solid transparent;
position: absolute;
bottom:-14px;
left:41px;
border-top:7px solid red;
}
</style>
</head>
<body>
<span>Hello world</span>
</body>
</html>
网友评论