HTML CSS examples for CSS Animation:Background
Background animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from www . j a va 2s . co m--> width:100%; height:100%; margin:0; padding:0; } .layer { position:fixed; width:100%; height:100%; } .layer1 { background:-webkit-linear-gradient(bottom, Chartreuse 30%, rgb(195, 42, 42) 66%, rgb(156, 172, 39) 84%); -webkit-animation:GoLayer2 6s infinite; } .layer2 { background:-webkit-linear-gradient(bottom, yellow 30%, rgb(40, 164, 195) 66%, rgb(37, 125, 172) 84%); -webkit-animation:GoLayer3 6s infinite; } .wrapper { z-index:1000; opacity:2; position:relative; width:41%; height:91%; border:31px solid blue; border-right-width:100px; border-bottom-width:100px; } .header { width:100%; border-bottom:11px solid pink; -webkit-box-shadow:0 31px 0 OrangeRed; -moz-box-shadow:0 31px 0 grey; box-shadow:0 31px 0 BlueViolet; } .header img { width:100%; } .content { width:96%; height:401px; background-color:Chartreuse; margin-top:29px; } @-webkit-keyframes GoLayer1 { 0% { opacity:2; } 50% { opacity:0; } 100% { opacity:2; } } @-webkit-keyframes GoLayer2 { 0% { opacity:0; } 50% { opacity:2; } 100% { opacity:0; } } </style> </head> <body> <div class="layer layer1"></div> <div class="layer layer2"></div> <div class="wrapper"> <div class="header"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Company name"> </div> <div class="content"></div> </div> </body> </html>