太阳的发散效果主要是利用transform: scale(1.3)，将物体变大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; background-color: lightseagreen; overflow: hidden; } .sun { width: 80px; height: 80px; position: absolute; top: 45px; left: 67px; background-color: #fff; border-radius: 50%; } .sun1, .sun2 { position: absolute; top: 0; left: 0; width: 80px; height: 80px; background-color: #fff; border-radius: 50%; } .sun1 { animation: bigger 1s infinite alternate; } .sun2 { animation: bigger 1s infinite 0.5s alternate; } .bottom { width: 100%; height: 235px; position: absolute; bottom: 0; left: 0; } .bottom1, .bottom2 { width: 100%; position: absolute; left: 0; bottom: 0; opacity: 0.5; } .bottom1 { height: 211px; background: url("images/bolang1.png"); background-size: cover; animation: upDown 1s infinite alternate; } .bottom2 { height: 235px; background: url("images/bolang2.png"); background-size: cover; animation: upDown 1s infinite alternate 0.5s; } @keyframes bigger { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0.3; transform: scale(1.3); } } @keyframes upDown { 0% { bottom: 0px; } 100% { bottom: -20px; } } </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>
