最好看的html玫瑰代码
时间: 2023-11-10 11:05:49 浏览: 256
以下是一个简单但美观的 HTML 玫瑰代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML 玫瑰</title>
<meta charset="UTF-8">
<style type="text/css">
body {
background-color: #f7e5e6;
}
h1 {
font-size: 48px;
color: #d61a3c;
text-align: center;
margin-top: 50px;
}
.rose {
width: 150px;
height: 150px;
position: relative;
margin: 0 auto;
}
.rose:before,
.rose:after {
content: "";
position: absolute;
border-radius: 50%;
}
.rose:before {
width: 120px;
height: 120px;
top: -50px;
left: 15px;
background-color: #d61a3c;
}
.rose:after {
width: 120px;
height: 120px;
top: -50px;
right: 15px;
background-color: #d61a3c;
}
.rose .leaf {
width: 50px;
height: 100px;
position: absolute;
bottom: 10px;
transform: rotate(-45deg);
background-color: green;
}
.rose .leaf:first-child {
left: 20px;
}
.rose .leaf:last-child {
right: 20px;
}
</style>
</head>
<body>
<h1>HTML 玫瑰</h1>
<div class="rose">
<div class="leaf"></div>
<div class="leaf"></div>
</div>
</body>
</html>
```
运行效果如下:
![HTML 玫瑰](https://i.imgur.com/ZFFB9G3.png)
阅读全文