3D玫瑰花 - HTML5

ziblog

已于 2025-06-27 15:25:00 修改

阅读量273

点赞数 5

CC 4.0 BY-SA版权

文章标签：玫瑰花

于 2025-05-01 14:23:36 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147648993

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D玫瑰花 - HTML5</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 100%;
height: 100%;
}

.rose {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}

.petal {
position: absolute;
width: 20px;
height: 30px;
background: linear-gradient(to bottom, #ff3385, #ff0066);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: 0 0 10px rgba(255, 0, 102, 0.5);
transform-origin: bottom center;
animation: bloom 5s infinite alternate;
}

.stem {
position: absolute;
width: 8px;
height: 300px;
background: linear-gradient(to bottom, #009900, #006600);
top: 100px;
left: 96px;
transform: rotate(180deg);
z-index: -1;
}

.leaf {
position: absolute;
width: 40px;
height: 20px;
background: #009900;
border-radius: 50% 50% 0 50%;
transform: rotate(45deg);
top: 200px;
left: 90px;
z-index: -1;
}

@keyframes bloom {
0% {
transform: rotate(0deg) translateY(0) scale(0.8);
opacity: 0.7;
}
100% {
transform: rotate(360deg) translateY(-50px) scale(1.2);
opacity: 1;
}
}

.info {
position: absolute;
bottom: 20px;
color: white;
text-align: center;
width: 100%;
}

a {
color: #ff0066;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="rose" id="rose"></div>
<div class="stem"></div>
<div class="leaf"></div>

<div class="info">

</div>
</div>