一款純css3實現的條紋載入條，css3條紋載入

一款純css3實現的條紋載入條，css3條紋載入

之前為大家帶來了很多載入動畫。 基於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: 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;}

via：http://www.w2bc.com/Article/18415