-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-07-25
来源 ：
阅读 2689
评论 0
摘要：本篇教程探讨了CSS3动画实现各种进度条，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了CSS3动画实现各种进度条，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
1.旋转进度条
<div class="loader">
<div class="loader-1">
<i></i>
</div>
</div>
.loader-1 {
width: 35px;
height: 35px;
}
/*设置loader-1的宽和高，设置border-radius，使其显示为圆形*/.loader-1 i {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(transparent 0%, white, black);
display: block;
animation: load-1 0.6s linear 0s infinite;
}
/*动画效果，一开始旋转0度，50%旋转180度，100%旋转360度*/
@-webkit-keyframes load-1 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
2.等待式进度条
主要是每一个竖条先变短再边长的过程
/*loader-2动画*/
.loader-2 i {
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 0 2px;
background-color: #333;
}
@-webkit-keyframes load-2 {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.4);
}
100% {
transform: scaleY(1);
}
}
/*设置每一个i的动画效果，执行延时时间不同，就能有波浪的效果*/.loader-2 i:nth-child(1) {
animation: load-2 1s ease-in 0.1s infinite;
}
.loader-2 i:nth-child(2) {
animation: load-2 1s ease-in 0.2s infinite;
}
.loader-2 i:nth-child(3) {
animation: load-2 1s ease-in 0.3s infinite;
}
.loader-2 i:nth-child(4) {
animation: load-2 1s ease-in 0.4s infinite;
}
.loader-2 i:nth-child(5) {
animation: load-2 1s ease-in 0.5s infinite;
}
1.
主要利用圆点的先变小再变大的过程，以及颜色从黑变灰的过程,使用透明度opacity实现。
/*loader-3动画*/.loader-3 {
position: relative;
}
@-webkit-keyframes load-3 {
50% {
transform: scale(0.4);
opacity: 0.4;
}
100% {
transform: scale(1);
opacity: 0.4;
}
}
.loader-3 i {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
background-color: black;
}
.loader-3 i:nth-child(1) {
top: 25px;
left: 0;
animation: load-3 1s ease 0s infinite;
}
.loader-3 i:nth-child(2) {
top: 17px;
left: 17px;
animation: load-3 1s ease -0.12s infinite;
}
.loader-3 i:nth-child(3) {
top: 0px;
left: 25px;
animation: load-3 1s ease -0.24s infinite;
}
.loader-3 i:nth-child(4) {
top: -17px;
left: 17px;
animation: load-3 1s ease -0.36s infinite;
}
.loader-3 i:nth-child(5) {
top: -25px;
left: 0;
animation: load-3 1s ease -0.48s infinite;
}
.loader-3 i:nth-child(6) {
top: -17px;
left: -17px;
animation: load-3 1s ease -0.6s infinite;
}
.loader-3 i:nth-child(7) {
top: 0px;
left: -25px;
animation: load-3 1s ease -0.72s infinite;
}
.loader-3 i:nth-child(8) {
top: 17px;
left: -17px;
animation: load-3 1s ease -0.84s infinite;
}
4.进度条的实现
*loader4,进度条,底部的进度框，通过box-shadow设置内外部阴影*/
.loader-4 {
width: 80%;
background-color: #dcdbd7;
border-radius: 15px;
position: relative;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
/*不断增长的内部进度条，宽度使用动画从0增长到100*/
.progress span {
display: block;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3);
height: 15px;
border-radius: 10px;
animation: progress1 10s linear 0s infinite;
}
/*上面百分比的气泡，开启了绝对定位，相对于loader4进行定位
然后开启了动画，通过设置left来改变位置，保持移动。
*/#percent {
position: absolute;
width: 22px;
height: 10px;
padding: 5px 10px;
border-radius: 0.4em;
font-size: 12px;
font-weight: bold;
left: -22px;
top: -35px;
background: #eeeff3;
background: linear-gradient(#eeeff3, #cbcbd3);
animation: counter 10s linear 0s infinite;
}
/*
是底下的小三角行的实现，实际是一个方形，然后旋转了45度，
开启了绝对定位，是相对于#percent一直50%
*/#percent:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #cbcbd3;
transform: rotate(45deg);
left: 50%;
margin-left: -4px;
bottom: -4px;
border-radius: 0 0 3px 0;
}
@-webkit-keyframes progress1 {
from {
width: 0px;
}
to {
width: 100%;
}
}
@keyframes counter {
from {
left: -22px;
}
to {
left: 85%;
}
}
5.圆环进度条的实现
整个圆环是在100*100的方形框中，
将方形框的左半边设置一个矩形框，里面放了一个圆环，左半边的矩形框设置overflow:hidden。
将方形框的右半边设置一个矩形框，里面放了一个圆环，右半边的矩形框也设置overflow:hidden.
左半边的圆设置左边和底下是透明的，右半边的圆设置右边和上边是透明的。
然后开始旋转，先是右边转，在0%-50%的时候从45度转到225度。
然后左边转，在50%-100%时从45度转到225度。
/*圆环进度条*/.loader-5 {
width: 100px;
height: 100px;
position: relative;
}
/*左半边的一个矩形框*/.leftRect{
height: 100px;
width: 50px;
position: absolute;
top:0;
left:0;
overflow: hidden;
}
/*右半边的矩形框*/.rightRect{
height: 100px;
width: 50px;
position: absolute;
top:0;
right: 0;
overflow: hidden;
}
/*左半边的圆,只有下面和左边的border是有颜色的，其他的是透明的*/.leftcircle{
box-sizing: border-box;
width: 100px;
height: 100px;
border:20px solid black;
border-radius: 50%;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
left:0;
position: absolute;
box-shadow: 2px 2px #333333 inset, 2px 2px #333333;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
/*右半边的圆，只有右边和上边的border是有颜色的，其他的是透明的*/.rightcircle{
box-sizing: border-box;
right:0;
width: 100px;
height: 100px;
border:20px solid black;
border-radius: 50%;
position: absolute;
border-top:20px solid transparent;
border-right:20px solid transparent;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
box-shadow: 2px 0 #333333 inset, 2px 0 #333333;
}
@-webkit-keyframes circleProgressLoad_right {
0% {
-webkit-transform: rotate(45deg);
}
50% {
-webkit-transform: rotate(225deg);
}
100% {
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left {
0% {
-webkit-transform: rotate(45deg);
}
50% {
-webkit-transform: rotate(45deg);
}
100% {
-webkit-transform: rotate(225deg);
}
}
本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
