简单菊花加载图css动画实现

最新推荐文章于 2021-10-20 15:43:57 发布

原创最新推荐文章于 2021-10-20 15:43:57 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

css布局练习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用CSS3实现一个简单的菊花加载动画效果，包括html结构和关键的css样式代码，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述

/* less函数优化 */
@size: 50px;
@circletime: 4s;
@loaderbg: bg; /* 自行命名背景类 */
@loaderline: line; /* 自行命名白点类 */

.loader-child(@n, @i: 1) when (@i =< @n) {
    &:nth-child(@{i}) {
        transform: rotate(45deg*@i) translate(-(@size*0.32));
    }

    .loader-child(@n, (@i + 1));
}

.loader-circle(@n, @i: 9, @color: rgb(37, 37, 37)) when(@i =< @n) {
    &:nth-child(@{i}) {
        background-color: @color * ((@i)-8) * 1.2;
        left: @size*0.08;
        transform-origin: @size*0.42;
        animation: move @circletime steps(8) ((@i)-9)*(@circletime/8) infinite;
    }

    .loader-circle(@n, (@i + 1));
}

div.container {
    div.@{loaderbg} {
        height: @size;
        width: @size;
        background-color: rgba(119, 119, 119, .3);
        border-radius: 20%;
        position: relative;

        span.@{loaderline} {
            height: @size *0.1;
            width: @size *0.2;
            border-radius: 5px;
            background-color: #fff;
            display: block;
            position: absolute;
            top: @size * 0.45;
            left: @size * 0.4;

            .loader-child(8);
            .loader-circle(11);
        }
    }
}

@keyframes move {
    to {
        transform: rotate(360deg);
    }
}

/* LESS代码 - 未优化代码 */

@size: 50px;/* 设置loader的大小 */
@circletime: 1s;/* 设置loader转一圈的时长 */

div.container {
    div.loaderbg {
        height: @size;
        width: @size;
        background-color: rgba(119, 119, 119, .3);
        border-radius: 20%;
        position: relative;

        span.loaderline {
            height: @size *0.1;
            width: @size *0.2;
            border-radius: 5px;
            background-color: #fff;
            display: block;
            position: absolute;
            top: @size * 0.45;
            left: @size * 0.4;

            &:nth-child(1) {
                transform: rotate(45deg) translate(-(@size*0.32));
            }

            &:nth-child(2) {
                transform: rotate(90deg) translate(-(@size*0.32));
            }

            &:nth-child(3) {
                transform: rotate(135deg) translate(-(@size*0.32));
            }

            &:nth-child(4) {
                transform: rotate(180deg) translate(-(@size*0.32));
            }

            &:nth-child(5) {
                transform: rotate(225deg) translate(-(@size*0.32));
            }

            &:nth-child(6) {
                transform: rotate(270deg) translate(-(@size*0.32));
            }

            &:nth-child(7) {
                transform: rotate(315deg) translate(-(@size*0.32));

            }

            &:nth-child(8) {
                transform: rotate(360deg) translate(-(@size*0.32));
            }

            &:nth-child(9), &:nth-child(10),&:nth-child(11){
                background-color: rgb(124, 124, 124);
                left: @size*0.08;
                transform-origin:  @size*0.42;
                animation: move @circletime steps(8) 0s infinite;
            }
            &:nth-child(10) {
                background-color: rgb(43, 43, 43);
                animation: move @circletime steps(8) (@circletime/8)*1 infinite;
            }
            &:nth-child(11) {
                background-color: rgb(37, 37, 37);
                animation: move @circletime steps(8) (@circletime/8)*2 infinite;
            }
        }
    }
}

@keyframes move {
    to {
        transform: rotate(360deg);
    }
}

html

<!-- 对应的html代码。11个span。标注类即可 -->
<div class="loaderbg">
                <span class="loaderline"></span><span class="loaderline"></span><span class="loaderline"></span><span
                    class="loaderline"></span><span class="loaderline"></span><span class="loaderline"></span><span
                    class="loaderline"></span><span class="loaderline"></span>
                <span class="loaderline"></span><span class="loaderline"></span><span class="loaderline"></span>
            </div>