写一朵花的前端代码
时间: 2024-01-24 15:17:09 浏览: 21
这是一个简单的 HTML 和 CSS 代码,用于创建一朵花的可爱的前端界面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flower</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.flower {
width: 150px;
height: 150px;
position: relative;
transform: rotate(45deg);
}
.flower:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff69b4;
border-radius: 50%;
transform: rotate(45deg);
}
.flower:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transform: rotate(-45deg);
}
.petal {
position: absolute;
width: 50px;
height: 100px;
background-color: #ff69b4;
border-radius: 50%;
transform: rotate(45deg);
}
.petal:nth-child(1) {
top: 15px;
left: 10px;
transform: rotate(0deg);
}
.petal:nth-child(2) {
top: 25px;
left: -20px;
transform: rotate(45deg);
}
.petal:nth-child(3) {
top: 65px;
left: -20px;
transform: rotate(90deg);
}
.petal:nth-child(4) {
top: 105px;
left: 10px;
transform: rotate(135deg);
}
.petal:nth-child(5) {
top: 90px;
left: 40px;
transform: rotate(180deg);
}
.petal:nth-child(6) {
top: 50px;
left: 40px;
transform: rotate(225deg);
}
.petal:nth-child(7) {
top: 10px;
left: 30px;
transform: rotate(270deg);
}
.petal:nth-child(8) {
top: -20px;
left: 0px;
transform: rotate(315deg);
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<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="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="center"></div>
</div>
</div>
</body>
</html>
```
请注意,这只是一个简单的示例,您可以根据需要进行更改和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)