之前为大家带来了很多加载动画。 基于prefixfree.js的进度加载条 ，基于jquery带百分比的响应式进度加载条。今天给大家分享一款纯css3实现的条纹加载条。带有响应式的效果。效果图如下 ：
实现的代码。
html代码：
<div class="container">
<div class="warning">
</div>
</div>
css3代码：
.warning {
position: relative;
background-color: #6DA807;
border: 1px solid #6DA807;
border-radius: 10px;
box-shadow: 1vw 3vh 10vh rgba(109, 168, 7, 0.8);
background-size: 3em 3em;
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #96D923 0.9em, #96D923 2.1em, transparent 2.1em, transparent 2.9em, #96D923 3.1em);
-webkit-animation: warning-animation 750ms infinite linear;
-moz-animation: warning-animation 750ms infinite linear;
animation: warning-animation 750ms infinite linear;
}
@-webkit-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@-moz-keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
@keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
.warning:before {
content: '';
position: absolute;
top:;
left:;
right:;
bottom:;
height: 100%;
border-radius: 10px;
background-image: linear-gradient(to bottom, #6DA807, rgba(171, 226, 77, 0.6) 15%, transparent 60%, #6DA807);
}
body, html {
position: absolute;
top:;
left:;
bottom:;
right:;
height: 100%;
}
body {
background-repeat: no-repeat;
background-position: center;
background-image: radial-gradient(circle, #c0e979, #96d923);
}
.container {
width: 80vw;
margin: 45vh auto 0;
}
.container .warning {
height: 10vh;
}