首页 > 分享 > HTML&CSS ：动态效果的玫瑰花

HTML&CSS ：动态效果的玫瑰花

花匠小妙招
2024-12-11 07:02

这段代码通过 HTML 和 CSS 的结合，创建了一个动态的花朵效果，展示了 CSS 动画和定位的强大功能。

演示效果

在这里插入图片描述

HTML&CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端Hardy</title> <style> body { background-color: #21324C; color: #fff; font-family: 'Indie Flower', cursive; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; } .text { margin-top: -300px; margin-bottom: 150px; text-align: center; } .text h1 { margin: 5px 0; } .text h3 { margin: 0; } .text a { color: #d52d58; text-decoration: none; } .flower { position: relative; top: -80px; left: -20px; } .flower:nth-of-type(2) { left: -80px; top: -19px; transform: scale(.7); } .flower:nth-of-type(3) { left: 55px; top: -19px; transform: scale(.7); } .flower .petal { position: absolute; top: 0; left: 0; background-color: #d52d58; border-radius: 0px 30px 0px 30px; width: 30px; height: 60px; } .flower .petal:nth-child(1) { left: -10px; transform: rotate(-10deg); transform-origin: bottom right; background-color: #b81b43; animation: openleft 3s ease-in infinite; z-index: 5; } .flower .petal:nth-child(2) { left: -10px; background-color: #c9204b; z-index: 4; } .flower .petal:nth-child(3) { border-radius: 30px; left: 5px; } .flower .petal:nth-child(4) { border-radius: 30px 0px 30px 0px; background-color: #c9204b; left: 20px; z-index: 4; } .flower .petal:nth-child(5) { border-radius: 30px 0px 30px 0px; left: 20px; transform: rotate(10deg); transform-origin: bottom left; animation: openright 3s ease-in infinite; background-color: #b81b43; z-index: 5; } .flower .rod { background-color: #329932; width: 5px; height: 150px; position: absolute; left: 17.5px; top: 58px; z-index: -1; } .flower .rod::before { background-color: lightgreen; border-radius: 3px; content: ''; display: block; width: 20px; height: 8px; margin-left: -8px; } .flower .rod .spike { width: 0; height: 0; position: absolute; top: 20px; left: -10px; border-color: transparent #329932 transparent transparent; border-style: solid; border-width: 5px; } .flower .rod .spike:nth-child(2) { top: 50px; left: 4px; border-color: transparent transparent transparent #329932; } .flower .rod .spike:nth-child(3) { top: 80px; } .flower .rod .spike:nth-child(4) { top: 110px; left: 4px; border-color: transparent transparent transparent #329932; } @keyframes openleft { 20%, 80% { transform: rotate(-20deg); } } @keyframes openright { 20%, 80% { transform: rotate(20deg); } } </style> </head> <body> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="rod"> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> </div> </div> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="rod"> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> </div> </div> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="rod"> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> <div class="spike"></div> </div> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213 .flower 设置花朵的位置和布局。position: relative; 相对定位。top: -80px; 和 left: -20px; 调整花朵的位置。.flower .petal 设置花瓣的样式。position: absolute; 绝对定位。background-color: #d52d58; 背景颜色为粉红色。border-radius: 0px 30px 0px 30px; 设置边框圆角。.flower .petal 子选择器根据不同的花瓣子元素，设置不同的样式，如旋转角度、背景颜色等。.flower .rod 设置花杆的样式。background-color: #329932; 背景颜色为绿色。width: 5px; 宽度为 5px。height: 150px; 高度为 150px。.flower .rod::before 设置花杆顶部的装饰。background-color: lightgreen; 背景颜色为浅绿色。.flower .rod .spike 设置花杆上的刺。border-color: transparent #329932 transparent transparent; 设置边框颜色，形成三角形的刺。@keyframes openleft 和 @keyframes openright 定义关键帧动画，用于创建花瓣的开合效果。