html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绿色条纹css3</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} html,body { background-repeat: no-repeat; background-position: center; background-image: radial-gradient(circle, #c0e979, #96d923); height:100%; position:absolute; width:100% } .container { width: 80vw; margin: 45vh auto 0; } .container .warning { height: 10vh; } .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; } .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); } @-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; } } </style> </head> <body> <div class="container"> <div class="warning"></div> </div> </body> </html>
效果
