HTML CSS examples for CSS Widget:Color
Create growing lines with changing colors using css3
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .header {<!-- w ww . j a va2s . c om--> height: 80px; width: 100%; background: #333; position: relative; overflow: hidden; } .header > div { position: absolute; bottom: 0; } .redLine { height: 10px; animation: moveLine 3s infinite; margin: 0 auto; background: red; } .blueLine { height: 10px; animation: moveLine 3s infinite; margin: 0 auto; background: blue; animation-delay: 1s; } .greenLine { height: 10px; animation: moveLine 3s infinite; margin: 0 auto; background: green; animation-delay: 2s; } @keyframes moveLine { 0% { width: 0%; z-index: 3; } 38% { z-index: 3; } 39% { z-index: 2; } 70% { z-index: 2; } 71% { z-index: 1; } 100% { z-index: 1; width: 110%; } } </style> </head> <body> <div class="header"> <div class="redLine"></div> <div class="blueLine"></div> <div class="greenLine"></div> </div> </body> </html>