CSS Loading  文字動態

使用 css animate 製作 Loading 文字動態效果

使用 css動畫﹙css animate﹚製作 Loading 文字動態效果

效果演示:

 

HTML:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Loading Page 預載文字動畫</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200802">
    <div class="container loader">
        <span>L</span>
        <span>O</span>
        <span>A</span>
        <span>D</span>
        <span>I</span>
        <span>N</span>
        <span>G</span>
    </div>
</body>

</html>

 

CSS:

#dailycss_20200802 {
    background-color: #2b2b2b;
    margin: 0;
    padding: 0;
}

#dailycss_20200802 .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#dailycss_20200802 .loader span {
    color: #fff;
    font-family: Arial;
    font-size: 24px;
    color: rgba(255, 255, 255, .1);
    display: inline-block;
    transition: all .5s;
    animation: animate_dailycss_20200802 2s infinite;
    -webkit-animation: animate_dailycss_20200802 2s infinite;
}

#dailycss_20200802 .loader span:nth-child(1) {
    animation-delay: .1s;
}

#dailycss_20200802 .loader span:nth-child(2) {
    animation-delay: .2s;
}

#dailycss_20200802 .loader span:nth-child(3) {
    animation-delay: .3s;
}

#dailycss_20200802 .loader span:nth-child(4) {
    animation-delay: .4s;
}

#dailycss_20200802 .loader span:nth-child(5) {
    animation-delay: .5s;
}

#dailycss_20200802 .loader span:nth-child(6) {
    animation-delay: .6s;
}

#dailycss_20200802 .loader span:nth-child(7) {
    animation-delay: .7s;
}

@keyframes animate_dailycss_20200802 {
    0% {
        color: rgba(255, 255, 255, .1);
        transform: translateY(0);
        margin-left: 0;
    }

    25% {
        color: yellow;
        yellowtransform: translateY(-15px);
        margin-left: 10px;
        text-shadow: 0 15px 5px rgba(0, 0, 0, 1);
    }

    100% {
        color: rgba(255, 255, 255, .1);
        transform: translateY(0);
    }
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

留言支持 Markdown 格式





關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸
最新PO文
Go to Blog
文章分類
Social Accounts