用css实现一朵雏菊

嗯，最近很火的小雏菊
实现思路:

花蕊
先用border-radius圆边属性画一个圆，再在用弹性布局均匀散落一些杂色，杂色用很多个很小的div填充
花瓣
还是用圆边属性画出叶子的形状，再利用transform：rotate旋转变换使它均匀的分布在花蕊周围
css能力有限，实现的比较粗糙
效果如图：
在这里插入图片描述
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景色 */
        html body{
            background-color: yellowgreen;
        }

        /* 调整显示位置 */
        #daisy{
            position:absolute;
            top:200px;
            left:200px;
           
        }
        /* 花蕊 */
        #daisy #stamen {
            position: absolute;
           
            width: 150px;
            height: 150px;
            border-radius: 200px;
            background-color: #f7a738;
            overflow: hidden;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
        }

        /* 花蕊中的杂色 */
        #daisy #stamen .mell{
            width: 3px;
            height: 3px;
            background-color: #dd8c23;
            margin:6px;
        }

        /* 花瓣的外壳:控制花瓣到旋转中心的位置 */
        #daisy .petal_out {
            position: absolute;
            top: 60px;
            left: -105px;
            width: 180px;
            height: 30px;
            transform-origin: center right;  
           
        }
        /* 花瓣 */
        #daisy .petal_out .petal{
            width: 120px;
            height: 30px;
            background-color: #f2f2f2;
            border-radius: 35% 50% 50% 35%;
           
        }
        /* 不同花瓣旋转度数不同 */
        #daisy .p_out0 {
            transform: rotate(0deg)
        }

        #daisy .p_out1 {
            transform: rotate(18deg)
        }

        #daisy .p_out2 {
            transform: rotate(36deg)
        }

        #daisy .p_out3 {
            transform: rotate(54deg)
        }

        #daisy .p_out4 {
            transform: rotate(72deg)
        }

        #daisy .p_out5 {
            transform: rotate(90deg)
        }

        #daisy .p_out6 {
            transform: rotate(108deg)
        }

        #daisy .p_out7 {
            transform: rotate(126deg)
        }

        #daisy .p_out8 {
            transform: rotate(144deg)
        }

        #daisy .p_out9 {
            transform: rotate(162deg)
        }

        #daisy .p_out10 {
            transform: rotate(180deg)
        }

        #daisy .p_out11 {
            transform: rotate(198deg)
        }

        #daisy .p_out12 {
            transform: rotate(216deg)
        }

        #daisy .p_out13 {
            transform: rotate(234deg)
        }

        #daisy .p_out14 {
            transform: rotate(252deg)
        }

        #daisy .p_out15 {
            transform: rotate(270deg)
        }

        #daisy .p_out16 {
            transform: rotate(288deg)
        }
        /* 消失的一瓣 */
        #daisy .p_out17 {
            transform: rotate(306deg);
            display: none;
        }

        #daisy .p_out18 {
            transform: rotate(324deg)
        }

        #daisy .p_out19 {
            transform: rotate(342deg)
        }

    </style>
</head>

<body>
    <div id="daisy">
        <div id="stamen">
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>
            <div class="mell"></div>

           
            
        
        </div>
        <div class="petal_out p_out0"><div class="petal"></div></div>
        <div class="petal_out p_out1"><div class="petal"></div></div>
        <div class="petal_out p_out2"><div class="petal"></div></div>
        <div class="petal_out p_out3"><div class="petal"></div></div>
        <div class="petal_out p_out4"><div class="petal"></div></div>
        <div class="petal_out p_out5"><div class="petal"></div></div>
        <div class="petal_out p_out6"><div class="petal"></div></div>
        <div class="petal_out p_out7"><div class="petal"></div></div>
        <div class="petal_out p_out8"><div class="petal"></div></div>
        <div class="petal_out p_out9"><div class="petal"></div></div>
        <div class="petal_out p_out10"><div class="petal"></div></div>
        <div class="petal_out p_out11"><div class="petal"></div></div>
        <div class="petal_out p_out12"><div class="petal"></div></div>
        <div class="petal_out p_out13"><div class="petal"></div></div>
        <div class="petal_out p_out14"><div class="petal"></div></div>
        <div class="petal_out p_out15"><div class="petal"></div></div>
        <div class="petal_out p_out16"><div class="petal"></div></div>
        <div class="petal_out p_out17"><div class="petal"></div></div>
        <div class="petal_out p_out18"><div class="petal"></div></div>
        <div class="petal_out p_out19"><div class="petal"></div></div>
    </div>
</body>

</html>
用css实现一朵雏菊

实现思路:

猜你喜欢
