CSS3渐变进度条效果
1.html代码如下：
<section class="container">
<div class="loading-bar"></div>
</section>
<h1>CSS3渐变进度条效果</h1>
2.css样式
背景色黑色，背景色动画渐变时常5s
body{
background-color: #333;
animation: body-animate 5s linear infinite;
}
3.设置CSS3渐变进度条效果字体样式效果
body h1{
width: 100%;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
letter-spacing: 3px;
}
4.设置进度条外矩形块的样式和位置
.container{
width: 50%;
background-color: #fff;
margin: 280px auto 100px;
padding: 20px 40px;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.container .loading-bar{
display: inline-block;
width: 100%;
height: 10px;
background-color: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 5px;
overflow: hidden;
position: relative;
}
5.设置进度条显示效果
.container .loading-bar::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
animation: load-animate 5s linear infinite;
}
6.整个效果分为三步我们先让它快起来,再让它慢起来,设置背景色渐变,红色-黄色-深黄色
@keyframes load-animate{
0%{
width: 0%;
background-color: #ff6369;
}
70%{
width: 70%;
background-color: #ffe669;
}
100%{
width: 100%;
background-color: #d6e663;
}
}
7.给body标签添加动画效果,实现背景渐变的效果背景颜色,随着滚动条的颜色进行改变,滚动条颜色变化,背景颜色跟随变化.
同步使用关键帧动画，并且时间要保持一致
@keyframes body-animate{
0%{
background-color: #ff6369;
}
70%{
background-color: #ffe669;
}
100%{
background-color: #d6e663;
}
}
完整CSS代码如下：
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #333;
animation: body-animate 5s linear infinite;
}
body h1{
width: 100%;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
letter-spacing: 3px;
}
.container{
width: 50%;
background-color: #fff;
margin: 280px auto 100px;
padding: 20px 40px;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.container .loading-bar{
display: inline-block;
width: 100%;
height: 10px;
background-color: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 5px;
overflow: hidden;
position: relative;
}
.container .loading-bar::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
animation: load-animate 5s linear infinite;
}
@keyframes load-animate{
0%{
width: 0%;
background-color: #ff6369;
}
70%{
width: 70%;
background-color: #ffe669;
}
100%{
width: 100%;
background-color: #d6e663;
}
}
@keyframes body-animate{
0%{
background-color: #ff6369;
}
70%{
background-color: #ffe669;
}
100%{
background-color: #d6e663;
}
}
</style>
