首页生产一个玫瑰花绽放的html

生产一个玫瑰花绽放的html

时间: 2024-01-05 18:59:03 浏览: 68

<!DOCTYPE html> <html> <head> <title>玫瑰花绽放</title> <style> .container { width: 300px; height: 300px; position: relative; margin: 100px auto; } .petal { position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin-top: -10px; margin-left: -10px; border-radius: 50%; animation: petal-fall 3s ease-in-out forwards; } .petal:nth-child(1) { transform: rotate(0deg); } .petal:nth-child(2) { transform: rotate(45deg); } .petal:nth-child(3) { transform: rotate(90deg); } .petal:nth-child(4) { transform: rotate(135deg); } .petal:nth-child(5) { transform: rotate(180deg); } .petal:nth-child(6) { transform: rotate(225deg); } .petal:nth-child(7) { transform: rotate(270deg); } .petal:nth-child(8) { transform: rotate(315deg); } @keyframes petal-fall { 0% { width: 0; height: 0; } 50% { width: 20px; height: 30px; } 100% { width: 0; height: 0; transform: translateY(150px); } } .center { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; background-color: #f00; animation: center-bloom 3s ease-in-out forwards; } @keyframes center-bloom { 0% { width: 0; height: 0; } 50% { width: 30px; height: 30px; } 100% { width: 100px; height: 100px; background-color: #f00; border-radius: 50%; } } </style> </head> <body> <div class="container"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="center"></div> </div> </body> </html>

阅读全文