前言：
如今你们对“csslinkicon”都比较讲究，小伙伴们都需要剖析一些“csslinkicon”的相关知识。那么小编同时在网摘上网罗了一些关于“csslinkicon””的相关文章，希望姐妹们能喜欢，咱们快快来了解一下吧！前面
本文将详细介绍如何使用 HTML 和 CSS 制作创意图标悬停效果。这个效果主要表现为，最初是一排具有 不同颜色 与 四角括号 的图标展示，当鼠标悬浮在任一图标上时，四角括号消失或出现边框，图标上移底部出现相应文字信息，并且二者具有模糊阴影。当然一整个过程是有设置过渡效果的。独特的图标 ❤️⚙️ 交互体验为应用添加更丰富的交互性和吸引力。
构建 HTML
在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="; /> <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来制作一个图标和文本的动画，从而理解掌握和应用这个效果。图标及名称以动画形式显示出来，加深了用户对图标的识别和理解。或者甚至你也可以根据自己的需求进行调整，进一步改善和扩展这个效果。
「全是技巧」赋予图标动感十足的悬停交互效果
原文链接：
标签： #csslinkicon
