css 画图（2）

 参考资料：【CSS 教程 (w3school.com.cn)】

 

css：
 .loading_box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .loading {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            transform: rotate(360deg);
            /* animation: r 45s infinite linear; */ /* 单线条动画*/
            background: linear-gradient(limegreen, transparent),
                        linear-gradient(90deg, skyblue, transparent), 
                        linear-gradient(-90deg, coral, transparent);
                         /*取消背景色可看到loading单线条*/
            background-blend-mode: color-dodge; /* 颜色减淡 变成小清新色调*/
            animation: backgroundColorChange 5s infinite alternate linear;
             /* 背景颜色的变化 */
        }

        .loading_text {
            display: inline;
            position: absolute; /* 文字大概的位置*/
            top: 50%;
            left: 27%;
            /* color: transparent; */  /*背景透明 */
            /* -webkit-text-stroke: #ff00bc; */ /*边框颜色 没实现*/
            font-size: 20px;
        }

        .loading::before {
            position: absolute;
            content: "";
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            box-sizing: border-box;
            border-radius: 50%;
            border-top: 3px solid #000;
            border-left: 3px solid #000;
            border-bottom: 3px solid transparent;
            border-right: 3px solid transparent;
            transform: rotate(720deg);
            animation: r 3s infinite ease-out;
        }

        .loading::after {
            position: absolute;
            content: "";
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            box-sizing: border-box;
            border-radius: 50%;
            border-bottom: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid #fff;
            border-left: 7px solid #fff;
            transform: rotate(720deg);
            animation: r 3s infinite ease-in-out;
        }

        @keyframes r {

            /* loading */
            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes backgroundColorChange {

            /* 背景 */
            100% {
                -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg);
            }
        }
    </style>
html：
<div class="loading_box">
    <div class="loading"></div>
    <div class="loading_text">心情加载中...</div>
</div>