css+bootstrap-icons实现悬浮点击图标按钮反馈效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css+bootstrap-icons实现悬浮点击图标按钮反馈效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Sarina&display=swap" rel="stylesheet">

    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css'>

    <style>
        *:not(head),
        *::before,
        *::after {
                all: unset;
                box-sizing: border-box;
        }
        
        :root {
                --gradient: linear-gradient(
                        285deg,
                        #ffff4a,
                        #d5ff48,
                        #aaff45,
                        #7dff43,
                        #50ff41,
                        #3eff5b,
                        #3cff86,
                        #39ffb2,
                        #37ffdf,
                        #35f1ff,
                        #32c1ff,
                        #3091ff
                );
        }
        
        body,
        html {
                -webkit-text-size-adjust: 100%;
                -webkit-tap-highlight-color: transparent;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
                margin: 0;
                padding: 0;
                overflow: hidden;
        }
        
        body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100vw;
                height: 100vh;
                background: #222;
        }
        
        aside {
                position: absolute;
                bottom: 5px;
                color: #777;
                font-family: "Sarina", cursive;
                font-size: 10pt;
        }
        
        body > div {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 85%;
                height: 100%;
                background: var(--gradient);
                background-position: center !important;
                background-clip: text;
                -webkit-background-clip: text;
                animation: gradient-bg 7s linear infinite;
        }
        
        @keyframes gradient-bg {
                0% {
                        background-size: 20%;
                }
                50% {
                        background-size: 120%;
                }
                100% {
                        background-size: 20%;
                }
        }
        
        body > div > div {
                width: 100%;
                height: 100%;
                max-height: 360px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                overflow: hidden;
        }
        
        body > div > div > a {
                padding: 20px;
                margin: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: auto;
                height: auto;
                border-radius: 0px;
                background: transparent;
        }
        
        body > div > div > a i {
                font-size: 30pt;
                line-height: 30pt;
                -webkit-text-fill-color: transparent;
                color: transparent;
                outline: 1px solid transparent;
                outline-offset: 0px;
        }
        
        body > div > div > a:hover,
        body > div > div > a:focus {
                background: var(--gradient);
                background-size: 150%;
                background-position: center;
                cursor: pointer;
                border-radius: 20px;
        }
        
        body > div > div > a:active {
                transform: scale(0.95);
                box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px;
        }
        
        body > div > div > a:hover i,
        body > div > div > a:focus i {
                -webkit-text-fill-color: unset;
                color: black;
                outline: 2px solid black;
                outline-offset: 10px;
                border-radius: 5px;
                text-shadow: 2px 2px 0px white;
                animation: floaty 3s ease-in-out infinite;
                animation-direction: alternate;
                transition: 0.15s linear;
                transition-property: outline, outline-offset;
        }
        
        @keyframes floaty {
                0% {
                        transform: translateY(0px);
                }
                25% {
                        transform: translateY(-2px);
                }
                50% {
                        transform: translateY(2px);
                }
                75% {
                        transform: translateY(-2px);
                }
                100% {
                        transform: translateY(0px);
                }
        }
    </style>



</head>

<body>
    <div>
        <div>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-radioactive"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-yin-yang"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-device-hdd-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-fan"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-nintendo-switch"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-life-preserver"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-xbox"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class=".........完整代码请登录后点击上方下载按钮下载查看