zoukankan      html  css  js  c++  java
  • CSS实现按钮霓虹效果

    实现代码

    .light-btn {
        text-decoration: none;
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
         400px;
        height: 100px;
        line-height: 100px;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        border-radius: 50px;
        z-index: 1;
    }
    
        .light-btn:hover::before,
        .light-btn:hover {
            animation: sun 2s linear infinite;
        }
    
        .light-btn::before {
            content: '';
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 50px;
            filter: blur(10px);
            z-index: -1;
            animation: sun 12s linear infinite;
        }
    
    @keyframes sun {
        100% {
            background-position: -400% 0;
        }
    }
    
  • 相关阅读:
    8.20Java之反射机制的基本概念
    8.18Go语言之字符串
    Debug
    Feign
    Nacos
    SpringCloud Alibaba
    SpringCloud
    Maven
    Maven
    Jenkins
  • 原文地址:https://www.cnblogs.com/muphalem/p/13619078.html
Copyright © 2011-2022 走看看