鼠标悬浮线条动态变化
- 整体效果
- 核心代码
- 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%;}
}
页面渲染效果：
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
[1] 原文阅读
我是 Just，这里是「设计师工作日常」，求点赞求关注！skr~