www.pudn.com > CSS3jindutiao.zip > index.html, change:2015-03-25,size:1948b


<!DOCTYPE html> 
<html class=''> 
<head> 
    <title>绿色条纹CSS3进度条代码 - 源码之家</title> 
    <style class="cp-pen-styles"> 
        .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; 
} 
</style> 
</head> 
<body> 
    <div class="container"> 
        <div class="warning"> 
        </div> 
    </div> 
<div style="text-align:center;"> 
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p> 
</div> 
</body> 
</html>