01 色块滑动

效果演示

当鼠标悬停在按钮上时，按钮会显示一个黑色背景，并且背景上会滑动出现文字 "若冰说CSS"。按钮的样式包括黑色边框、黑色文字，以及指定的字体大小和粗细。这个效果可以用于文章摘要中的按钮，以吸引读者的注意力并增加交互性。鼠标悬停时的动画效果使按钮更加生动有趣，同时改变文字颜色为白色，增强了按钮的可读性。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./01-色块滑动.css">
    <title>01-色块滑动</title>
</head>

<body>
    <a href="#">Hover Me</a>
</body>

</html>

body {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
    color: black;
    font-family: fans-serif;
    font-size: 40px;
    font-weight: bold;
    border: 2px solid black;
    padding: 40px 80px;
    position: relative;
    overflow: hidden;
}
a:before {
    content: "若冰说CSS";
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    transform: translate(-100%);
    transition: all 1s;
    z-index: -1;
}
a:hover:before {
    transform: translateX(0);
}
a:hover {
    color: white;
}

实现思路拆分

body {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

设置 body 元素的高度为 400 像素，并使用 flexbox 居中显示 body 元素的内容。

a {
    text-decoration: none;
    color: black;
    font-family: fans-serif;
    font-size: 40px;
    font-weight: bold;
    border: 2px solid black;
    padding: 40px 80px;
    position: relative;
    overflow: hidden;
}`

设置链接元素的样式：
- 移除默认的下划线装饰。
- 设置文字颜色为黑色。
- 设置字体为 "fans-serif"。
- 设置字体大小为 40 像素。
- 设置字体加粗。
- 添加黑色边框，边框宽度为 2 像素。
- 设置内边距为 40 像素的上下边距和 80 像素的左右边距。
- 设置为相对定位。
- 隐藏溢出的内容。

a:before {
    content: "若冰说CSS";
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    transform: translate(-100%);
    transition: all 1s;
    z-index: -1;
}

为链接元素添加伪元素 ::before：
- 设置伪元素的内容为 "若冰说CSS"。
- 设置伪元素的字体大小为 20 像素。
- 设置伪元素的绝对定位，相对于链接元素。
- 将伪元素的左上角定位在链接元素的左上角。
- 设置伪元素的高度和宽度为链接元素的 100%。
- 设置伪元素的背景颜色为黑色。
- 使用 translate(-100%) 变换将伪元素向左移动其自身宽度的 100%。
- 添加所有属性的过渡效果，过渡时间为 1 秒。
- 将伪元素的层级设置为 -1，将其放置在链接元素的下方。

a:hover:before {
    transform: translateX(0);
}

当鼠标悬停在链接元素上时，将伪元素的 transform 属性设置为 translateX(0) ，使伪元素回到原始位置，显示黑色背景。

a:hover {
    color: white;
}

当鼠标悬停在链接元素上时，将链接元素的文字颜色设置为白色。

本文由mdnice多平台发布

01 色块滑动

效果演示

Code

实现思路拆分

若冰说

引用和评论

扩散登录表单动画

大模型时代，后端程序员如何避免被AI卷死？

AI编程神器巅峰对决！Cursor、Windsurf、Trae谁将取代Copilot？实测结果颠覆认知！

国内版的AI编程工具Trea，真的来了！免费使用DeepSeek！

揭秘Chrome DevTools：从原理到自定义调试工具

大数据从业者必知必会的Hive SQL调优技巧

一个后端工程师对前端云 Vercel 的体验和探索