css实现一个炫酷动画loading(三)

最新推荐文章于 2024-07-24 10:22:02 发布

进阶的巨人001

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量824

点赞数 5

文章标签： css 前端 loading

本文链接：https://blog.csdn.net/weixin_45389051/article/details/139348526

版权

在这里插入图片描述
html

<div class="loader">
    <div data-glitch="Loading..." class="glitch">Loading...</div>
</div>

css

<style>
    body {
        background-color: #000;
    }

    .glitch {
        margin: 500px;
        position: relative;
        font-size: 25px;
        font-weight: 700;
        line-height: 1.2;
        color: #fff;
        letter-spacing: 5px;
        z-index: 1;
        animation: shift 1s ease-in-out infinite alternate;
    }

    .glitch:before,
    .glitch:after {
        display: block;
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;
    }

    .glitch:before {
        animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        color: #8b00ff;
        z-index: -1;
    }

    .glitch:after {
        animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        color: #00e571;
        z-index: -2;
    }

    @keyframes glitch {
        0% {
            transform: translate(0);
        }

        20% {
            transform: translate(-3px, 3px);
        }

        40% {
            transform: translate(-3px, -3px);
        }

        60% {
            transform: translate(3px, 3px);
        }

        80% {
            transform: translate(3px, -3px);
        }

        to {
            transform: translate(0);
        }
    }

    @keyframes shift {

        0%,
        40%,
        44%,
        58%,
        61%,
        65%,
        69%,
        73%,
        100% {
            transform: skewX(0deg);
        }

        41% {
            transform: skewX(10deg);
        }

        42% {
            transform: skewX(-10deg);
        }

        59% {
            transform: skewX(40deg) skewY(10deg);
        }

        60% {
            transform: skewX(-40deg) skewY(-10deg);
        }

        63% {
            transform: skewX(10deg) skewY(-5deg);
        }

        70% {
            transform: skewX(-50deg) skewY(-20deg);
        }

        71% {
            transform: skewX(10deg) skewY(-10deg);
        }
    }
</style>