在HTML构造中，通过<ul>和<li>标签创建了一个无序列表。每个列表项定义了自定义变量--clr用来设置图标和笔墨的颜色。
并且每个li都包含一个<a>锚链接。而在每个锚链接中，利用了<i>标签来显示Font Awesome图标，同时还包含了一个<span>标签用于显示相应的图标名称。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Creative Icon Hover Effects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" /> <link rel="stylesheet" href="./index.css"></head><body> <ul> <li style="--clr: #2483ff"> <a href="#"> <i class="fa-solid fa-house"></i> <span>Home</span> </a> </li> <li style="--clr: #fff200"> <a href="#"> <i class="fa-solid fa-user"></i> <span>Profile</span> </a> </li> <li style="--clr: #ff253f"> <a href="#"> <i class="fa-solid fa-heart"></i> <span>Links</span> </a> </li> <li style="--clr: #25d366"> <a href="#"> <i class="fa-solid fa-gear"></i> <span>Settings</span> </a> </li> <li style="--clr: #f32ec8"> <a href="#"> <i class="fa-solid fa-magnifying-glass"></i> <span>Search</span> </a> </li> </ul></body></html>添加 CSS
在CSS样式中，设置了一些基本的全局样式，重置默认样式、内容水平垂直居中布局、背景字体颜色等不做过多赘述。
{ margin: 0; padding: 0; box-sizing: border-box;}:root { --bg: #222;}li { list-style: none; }a { text-decoration: none; color: #555; }body { min-height: 100vh; background-color: var(--bg); display: flex; justify-content: center; align-items: center;}/ ... /实现
先说实现思路，实在很大略。没有特性，全是技巧：
利用li::before伪元素创建相对付li定位四个方向设置一定间隔的矩形，通过添加多个阴影扩散效果，形成了一个阴影矩形。鼠标悬停li时阴影矩形变大。利用li::after伪元素创建相对付li定位并且大小同等，背景色与网页同等，把稳这里旋转了45deg，这样就把::before四角漏出来了表现出了四角括号。鼠标悬停li时。扩大::after的大小不再旋转，此时会挡住::before的阴影，不过又通过伪类选择偶数兄弟元素重置了大小，以是会展示边框。ul { padding-inline: 50px; display: flex; flex-wrap: wrap; gap: 50px;}ul li { position: relative; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer;}ul li::before { content: ""; position: absolute; inset: 30px; / 模糊半径：10，20，22 / box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr); transition: 0.5s;}ul li:hover::before { inset: 15px;}ul li::after { content: ""; position: absolute; inset: 0; background-color: var(--bg); /错位展示::before四角阴影 / transform: rotate(45deg); transition: 0.5s;}ul li:hover::after { /复原挡住::before阴影 / transform: rotate(0deg); inset: -10px;}ul li:nth-child(even):hover::after { /偶数展示::before阴影 / inset: 0px;}/ ... /接着，通过一些样式，可以实现图标在悬停时的缩放、阴影、旋转等动画效果，同时也为图标的名称添加了透明度和位移变换，使得笔墨在悬停时以动画形式显示出来。锚点元素设置层级确保在伪元素的上方：i元素当悬浮是垂直上方平移，也便是-40%，和笔墨有一定间隔。span元素开启定位后，垂直下方平移200%，透明度不可见，缩放元素为0。当悬浮时，透明度可见，缩放元素为原来大小以及上移100%的位置。
然后便是悬浮时，通过filter属性沿二者的轮廓天生阴影效果。
ul li a { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center;}ul li a i { font-size: 2em; color: var(--clr); transition: transform 0.5s;}ul li:hover a i { transform: translateY(-40%);}ul li a span { position: absolute; color: var(--clr); font-family: consolas; opacity: 0; transform: scale(0) translateY(200%); transition: opacity 0.5s, transform 0.5s;}ul li:hover a span { opacity: 1; transform: scale(1) translateY(100%);}ul li:hover a i,ul li:hover a span { filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));}末了
通过本篇文章的详细先容，相信能够帮助你更好地利用CSS来制作一个图标和文本的动画，从而理解节制和运用这个效果。图标及名称以动画形式显示出来，加深了用户对图标的识别和理解。或者乃至你也可以根据自己的需求进行调度，进一步改进和扩展这个效果。
「全是技巧」授予图标动感十足的悬停交互效果原文链接：https://juejin.cn/post/7306777236329037887