animación de carga css3-simple

Puntos de conocimiento

border-top-color: establece el color del borde superior
Los valores superior, izquierdo, inferior y derecho se especifican al mismo tiempo. Tenga en cuenta que cuando no se establecen el ancho y el alto, habrá la misma distancia desde la parte superior, inferior, izquierda y derecha del elemento principal, de modo que se pueda lograr un centrado vertical y horizontal. Es equivalente al efecto del zoom proporcional, consulte blogs relacionados, blog de grandes

efecto

Inserte la descripción de la imagen aquí

Código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    
</body>
</html>

*{
    
    
    margin: 0;
    padding: 0;
}

body{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(29, 20, 20);
}

div{
    
    
    height: 100px;
    width: 100px;
    border: 3px solid transparent;
    border-top-color: rgba(13, 113, 228, 0.877);
    border-radius: 50%;
    position: relative;
    animation: donghua 2.4s linear infinite;
}

div::before{
    
    
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 3px solid transparent;
    border-top-color: rgba(245, 80, 3, 0.904);
    border-radius: 50%;
    animation: donghua 2s linear infinite;
}

div::after{
    
    
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 3px solid transparent;
    border-top-color: rgba(55, 217, 245, 0.897);
    border-radius: 50%;
    animation: donghua 2.3s linear infinite;
}

@keyframes donghua{
    
    
    0%{
    
    
        transform: rotate(0);
    }
    100%{
    
    
        transform: rotate(720deg);
    }
}

animación de carga css3-simple

Puntos de conocimiento

efecto

Código

Supongo que te gusta