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

2024-12-05

663 字约 3 分钟

...

这段代码通过 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 定义关键帧动画，用于创建花瓣的开合效果。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

更多文章 →

html2024-09-18

你知道的H5屏幕的适配方案有哪些？

1\. @media媒体查询适配利用html标签为基准，然后用rem设配页面 2\. 插件postcss pxtorem 他是postcss插件配置如下：在我们的文件里面，你可以自由的使用，在打包的时候插件，他会自动将转化成 3\. 利用js动态修改根元素的利用js，无论视口宽度如何变化，页面元素都会根据基准值动态调整大小，确保良好的适配效果。在加上px转化为rem的技术更是提高了适配的灵活性。工具函数 app 组件使...

学习

html2024-07-24

前端面试题汇总之HTML篇（含答案）

1、什么是 DOCTYPE(⽂档类型)，有何作用（1）解释（是什么） DOCTYPE是是HTML5的文档声明,一种标准的。（2）DOCTYPE的作用包括： 1. 告知浏览器使用哪个HTML版本：定义和声明HTML文档的类型和版本, 告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，例如，声明表示文档是基于HTML5的。不同的HTML版本可能具有不同的语法和功能支持，因此DOCTYPE有助于...

学习面试

html2023-09-06