如何创建这种优雅的链接效果？

编程问答 2022-07-22

问题描述

抱歉，在编写网站时，我是个新手。不要打我。

发现这个链接效果我喜欢： https://thenextweb.com/news/immortality-spaghetti-spaceship-inside-a-black-hole-time-travel?utm_source=digg

一个小的背景颜色作为链接的进一步指示，然后当您将鼠标悬停在背景上时垂直扩展。

花了大约 45 分钟查看源代码并试图找到他们使用的 CSS - 但因为我的麻烦没有找到。

有人知道如何复制吗？觉得不花哨很酷。

谢谢！ ;)

解决方法

它是用 box-shadow 完成的，你可以使用检查元素并模拟悬停效果来查看是什么制作了这个动画

enter image description here

现场演示：https://codepen.io/asd9i202314/pen/OJmvEJM

代码

body {
    font-family: sans-serif;
}

a {
    text-decoration: none;
    box-shadow: inset 0 -8px 0 0 rgb(102 0 153 / 10%);
    color: #660099;
    transition: all .5s ease;
}

a:hover {
    box-shadow: inset 0 -1.15em 0 rgb(102 0 255 / 10%)
}
<div>
    <p>Learning <a href="#">Css</a> is not too complex</p>  
</div>

hoverhrefhyperlink