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

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

我们预设这朵金花有五个花瓣。这五个花瓣需要放入一个容器里，以防止花瓣四处散落。为此，画花，先画容器，我们把这个容器命名为 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>

红影 发表于 2022-5-1 21:21

五朵金花献给劳动节{:4_173:}

马黑黑 发表于 2022-5-1 21:53

红影 发表于 2022-5-1 21:21
五朵金花献给劳动节

必须的

红影 发表于 2022-5-2 10:25

马黑黑 发表于 2022-5-1 21:53
必须的

想起我曾经被评为五朵金花之一。是指劳动方面的，不是别的{:4_173:}

马黑黑 发表于 2022-5-2 10:42

红影 发表于 2022-5-2 10:25
想起我曾经被评为五朵金花之一。是指劳动方面的，不是别的

既是金花，不能不指别的，指不指而已

红影 发表于 2022-5-2 11:24

马黑黑 发表于 2022-5-2 10:42
既是金花，不能不指别的，指不指而已

别的没有，完全没有{:4_173:}

马黑黑 发表于 2022-5-2 11:25

红影 发表于 2022-5-2 11:24
别的没有，完全没有

有也不指出来

红影 发表于 2022-5-2 13:57

马黑黑 发表于 2022-5-2 11:25
有也不指出来

你今天那个出埃及记是三朵金花吧。

马黑黑 发表于 2022-5-2 14:08

红影 发表于 2022-5-2 13:57
你今天那个出埃及记是三朵金花吧。

三合适那个场景

加林森 发表于 2022-5-2 18:30

真漂亮！

马黑黑 发表于 2022-5-2 19:00

加林森 发表于 2022-5-2 18:30
真漂亮！

这个学会不难吧

加林森 发表于 2022-5-2 19:03

马黑黑 发表于 2022-5-2 19:00
这个学会不难吧

不难的。

马黑黑 发表于 2022-5-2 20:23

加林森 发表于 2022-5-2 19:03
不难的。
思路还是比较清晰的

加林森 发表于 2022-5-2 20:42

马黑黑 发表于 2022-5-2 20:23
思路还是比较清晰的

怎么让它转起来呢？我在想这个事情。

马黑黑 发表于 2022-5-2 20:44

加林森 发表于 2022-5-2 20:42
怎么让它转起来呢？我在想这个事情。

这个容易呀。设置一个@keyframes 动画，父容器 outer 用 animation 运行这个动画

加林森 发表于 2022-5-2 20:55

马黑黑 发表于 2022-5-2 20:44
这个容易呀。设置一个@keyframes 动画，父容器 outer 用 animation 运行这个动画

嗯嗯

红影 发表于 2022-5-2 22:06

马黑黑 发表于 2022-5-2 14:08
三合适那个场景

嗯嗯，多了真变风车了呢。{:4_173:}

马黑黑 发表于 2022-5-2 22:44

红影 发表于 2022-5-2 22:06
嗯嗯，多了真变风车了呢。

就是哈
页: [1]
查看完整版本: 手把手教你用纯CSS画朵金花