悬停动画提示效果CSS3实现
悬停效果的工具提示,是那种又轻巧又实用的小交互。鼠标一靠上去,蹦出来的提示框还能带点淡入淡出或滑动动画,看着就挺舒服的。你如果做的是信息密集型的界面,这招有用,信息藏着不乱,但点到就来,挺灵活。
提示内容可以直接写在
或者data-tooltip
里,不过想做出动画效果,光靠 HTML 肯定不够。要加点CSS
的动画,比如transition: opacity 0.3s ease-in-out
这种平滑过渡,就能做出挺自然的视觉反馈。
再配合:hover
伪类控制提示框显示,再简单不过。比如这样:
.tooltip:hover .tooltip-text {
opacity: 1;
transform: translateY(0);
}
嗯,要是你想再高级点,比如来个延迟显示、动态改内容,那就得上JavaScript
了。用addEventListener
监听mouseover
和mouseout
,还能做点自定义行为。
定位也得注意,别让提示框乱飞。用position: absolute
,再调调top
、left
这些,贴着目标元素就行。像下面这种就挺好:
.tooltip-text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
如果提示内容不是固定的,比如从接口拉的,那就直接用innerText
或者textContent
去填内容。配合缓存优化下,响应也快。
你可以看看这个压缩包texiao1013_1560680962
,里头应该有完整的代码结构。样式和脚本分得挺清楚的,照着改就能上手。
另外,还有几个参考链接也蛮不错的,像CSS3 悬停按钮动画和泡泡工具提示动画.zip都能给你启发。
如果你正好想在项目里搞点提示动画的效果,不妨研究下这个例子。样式简洁,逻辑清楚,适合直接套用或者改造升级。
下载地址
用户评论