html菜单导航条纹,一款纯css3实现的条纹加载条

之前为大家带来了很多加载动画。 基于prefixfree.js的进度加载条 ，基于jquery带百分比的响应式进度加载条。今天给大家分享一款纯css3实现的条纹加载条。带有响应式的效果。效果图如下 ：

实现的代码。

html代码：

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: 0;

left: 0;

right: 0;

bottom: 0;

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: 0;

left: 0;

bottom: 0;

right: 0;

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;

}