使用CSS3创建动态加载指示条-优快云博客

本文链接：https://blog.youkuaiyun.com/u014404513/article/details/51376740

本文将介绍如何利用CSS3的动画属性来创建一个吸引人的加载指示条效果。通过设置关键帧动画，我们可以实现指示条从无到有、颜色渐变等动态展示，为用户界面增加视觉反馈。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载指示器</title>
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        position: absolute;
    }
    .wrap {
        position: relative;
        top: 300px;
        left: 50%;
    }
     .wrap div:after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        /*background: linear-gradient(180deg, red, yellow, blue, green,black, pink, white, skyblue);*/
        /*background: radial-gradient( red, white, yellow 30%, white, pink, white, skyblue, white, blue, white, white);*/
        background-color: gray;
        border-radius: 50%;
        -webkit-box-reflect:below 10px -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }
    /*.wrap div:before{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: green;
        border-radius: 50%;
        position: relative;
    }*/
    .wrap div:nth-child(1) {
        animation: rotate 2.5s ;
    }
    .wrap div:nth-child(2) {
        animation: rotate 2.5s .3s;
    }
    .wrap div:nth-child(3) {
        animation: rotate 2.5s .6s;
    }
    .wrap div:nth-child(4) {
        animation: rotate 2.5s .9s;
    }
    .wrap div:nth-child(5) {
        animation: rotate 2.5s 1.2s;
    }   
    .wrap div:nth-child(6) {
        animation: rotate 2.5s 1.5s;
    }
    .wrap div {
        animation-iteration-count: infinite;
    }


    @keyframes rotate {
    /*  0% {
            -webkit-transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
            animation-timing-function: linnear;
        }*/
        20% {
            -webkit-transform: rotateZ(72deg);
            -ms-transform: rotateZ(72deg);
            -o-transform: rotateZ(72deg);
            transform: rotateZ(72deg);
            animation-timing-function: linear;
        }
        40% {
            -webkit-transform: rotateZ(144deg);
            -ms-transform: rotateZ(144deg);
            -o-transform: rotateZ(144deg);
            transform: rotateZ(144deg);

            animation-timing-function: linear;
        }
        60% {
            -webkit-transform: rotateZ(216deg);
            -ms-transform: rotateZ(216deg);
            -o-transform: rotateZ(216deg);
            transform: rotateZ(216deg);
            opacity: 0.6;
            animation-timing-function: ease-out;
        }
        80% {
            -webkit-transform: rotateZ(288deg);
            -ms-transform: rotateZ(288deg);
            -o-transform: rotateZ(288deg);
            transform: rotateZ(288deg);
            opacity: 0.8;
            animation-timing-function: ease-out;
        }
        100% {
            -webkit-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
            opacity: 0;
            animation-timing-function: ease-out;
        }
    }


    </style>

</head>
<body>

    <div class="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>
</html>

CSS3-制作加载指示条