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

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

代码语言：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-fil.........完整代码请登录后点击上方下载按钮下载查看