creativeLink（13）

原创于 2018-10-15 22:05:42 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS hover效果增强网站交互性的设计方法。通过在链接标签上设置:before伪元素并利用text-shadow属性，实现了鼠标悬停时显示特殊效果的小白点变为三个点的视觉变化。这种设计不仅提升了用户体验，还展示了CSS的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没hover之前：

hover之后：

我们的设计思想是将标签的before设置成那一个小白点，hover的时候利用text-shadow设置成三个点

 <section class="thirteenthLink">
            <nav class="effect13">
                <a href="">beleaguer</a>
                <a href="">lassitude</a>
                <a href="">murmurous</a>
                <a href="">palimpsest</a>
                <a href="">assemblage</a>
            </nav>
        </section>

.thirteenthLink{
    background:#f19f0f; 
}
.thirteenthLink .effect13 a{
    transition: color 0.3s;
}
.thirteenthLink .effect13 a::before{
    content: "•";
    position: absolute;
    top: 100%;
    left: 50%;
    color: transparent;
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    transform: translateX(-50%);
    transition: text-shadow 0.3s,color 0.3s;
}
.thirteenthLink .effect13 a:hover::before{
    color: #fff;
    text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.thirteenthLink .effect13 a:hover{
    color:#ba7700;
}

text-shadow设置x轴的两个方向上的两个，距离10px