送你一朵小红花，CSS实现一朵旋转的小红花

清疚 2023-01-02 14:29 108阅读 0赞

送你一朵小红花，愿你勇敢的面对生活中的苦难，不要放弃爱与希望，蓝天白云，定会如期而至。

### 视频： ###

B站视频链接：[https://www.bilibili.com/video/BV1xX4y1M7yM][https_www.bilibili.com_video_BV1xX4y1M7yM]

### HTML ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>送你一朵小红花：公众号AlbertYang</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        
        <div class="box">
            
            <div class="flower">
                
                <div class="petal" style="--x:0"></div>
                <div class="petal" style="--x:1"></div>
                <div class="petal" style="--x:2"></div>
                <div class="petal" style="--x:3"></div>
                <div class="petal" style="--x:4"></div>
                <div class="petal" style="--x:5"></div>
                
                <div class="circle"></div>
            </div>
        </div>
    </body>
    
    </html>

### CSS ###

/* 清除浏览器设置的默认边距，
    使边框和内边距的值包含在元素的width和height内 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 使用flex布局，让内容垂直和水平居中 */
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    /* 花朵 */
    .flower {
        position: relative;
        width: 80px;
        height: 80px;
        transform-origin:  100% 100%;
        animation: rotate 3s linear infinite;
    }
    /* 花瓣 */
    .petal {
        display: block;
        /* 花瓣的宽高等于花朵的宽高 */
        width: 80px;
        height: 80px;
        background: red;
        border-radius: 0 70px;
        position: absolute;
        /* 让不同的花瓣旋转为花朵 */
        transform-origin: 100% 100%;
        transform: rotate(calc(var(--x) * 60deg));
    }
    /* 花心 */
    .circle {
        width: 100px;
        height: 100px;
        position: absolute;
        background: #fff200;
        border-radius: 50%;
        left: 30px;
        top: 30px;
        box-shadow: 0 0 50px yellow;
        background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b);
    }
    /* 花朵旋转动画 */
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

![de5bd36dfdddc3ba19086a5b531999c2.gif][]

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，**如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[https_www.bilibili.com_video_BV1xX4y1M7yM]: https://www.bilibili.com/video/BV1xX4y1M7yM
[de5bd36dfdddc3ba19086a5b531999c2.gif]: /images/20221119/7eab913f774744efa662fc23ec4792f7.png