纯CSS3进行hover时显示带箭头和动画的tips效果 -优快云博客

本文介绍如何使用CSS实现鼠标悬停时显示隐藏内容的效果，包括制作三角形提示图标及平滑过渡动画。

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

由于sg没有关联获取它站文章的功能,把自己的原创博客给搬来给新手提供点简单教程.
效果图:当鼠标放在ps,ai上显示对应的内容.
图片描述

流程分析:鼠标移动显示提示,鼠标在父层(内有显示和隐藏层)时,隐藏层进行动画显示.区别于日常的hover,我们用尽量少的html和css代码达到理想的状态.
这里边有个很容易被带到沟里的一个小地方,经常有人问怎么做出三角形?其实那不过是个旋转了45°的正方形.

html:

<div class='box'>
<a href='' class='box_title'>滑动层</a>
<div class='box_content'>内容层</div>
</div>

css:

/*三角形*/
.box>.box_content:before {
    position: absolute;
    top: -4px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: -2px -2px 0 -1px #c4c4c4;
    content: "";
    transform: rotate(45deg)
}
/*自适应居中*/
.box>.box_content{
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 3;
    visibility: hidden;
    padding: 10px;
    height: auto;
    min-height: 12px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    color: #6f6f6f;
    font-size: 12px;
    opacity: 0;
    transition: visibility 0s linear .2s,opacity .2s linear 0s;
    transform: translateX(-50%);
    backface-visibility: visible!important;
    backface-visibility: hidden;
}
/*hover效果*/
.box:hover>.box_content{
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s,opacity .4s linear;animation: fade-top;animation-duration:.4s;-webkit-animation:fade-top .4s;}
/*hover动画*/
@keyframes fade-top{0%{opacity:.1;top:120%}100%{opacity:1;top:100%}}@-webkit-keyframes fade-top{0%{opacity:.1;top:120%}100%{opacity:1;top:100%}}

在ff,chrome,ie11测没有问题,其余支持css3浏览器没时间测.欢迎反馈.
下一篇有空再简介一下jquery相关.