CSS 3.0实现炫酷发光特效

越陌度阡

发布于 2020-11-26 11:28:25

1.8K0

发布于 2020-11-26 11:28:25

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

给大家分享一个用CSS 3.0实现的炫酷发光特效，效果如下：

以下是代码实现，欢迎大家复制、粘贴和收藏。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 3.0实现炫酷发光特效</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #000;
            }

            .loader {
                position: relative;
                width: 200px;
                height: 200px;
                overflow: hidden;
                -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
            }

            .loader:hover {
                background: #03e9f4;
                box-shadow: 0 0 5px #03e9f4,
                    0 0 25px #03e9f4,
                    0 0 50px #03e9f4,
                    0 0 200px #03e9f4;
            }

            .loader span {
                position: absolute;
                display: block;
            }

            .loader span:nth-child(1) {
                top: 0;
                left: 0;
                width: 100%;
                height: 40px;
                background: linear-gradient(90deg, transparent, #03e9f4);
                animation: animate1 1s linear infinite;
                animation-delay: 0;
            }

            @keyframes animate1 {
                0% {
                    left: -100%;
                }

                100% {
                    left: 100%;
                }
            }

            .loader span:nth-child(3) {
                bottom: 0;
                left: -100%;
                width: 100%;
                height: 40px;
                background: linear-gradient(270deg, transparent, #03e9f4);
                animation: animate3 1s linear infinite;
                animation-delay: 0;
            }

            @keyframes animate3 {
                0% {
                    left: 100%;
                }

                100% {
                    left: -100%;
                }
            }

            @keyframes animate1 {
                0% {
                    left: -100%;
                }

                100% {
                    left: 100%;
                }
            }

            .loader span:nth-child(2) {
                right: 0;
                top: -100%;
                width: 40px;
                height: 100%;
                background: linear-gradient(180deg, transparent, #03e9f4);
                animation: animate2 1s linear infinite;
                animation-delay: 0.5;
            }

            @keyframes animate2 {
                0% {
                    top: -100%;
                }

                100% {
                    top: 100%;
                }
            }

            .loader span:nth-child(4) {
                left: 0;
                top: 100%;
                width: 40px;
                height: 100%;
                background: linear-gradient(0deg, transparent, #03e9f4);
                animation: animate4 1s linear infinite;
                animation-delay: 0.5s;
            }

            @keyframes animate4 {
                0% {
                    top: 100%;
                }

                100% {
                    top: -100%;
                }
            }
        </style>
    </head>

    <body>
        <div class="loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/10/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

特效

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

特效

登录后参与评论

0 条评论

热度

CSS 3.0实现炫酷发光特效

CSS 3.0实现炫酷发光特效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐