css 画花
时间: 2023-07-02 15:21:47 浏览: 47
好的,下面是一个使用 CSS 画花的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS 画花</title>
<style>
.flower {
position: relative;
width: 150px;
height: 150px;
margin: 50px auto;
}
.petal {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 100px;
margin-left: -25px;
margin-top: -50px;
border-radius: 50px/25px;
transform-origin: 50% 100%;
transform: rotate(0deg) skew(0deg, 45deg);
}
.petal:nth-child(2n) {
transform: rotate(45deg) skew(0deg, 45deg);
}
.petal:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
background-color: #f00;
border-radius: 50%;
transform-origin: 50% 0%;
transform: rotate(0deg);
}
.petal:nth-child(2n):after {
transform: rotate(45deg);
}
</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="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
</body>
</html>
```
在这段代码中,我们使用 CSS 的 `border-radius` 属性创建花瓣的形状,并使用 `transform` 和 `transform-origin` 属性对花瓣进行旋转和扭曲,以创建更真实的花瓣效果。我们还使用 `:after` 伪元素创建花瓣的中心部分,使用 `nth-child` 伪类对不同的花瓣进行旋转,以使花瓣分布更加均匀。
您可以将此代码复制并粘贴到任何文本编辑器中,并将其保存为 `.html` 文件,然后在浏览器中打开该文件,即可看到一个用 CSS 画的花。