<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { background-color: lightseagreen; overflow: hidden; } .bottom { position: absolute; bottom: 0; width: 100%; height: 235px; } .bottom>div { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: url(DemoMaterial/animation/1.png) no-repeat bottom left; opacity: 0.4; } .bottom .bottom1 { animation: upDown 1s infinite alternate; } .bottom .bottom2 { background-image: url(DemoMaterial/animation/2.png); animation: upDown 1s infinite alternate 0.5s; } /* 太阳 */ .sun { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute; left: 100px; top: 100px; } .sun1, .sun2 { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top: 0; } .sun1 { animation: bigger 1s infinite; } .sun2 { animation: bigger 1s infinite 0.5s; } @keyframes upDown { 0% { bottom: 0px; } 100% { bottom: -30px; } } @keyframes bigger { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0.1; } } </style> </head> <body> <div class="sun"> <div class="sun1"></div> <div class="sun2"></div> </div> <div class="bottom"> <div class="bottom1"></div> <div class="bottom2"></div> </div> </body> </html>
- demo 效果：
- 素材
