手把手教你用纯CSS画朵金花

马黑黑 · 发表于 2022-5-1 21:00

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

我们预设这朵金花有五个花瓣。这五个花瓣需要放入一个容器里，以防止花瓣四处散落。为此，画花，先画容器，我们把这个容器命名为 outer，用类选择器：
.outer {
margin: auto;
margin-top: 100px;
width: 300px;
height: 300px;
position: relative;
}

第一行，令容器居中，第二行，令容器离开上边100个像素，第三、四行是设定容器尺寸，第五行，相对定位元素，以便花瓣能更好定位于其中（花瓣将用绝对定位，父元素相对定位+子元素绝对定位是绝佳的配合）。

下来就是画花瓣，核心是以下 flower 选择器的红紫色那句：

.flower {
width: 50%;
height: 50%;
border-radius: 0 100%;
background: linear-gradient(yellow,gold);
position: absolute;
transform-origin: 100% 100%;
}

紫红色那句，是 flower 元素的边框形状描述，它将能令元素的形状模拟为接近叶片、花瓣的样子。其他的语句解释如下：

头两行，定义花瓣尺寸为父元素的一半；第四句，定义背景图案，用线性渐变的默认方法，设定两种颜色，一是黄色，二是金黄色，令这两种颜色在叶片上渐变。

第四行是绝对定位；第五行是设定 transform（转换）基点，为花瓣的底部。

这样，如下 HTML 代码将能产生一张花瓣：

<div class="outer">
<div class="flower"></div>
</div>

前面说了，我们要画五个花瓣的，所以上面的内层div得添够五个：

<div class="outer">
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
</div>

不过，这样显示出来的仍只是一个花瓣，其他的都躲在了下层了，我们需要将其一一按一定角度旋转。五个花瓣围起来成一圈，每一个占用的角度是 360/5=72（度），我们分别用类选择器 .flower 的伪类选择器 :nth-child(x) 来定义各自 rotate 的样式，第一个处在默认的角度即0度，不用定义：

.flower:nth-child(2) { transform: rotate(72deg); }
.flower:nth-child(3) { transform: rotate(144deg); }
.flower:nth-child(4) { transform: rotate(216deg); }
.flower:nth-child(5) { transform: rotate(288deg); }

这样，漂亮的五个花瓣的金花就呈现在我们眼前。下面是完整代码：

<style>
.outer {
margin: auto;
margin-top: 100px;
width: 300px;
height: 300px;
position: relative;
}
.flower {
width: 50%;
height: 50%;
border-radius: 0 100%;
background: linear-gradient(yellow,gold);
position: absolute;
transform-origin: 100% 100%;
}

.flower:nth-child(2) { transform: rotate(72deg); }
.flower:nth-child(3) { transform: rotate(144deg); }
.flower:nth-child(4) { transform: rotate(216deg); }
.flower:nth-child(5) { transform: rotate(288deg); }
</style>

<div class="outer">
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
<div class="flower"></div>
</div>