一朵花的代码
时间: 2023-07-02 08:18:17 浏览: 48
这是一个用HTML和CSS来绘制一朵花的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Flower</title>
<style>
/* 花瓣 */
.petal {
width: 100px;
height: 200px;
border-radius: 50% / 20%;
background-color: pink;
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -100px;
}
/* 花心 */
.center {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
</head>
<body>
<div class="petal"></div>
<div class="petal" style="transform: rotate(90deg);"></div>
<div class="petal" style="transform: rotate(180deg);"></div>
<div class="petal" style="transform: rotate(270deg);"></div>
<div class="center"></div>
</body>
</html>
```
这个代码使用了 HTML 和 CSS 来绘制一朵有四个花瓣和黄色花心的花。你可以尝试运行这个代码,然后观察绘制出来的花的效果。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)