手把手教你实现属于自己的玫瑰花

这段代码通过 HTML 和 CSS 的结合，创建了一个动态的花朵效果，展示了 CSS 动画和定位的强大功能。

#演示效果

#HTML&CSS

复制<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端Hardy</title>
    <style>
        body {
            background-color: #21324C;
            color: #fff;
            font-family: 'Indie Flower', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
        }

        .text {
            margin-top: -300px;
            margin-bottom: 150px;
            text-align: center;
        }

        .text h1 {
            margin: 5px 0;
        }

        .text h3 {
            margin: 0;
        }

        .text a {
            color: #d52d58;
            text-decoration: none;
        }

        .flower {
            position: relative;
            top: -80px;
            left: -20px;
        }

        .flower:nth-of-type(2) {
            left: -80px;
            top: -19px;
            transform: scale(.7);
        }

        .flower:nth-of-type(3) {
            left: 55px;
            top: -19px;
            transform: scale(.7);
        }

        .flower .petal {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #d52d58;
            border-radius: 0px 30px 0px 30px;
            width: 30px;
            height: 60px;
        }

        .flower .petal:nth-child(1) {
            left: -10px;
            transform: rotate(-10deg);
            transform-origin: bottom right;
            background-color: #b81b43;
            animation: openleft 3s ease-in infinite;
            z-index: 5;
        }

        .flower .petal:nth-child(2) {
            left: -10px;
            background-color: #c9204b;
            z-index: 4;

        }

        .flower .petal:nth-child(3) {
            border-radius: 30px;
            left: 5px;
        }

        .flower .petal:nth-child(4) {
            border-radius: 30px 0px 30px 0px;
            background-color: #c9204b;
            left: 20px;
            z-index: 4;
        }

        .flower .petal:nth-child(5) {
            border-radius: 30px 0px 30px 0px;
            left: 20px;
            transform: rotate(10deg);
            transform-origin: bottom left;
            animation: openright 3s ease-in infinite;
            background-color: #b81b43;
            z-index: 5;
        }

        .flower .rod {
            background-color: #329932;
            width: 5px;
            height: 150px;
            position: absolute;
            left: 17.5px;
            top: 58px;
            z-index: -1;
        }

        .flower .rod::before {
            background-color: lightgreen;
            border-radius: 3px;
            content: '';
            display: block;
            width: 20px;
            height: 8px;
            margin-left: -8px;
        }

        .flower .rod .spike {
            width: 0;
            height: 0;
            position: absolute;
            top: 20px;
            left: -10px;
            border-color: transparent #329932 transparent transparent;
            border-style: solid;
            border-width: 5px;
        }

        .flower .rod .spike:nth-child(2) {
            top: 50px;
            left: 4px;
            border-color: transparent transparent transparent #329932;
        }

        .flower .rod .spike:nth-child(3) {
            top: 80px;
        }

        .flower .rod .spike:nth-child(4) {
            top: 110px;
            left: 4px;
            border-color: transparent transparent transparent #329932;
        }

        @keyframes openleft {

            20%,
            80% {
                transform: rotate(-20deg);
            }
        }

        @keyframes openright {

            20%,
            80% {
                transform: rotate(20deg);
            }
        }
    </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="rod">
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
        </div>
    </div>
    <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="rod">
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
        </div>
    </div>
    <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="rod">
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
            <div class="spike"></div>
        </div>
    </div>
</body>

</html>

• .flower 设置花朵的位置和布局。position: relative; 相对定位。top: -80px; 和 left: -20px; 调整花朵的位置。
• .flower .petal 设置花瓣的样式。position: absolute; 绝对定位。background-color: #d52d58; 背景颜色为粉红色。border-radius: 0px 30px 0px 30px; 设置边框圆角。
• .flower .petal 子选择器根据不同的花瓣子元素，设置不同的样式，如旋转角度、背景颜色等。
• .flower .rod 设置花杆的样式。background-color: #329932; 背景颜色为绿色。width: 5px; 宽度为 5px。height: 150px; 高度为 150px。
• .flower .rod::before 设置花杆顶部的装饰。background-color: lightgreen; 背景颜色为浅绿色。
• .flower .rod .spike 设置花杆上的刺。border-color: transparent #329932 transparent transparent; 设置边框颜色，形成三角形的刺。
• @keyframes openleft 和 @keyframes openright 定义关键帧动画，用于创建花瓣的开合效果。