变色加载圆环 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                height: 100vh;
                /* 让圆居中 */
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                background-color: black;
            }
            .father{
                width: 200px;
                height: 200px;
                background: linear-gradient(45deg,transparent 50%,#e5f403);
                /* 圆角：变圆 */
                border-radius: 50%;
                /* 让中心创建的用来遮罩的黑色圆居中 */
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                /* 关键帧动画，infinite无限次数 linear匀速 */
                animation: abc 2s infinite linear;
            }
            .son{
                width: 95%;
                height: 95%;
                background-color: black;
                border-radius: 50%;
            }
            @keyframes abc{
                from{
                    /* 旋转 */
                    transform: rotateZ(0deg);
                    /* 色相旋转 */
                    filter: hue-rotate(0deg);
                }
                to{
                    transform: rotateZ(360deg);
                    filter: hue-rotate(360deg);
                }
            }
		</style>
	</head>
	<body>
        <div class="father">
            <div class="son"></div>
        </div>
	</body>
</html>
posted @ 2023-04-17 21:01  不尽人意的K  阅读(17)  评论(0)  编辑  收藏  举报