首页写一个网页，用html来实现，要求是写一个玫瑰花开花的过程

写一个网页，用html来实现，要求是写一个玫瑰花开花的过程

时间: 2024-06-07 10:10:53 浏览: 68

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>玫瑰花开花过程</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; background-color: #F5F5F5; } .rose { width: 200px; height: 200px; border-radius: 50%; border: 10px solid #E0115F; background-color: #F5F5F5; position: relative; animation: bloom 5s forwards; } .rose:before, .rose:after { content: ""; position: absolute; background-color: #E0115F; border-radius: 50%; } .rose:before { width: 50px; height: 50px; top: 60px; left: 70px; animation: petal1 5s forwards; } .rose:after { width: 70px; height: 70px; top: 70px; right: 70px; animation: petal2 5s forwards; } @keyframes petal1 { from { transform: rotate(0deg) translate(0, 0); opacity: 0; } to { transform: rotate(200deg) translate(80px, -80px); opacity: 1; } } @keyframes petal2 { from { transform: rotate(0deg) translate(0, 0); opacity: 0; } to { transform: rotate(-200deg) translate(-80px, -80px); opacity: 1; } } @keyframes bloom { from { width: 0; height: 0; } to { width: 400px; height: 400px; } } </style> </head> <body> <div class="container"> <div class="rose"></div> </div> </body> </html>

阅读全文