[Demostración de front-end] Animación CSS de bombillas navideñas para realizar las luces intermitentes a su vez

Directorio de artículos

Directorio de demostración de front-end

Efecto

inserte la descripción de la imagen aquí
Vista previa del efecto: https://codepen.io/karshey/pen/zYyBRWZ

Referencia:
Luces navideñas de CSS puro (codepen.io)

Luces navideñas (codepen.io)

proceso

Implementación de brillo de bombilla (animación y sombra de caja)

Efecto:

inserte la descripción de la imagen aquí

Tomemos el ejemplo de una sola bombilla que parpadea. El principio de realización de la bombilla que brilla es la animación CSS animationy la sombra box-shadow.

Cuando es brillante, en realidad muestra la misma sombra que el color de fondo:

sombra-cuadro: sombra-h, sombra-v, desenfoque, extensión de color;
posición de la sombra horizontal | posición de la sombra vertical | distancia de desenfoque | tamaño de la sombra | color de la sombra | cambiar la sombra exterior (inicio) a la sombra interior

Aquí solo necesitas usar distancia de desenfoque | tamaño de sombra | color de sombra .

Solo necesitas tener una sombra al principio y al final de la animación, y cuando la sombra desaparezca en el medio, habrá el efecto de la bombilla parpadeando y apagándose.

@keyframes glow-red {
    
    

    /* 开头和结尾都亮 */
    0%,
    100% {
    
    
        /* 放大阴影相当于亮了 */
        box-shadow: 0 0 20px 5px #fbc2eb;
    }

    50% {
    
    
        box-shadow: none;
    }
}

Aquí llamamos al efecto de animación de la bombilla rosa glow-redy animationlo usaremos en .

animationsubpropiedades de:

animation-name: Especifica @keyframesel nombre de un , la animación utilizará esta @keyframesdefinición.

animation-duration: La duración de toda la animación.

animation-timing-function: Control de velocidad durante la animación, como easeo linear.

animation-delay: Tiempo de retardo de la animación.

animation-direction: La dirección del movimiento cuando se repite la animación.

animation-iteration-count: El número de veces que se ejecuta el bucle de animación.

animation-fill-mode: Establece el estado después de que se ejecuta la animación/antes de que comience a ejecutarse. Por ejemplo, puede hacer que la animación permanezca en la última escena después de que se ejecute la animación o volver al estado inicial.

animation-play-state: pausar/iniciar animación.

Aquí, solo necesitamos establecer el tiempo de la animación en 1 s ( animation-duration) y ejecutarlo infinitamente ( animation-iteration-count).

animation: glow-red 1s infinite;

En resumen, el código relacionado con una sola bombilla rosa:

.red {
    
    
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    animation: glow-red 1s infinite;
}

@keyframes glow-red {
    
    

    /* 开头和结尾都亮 */
    0%,
    100% {
    
    
        /* 放大阴影相当于亮了 */
        box-shadow: 0 0 20px 5px #fbc2eb;
    }

    50% {
    
    
        box-shadow: none;
    }
}

Controlar el tiempo de parpadeo y secuencia de las bombillas (animación-retraso)

En este momento, las bombillas parpadean al mismo tiempo.

inserte la descripción de la imagen aquí
Queremos que las bombillas parpadeen en orden: rosa primero, azul después y verde al final.

Método de implementación: establezca el momento en que comienza la animación de la bombilla, es decir, el tiempo de retrasoanimation-delay .

Por ejemplo, deje que el rosa no tenga tiempo de retraso, el azul tenga un retraso de 0,3 segundos y el verde tenga un retraso de 0,6 segundos.

.red {
    
    
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    animation: glow-red 1s infinite;
}

.blue {
    
    
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    animation: glow-blue 1s infinite;
    animation-delay: 0.3s;
}

.green {
    
    
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    animation: glow-green 1s infinite;
    animation-delay: 0.6s;
}

Efecto:

inserte la descripción de la imagen aquí

botón del interruptor de encendido

Quiere tener botones de ENCENDIDO y APAGADO, haga clic en ENCENDIDO para encender la luz, haga clic en APAGADO para apagar la luz.

Agregar botón y evento de clic correspondiente:

Evento del botón APAGADO: Obtenga el nodo y apague la luz.

const item = document.getElementsByClassName('item')
const len = item.length

function offLight() {
    
    
    for (let i = 0; i < len; i++) {
    
    
        item[i].style.animation = 'none'
        item[i].style.background = '#9e9e9e'
    }
}

Evento del botón ON: eliminar el estilo original y animationPlayStatecomenzar.

También es posible no escribir item[i].style.animationPlayState = 'running' aquí.

function onLight() {
    
    
    for (let i = 0; i < len; i++) {
    
    
        item[i].removeAttribute('style')
        //可以不写
        item[i].style.animationPlayState = 'running'
    }
}

Cuando se hace clic en APAGADO: Equivale a agregar una animación de parada y un estilo de color de fondo gris, cubriendo el estilo original.

inserte la descripción de la imagen aquí

Por lo tanto, cuando hace clic en ON: debe eliminar el estilo agregado por OFF. Se puede activar sin agregarlo aquí item[i].style.animationPlayState = 'running', porque el efecto de iluminación del CSS original se mostrará después de que no haya estilo.

inserte la descripción de la imagen aquí

el código

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞节灯泡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 九个灯泡 -->
    <div class="main">
        <div class="items">
            <div class="red item" id="red"></div>
            <div class="blue item" id="blue"></div>
            <div class="green item" id="green"></div>
            <div class="red item" id="red"></div>
            <div class="blue item" id="blue"></div>
            <div class="green item" id="green"></div>
            <div class="red item" id="red"></div>
            <div class="blue item" id="blue"></div>
            <div class="green item" id="green"></div>
        </div>
        <div class="title">
            Christmas Lights
        </div>
        <div class="btn">
            <div onclick="onLight()">ON</div>
            <div onclick="offLight()">OFF</div>
        </div>
    </div>


</body>

</html>

<script src="index.js"></script>

CSS

body {
    
    
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}

.red {
    
    
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    animation: glow-red 1s infinite;
}

.blue {
    
    
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    animation: glow-blue 1s infinite;
    animation-delay: 0.3s;
}

.green {
    
    
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    animation: glow-green 1s infinite;
    animation-delay: 0.6s;
}

.main {
    
    
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    justify-content: center;
    align-items: center;
}

.items {
    
    
    display: flex;
}

.title {
    
    
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 30px #fff;
}

.btn {
    
    
    margin-top: 20px;
    display: flex;
}

.btn div {
    
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    background-color: #9e9e9e;
    color: #fff;
    margin: 10px;
    cursor: pointer;
}

.item {
    
    
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    margin: 20px;
}

@keyframes glow-red {
    
    

    /* 开头和结尾都亮 */
    0%,
    100% {
    
    
        /* 放大阴影相当于亮了 */
        box-shadow: 0 0 20px 5px #fbc2eb;
    }

    50% {
    
    
        box-shadow: none;
    }
}

@keyframes glow-blue {
    
    

    /* 开头和结尾都亮 */
    0%,
    100% {
    
    
        /* 放大阴影相当于亮了 */
        box-shadow: 0 0 20px 5px #89f7fe;
    }

    50% {
    
    
        box-shadow: none;
    }
}

@keyframes glow-green {
    
    

    /* 开头和结尾都亮 */
    0%,
    100% {
    
    
        /* 放大阴影相当于亮了 */
        box-shadow: 0 0 20px 5px #96e6a1;
    }

    50% {
    
    
        box-shadow: none;
    }
}

js

const item = document.getElementsByClassName('item')
const len = item.length


function onLight() {
    
    
    for (let i = 0; i < len; i++) {
    
    
        item[i].removeAttribute('style')
        // item[i].style.animationPlayState = 'running'
    }
}

function offLight() {
    
    
    for (let i = 0; i < len; i++) {
    
    
        item[i].style.animation = 'none'
        item[i].style.background = '#9e9e9e'
    }
}

referencia

Luces navideñas CSS puro (codepen.io)

Luces navideñas (codepen.io)

Introducción al uso de la animación en la tecnología de animación CSS – WEB hacker (webhek.com)

Herramienta SCSS a CSS en línea - UU Online Tools (uutool.cn)

Fondo degradado gratuito Estilo CSS3 | oulu.me

código 1

Luces navideñas CSS puro (codepen.io)

HTML:

<!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="style.css">
</head>
<ul class="lightrope">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</html>

css: convierte el scss del enlace a css.

body {
    
    
    background: #000;
}

.lightrope {
    
    
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.lightrope li {
    
    
    position: relative;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    animation-name: flash-1;
    animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
    
    
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
    animation-name: flash-2;
    animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
    
    
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    animation-name: flash-3;
    animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
    
    
    animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
    
    
    animation-duration: 1.4s;
}

.lightrope li:before {
    
    
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 9.3333333333px;
    border-radius: 3px;
    top: -4.6666666667px;
    left: 1px;
}

.lightrope li:after {
    
    
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.lightrope li:last-child:after {
    
    
    content: none;
}

.lightrope li:first-child {
    
    
    margin-left: -40px;
}

@keyframes flash-1 {
    
    

    0%,
    100% {
    
    
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }

    50% {
    
    
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-2 {
    
    

    0%,
    100% {
    
    
        background: aqua;
        box-shadow: 0px 4.6666666667px 24px 3px aqua;
    }

    50% {
    
    
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@keyframes flash-3 {
    
    

    0%,
    100% {
    
    
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }

    50% {
    
    
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

código 2

Luces navideñas (codepen.io)

Hay código en el enlace.