点击查看html编辑器说明文档

第六天edit icon

|
|
Fork(复制)
|
|
作者:
lynn-ssk

👉 新版编辑器已上线,点击进行体验吧!

BUG反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <!DOCTYPE html>
<html lang="PT-BR">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Milena Carecho">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <title>CSS animatin</title>
</head>
<body>
<ul>
    <li>D</li>
    <li>E</li>
    <li>S</li>
    <li>A</li>
    <li>F</li>
    <li>I</li>
    <li>O</li>
    <li>♡</li>
    <li>C</li>
    <li>S</li>
    <li>S</li>

</ul>
</body>
</html>
        
</body>
CSS
格式化
            
            body
{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Lato', sans-serif;
    background-color: #272727;
}
ul
{
    margin: 0;
    padding: 0;
    display: flex;
}
ul li 
{
    list-style: none;
    color: #484848;
    font-size: 88px;
    letter-spacing: 15px;
    animation: lighting 1.4s linear infinite;
}
@keyframes lighting 
{
    0% {
        color: #484848;
        text-shadow: none;
    }

    90% {
        color: #484848;
        text-shadow: none;
    }

    100% {
        color: #fff900;
        text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
    }
}

ul li:nth-child(1) 
{
    animation-delay: 0
}

ul li:nth-child(2) 
{
    animation-delay: 0.1s
}

ul li:nth-child(3) 
{
    animation-delay: 0.2s
}

ul li:nth-child(4) 
{
    animation-delay: 0.3s
}

ul li:nth-child(5) 
{
    animation-delay: 0.4s
}

ul li:nth-child(6) 
{
    animation-delay: 0.5s
}

ul li:nth-child(7) 
{
    animation-delay: 0.6s
}

ul li:nth-child(8) 
{
    animation-delay: 0.7s
}
ul li:nth-child(9) 
{
    animation-delay: 0.8s
}
ul li:nth-child(10) 
{
    animation-delay: 0.9s
}
ul li:nth-child(11) 
{
    animation-delay: 1s
}
        
JS
格式化
            
            
        
预览
控制台