亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3.0實現(xiàn)霓虹燈按鈕動畫特效的示例代碼

  發(fā)布時間：2021-01-12 16:21:30   作者：aiguangyuan   我要評論
這篇文章主要介紹了CSS3.0實現(xiàn)霓虹燈按鈕動畫特效的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天給大家分享一個用CSS 3.0實現(xiàn)的霓虹燈按鈕動畫特效，效果如下：

以下是代碼實現(xiàn)，歡迎大家復(fù)制粘貼和收藏。

<!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實現(xiàn)霓虹燈按鈕動畫特效</title>
    <style>
        * {
            font-family: '微軟雅黑', sans-serif;
            box-sizing: border-box;
        }
 
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #050801;
        }
 
        a {
            position: relative;
            display: inline-block;
            padding: 25px 30px;
            margin: 0 50px;
            color: #03e9f4;
            text-decoration: none;
            overflow: hidden;
            transition: 0.5;
            letter-spacing: 4px;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }
 
        a:nth-child(1) {
            filter: hue-rotate(290deg);
        }
 
        a:nth-child(3) {
            filter: hue-rotate(110deg);
        }
 
        a:hover {
            background: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
        }
 
        a span {
            position: absolute;
            display: block;
        }
 
        a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: animate1 1s linear infinite;
        }
 
        @keyframes animate1 {
            0% {
                left: -100%;
            }
 
            50%,
            100% {
                left: 100%;
            }
        }
 
        a span:nth-child(2) {
            top: 0;
            right: 0;
            height: 100%;
            width: 2px;
            background: linear-gradient(92deg, transparent, #03e9f4);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }
 
        @keyframes animate2 {
            0% {
                top: -100%;
            }
 
            50%,
            100% {
                top: 100%;
            }
        }
 
        a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            height: 2px;
            width: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: animate3 1s linear infinite;
            animation-delay: 0.5s;
        }
 
        @keyframes animate3 {
            0% {
                right: -100%;
            }
 
            50%,
            100% {
                right: 100%;
            }
        }
 
        a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }
 
        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
 
            50%,
            100% {
                bottom: 100%;
            }
        }
    </style>
</head>
 
<body>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
</body>
 
</html>

到此這篇關(guān)于CSS3.0實現(xiàn)霓虹燈按鈕動畫特效的示例代碼的文章就介紹到這了,更多相關(guān)CSS霓虹燈按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 純CSS實現(xiàn)酷炫的霓虹燈效果(附demo)

    這篇文章主要介紹了純CSS實現(xiàn)酷炫的霓虹燈效果(附demo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2021-04-13

最新評論