Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

14 September 2024

Animazione della linea del battito cardiaco

13 October 2024

<!doctype html>
<html lang="en">
<head>
  <style>
    body{
        margin: 0;
        padding: 0;
        background: #262626;
    }
    ul{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        margin: 0;
        padding: 0;
        display: flex;
    }
    ul li{
        list-style: none;
        font-family: arial;
        font-size: 3em;
        letter-spacing: 15px;
        text-shadow: none;
        animation: animate 1s infinite linear;
    }
    @keyframes animate{
        0%{
            color: #484848;
            text-shadow: none;
        }
        18%{
            color:#484848;
            text-shadow: none;
        }
        20%{
            color: rgb(57, 255, 7);
            text-shadow: 0 0 7px #00d5ff ,0 0 20px #f6ff00;
        }
        30%{
            color: #484848;
            text-shadow: none;
        }
        35%{
            color: rgb(0, 255, 0);
            text-shadow:0 0 7px #00ccff ,0 0 20px #f6ff00;
        }
        70%{
            color:#484848;
            text-shadow: none;
        }
        85%{
            color: rgb(1, 255, 1);
            text-shadow: 0 0 7px #00ffe1 ,0 0 20px #f6ff00;
        }
        90%{
            color: #484848;
            text-shadow: none;
        }
        100%{
            color:#484848;
            text-shadow: none;
        }
    }
    ul li:nth-child(1){
        animation-delay: .2s;
    }
    ul li:nth-child(2){
        animation-delay: .4s;
    }
    ul li:nth-child(3){
        animation-delay: .6s;
    }
    ul li:nth-child(4){
        animation-delay: .8s;
    }
    ul li:nth-child(5){
        animation-delay: .1s;
    }
    ul li:nth-child(6){
        animation-delay: .1.2s;
    }
    ul li:nth-child(7){
        animation-delay: .1.4s;
    }
    ul li:nth-child(8){
        animation-delay: .1.6s;
    }
    ul li:nth-child(9){
        animation-delay: .1.8s;
    }
    ul li:nth-child(10){
        animation-delay: .2s;
    }
    ul li:nth-child(11){
        animation-delay: .2.2s;
    }
    ul li:nth-child(12){
        animation-delay: .2.4s;
    }
    ul li:nth-child(13){
        animation-delay: .2.6s;
    }
  </style>  
</head>
<body>
    <ul>
        <li>R</li>
        <li>U</li>
        <li>S</li>
        <li>N</li>
        <li>A</li>
        <li>K</li>
        <li>_</li>
        <li>L</li>
        <li>I</li>
        <li>L</li>
        <li>I</li>
        <li>A</li>
        <li>N</li>
    </ul>
</body>
</html>

Consigliato

Animazione della linea del battito cardiaco

forma da

applicazione meteo

HTML

CSS

JS

Consigliato

Animazione della linea del battito cardiaco

forma da

applicazione meteo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS