有趣的CSS - 鼠标悬浮线条动态变化

鼠标悬浮线条动态变化

整体效果
核心代码
- html 代码：
- css 部分代码：
完整代码如下
- html 页面：
- css 样式：
- 页面渲染效果：

整体效果

这个链接悬浮效果主要用 css3 的 animation 属性配合 :hover 伪选择器来实现的。

此效果可以在文字链接、文字按钮等地方实现一个简单的鼠标交互效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码：

<a href="javascript:;"><span class="a-line"></span>Design
</a>

a 标签主体，包裹子元素 span 以及文字元素 Design 。

css 部分代码：

a{text-decoration: none;color: green;cursor: pointer;font-size: 34px;font-weight: bold;
}
.a-line{width: 0;height: 2px;display: block;margin-bottom: 6px;background-color: green;
}
a:hover .a-line{width: 100%;animation: move .5s ease;
}
@keyframes move{from{width: 0;}to{width: 100%;}
}

css 部分主要通过 :hover 伪选择器来设置 span 子元素样式，然后使用 animation 来实现 span 宽度变化。

完整代码如下

html 页面：

<!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="style.css"><title>鼠标悬浮线条动态变化</title></head><body><div class="app"><a href="javascript:;"><span class="a-line"></span>Design</a></div></body>
</html>

css 样式：

/** style.css **/
*{margin: 0;padding: 0;list-style: none;transition: .5s;
}
html,body{background-color: #fff;font-size: 14px;
}
.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
a{text-decoration: none;color: green;cursor: pointer;font-size: 34px;font-weight: bold;
}
.a-line{width: 0;height: 2px;display: block;margin-bottom: 6px;background-color: green;
}
a:hover .a-line{width: 100%;animation: move .5s ease;
}
@keyframes move{from{width: 0;}to{width: 100%;}
}