css3-炫酷发光倒影按钮

css3-炫酷发光倒影按钮

文字转大写

 text-transform: uppercase;

倒影

 -webkit-box-reflect: below 1px linear-gradient(transparent,#0005);

background-image: linear-gradient(270deg,transparent,#03e9f4);

box-shadow: 0 0 5px #03e9f4,

            0 0 5px #03e9f4,

            0 0 25px #03e9f4,

            0 0 50px #03e9f4,

            0 0 50px #03e9f4,

            0 0 200px #03e9f4,

            0 0 500px #03e9f4;

animation: animateSpan3 1s linear infinite;

0.2s时间延迟

animation-delay: 0.5s;

filter 滤镜的 hue-rotate 色调旋转

filter: hue-rotate(290deg);

html:

    <a href="javascript:;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        注册账号
    </a>
    <a href="javascript:;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        下载游戏
    </a>
    <a href="javascript:;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        进入官网
    </a>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            font-style: normal;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #050801;
            overflow: hidden;
            display: grid;
            justify-content: center;
            align-content: center;
            flex-direction: column;
        }
        a{
             position: relative;
             display: inline-block;
             padding: 25px 30px;
             margin: 40px 0;
             color: #03e9f4;
             text-decoration: none;
             /* 文字转大写 */
             text-transform: uppercase;
             transition: 0.5s;
             /* 字母间距 */
            letter-spacing: 4px;
            overflow: hidden;
            /* 倒影 */
            -webkit-box-reflect: below 1px linear-gradient(transparent,#0005);
        }
        a:hover{
            background-color: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
            0 0 5px #03e9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4,
            0 0 500px #03e9f4;
        }
        a:nth-child(2){
            /* filter 滤镜的 hue-rotate 色调旋转 */
            filter: hue-rotate(290deg);
        }
        a:nth-child(3){
            filter: hue-rotate(110deg);
        }

        a span{
            position: absolute;
        }
        a span:nth-child(1){
            width: 100%;
            height: 2px;
            top: 0;
            left: -100%;
            background-image: linear-gradient(90deg,transparent,#03e9f4);
            animation: animateSpan1 1s linear infinite;
        }
        @keyframes animateSpan1 {
            0%{
                left:-100%;
            }
            50%,100%{
                left:100%;
            }
        }

        a span:nth-child(2){
            width: 2px;
            height: 100%;
            top: -100%;
            right: 0;
            background-image: linear-gradient(180deg,transparent,#03e9f4);
            animation: animateSpan2 1s linear infinite;
            /* 0.2s时间延迟 */
            animation-delay: 0.2s;
        }
        @keyframes animateSpan2 {
            0%{
                top:-100%;
            }
            50%,100%{
                top:100%;
            }
        }

        a span:nth-child(3){
            width: 100%;
            height: 2px;
            bottom: 0;
            right: -100%;
            background-image: linear-gradient(270deg,transparent,#03e9f4);
            animation: animateSpan3 1s linear infinite;
            /* 0.2s时间延迟 */
            animation-delay: 0.5s;
        }
        @keyframes animateSpan3 {
            0%{
                right:-100%;
            }
            50%,100%{
                right:100%;
            }
        }

        a span:nth-child(4){
            width: 2px;
            height: 100%;
            bottom: -100%;
            left: 0;
            background-image: linear-gradient(360deg,transparent,#03e9f4);
            animation: animateSpan4 1s linear infinite;
            /* 0.2s时间延迟 */
            animation-delay: 0.75s;
        }
        @keyframes animateSpan4 {
            0%{
                bottom:-100%;
            }
            50%,100%{
                bottom:100%;
            }
        }
    </style>