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="bi bi-motherboard-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-dice-5-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-postage-heart-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-boombox-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-speaker-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-ethernet"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-boxes"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-safe-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-piggy-bank-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-speedometer"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-device-ssd-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-apple"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-arrow-through-heart-fill"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-hypnotize"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-watch"></i>
            </a>
            <a href="javascript:void(0);" title="icon button" rel="noopener">
                <i class="bi bi-dpad-fill"></i&g.........完整代码请登录后点击上方下载按钮下载查看