CSS3实现Bootstrap的tooltip动画提示效果

这几天做项目,经常用到bootstrap中的tooltip,他一插件的形式在项目中出现,样式改起来比较麻烦,索性自己做了个玩玩。

Demo来源与网上的教程,自己琢磨改进

Html如下

<!DOCTYPE html>
<html>
<head>
    <title>tooltip</title>
    <!-- 让IE采用最新的渲染模式 -->
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <!-- 移动端的页面宽度等于设备宽度,缩放比为1 -->
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav">
    <ul>
        <li>
            <a href="#"class="tooltip tooltip-effect-1" >Home
            <span class="tooltip-content"><i class="fa fa-home fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-2" >About me
            <span class="tooltip-content"><i class="fa fa-user fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-3" >Photography
            <span class="tooltip-content"><i class="fa fa-camera-retro fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-4" >Work
            <span class="tooltip-content"><i class="fa fa-briefcase fa-fw"></i></span>
            </a>
        </li>
        <li>
            <a href="#"class="tooltip tooltip-effect-5" >Contact
            <span class="tooltip-content"><i class="fa fa-envelope fa-fw"></i></span>
            </a>
        </li>
    </ul>
</div>
</body>
</html>


Css代码如下

html  {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -o-text-size-adjust:none;
    text-size-adjust:none;
}
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background:#47c9af;
    color: #74777b;
    font-weight: 300;
    font-size: 1.5em;
    font-family: "Raleway","Arail";
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

a:link,a:visited,a:focus{
    text-decoration: none;
    outline: none;
}
*,*:after,*:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
}
*:after,*:before {
    display: block;
    content: "";
}
*:after {
    clear: both;
}
.nav {
    width: 800px;
    height: 300px;
    margin: 200px auto;
}
.nav li {
    display: inline-block;
    margin: 0 1em;
}
.tooltip {
    display: inline-block;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
    padding: 0.15em,0.25em;
    position: relative;
}
.tooltip-content {
    position: absolute;
    left: 50%;
    bottom:100%;
    margin-left: -40px;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    color: #47c9af;
    padding-top: 28px;
    background: #ffffff;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.tooltip-content::after {
    display: block;
    content: "";
    width: 30px;
    height: 20px;
    position: absolute;
    left: 50%;
    top:100%;
    margin-left: -15px;
    margin-top: -7px;
    background: url(../img/tooltip1.svg) no-repeat bottom center;
    background-size: 100%;

}
.tooltip .tooltip-content i{
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.tooltip-effect-1 .tooltip-content {
    -webkit-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
    -moz-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
    -ms-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
    -o-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
    -webkit-transform-origin:bottom center;
}
.tooltip-effect-2 .tooltip-content {
    -webkit-transform:translate3d(0,20px,0);
    -moz-transform:translate3d(0,20px,0);
    -ms-transform:translate3d(0,20px,0);
    -o-transform:translate3d(0,20px,0);
}
.tooltip-effect-2 .tooltip-content i {
    -webkit-transform:translate3d(0,20px,0);
    -moz-transform:translate3d(0,20px,0);
    -ms-transform:translate3d(0,20px,0);
    -o-transform:translate3d(0,20px,0);
}
.tooltip-effect-3 .tooltip-content {
    -webkit-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
    -moz-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
    -ms-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
    -o-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
}
.tooltip-effect-3 .tooltip-content i {
    -webkit-transform:rotate3d(0,1,0,90deg);
    -moz-transform:rotate3d(0,1,0,90deg);
    -ms-transform:rotate3d(0,1,0,90deg);
    -o-transform:rotate3d(0,1,0,90deg);
}
.tooltip-effect-4 .tooltip-content {
    -webkit-transform:translate3d(0,-20px,0);
    -moz-transform:translate3d(0,-20px,0);
    -ms-transform:translate3d(0,-20px,0);
    -o-transform:translate3d(0,-20px,0);
}
.tooltip-effect-4 .tooltip-content i {
    -webkit-transform:translate3d(0,20px,0);
    -moz-transform:translate3d(0,20px,0);
    -ms-transform:translate3d(0,20px,0);
    -o-transform:translate3d(0,20px,0);
}
.tooltip-effect-5 .tooltip-content i {
    -webkit-transform:translate3d(0,20px,0);
    -moz-transform:translate3d(0,20px,0);
    -ms-transform:translate3d(0,20px,0);
    -o-transform:translate3d(0,20px,0);
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
    opacity: 1;
    transform: translate3d(0,0,0) rotate3d(1,1,1,0);
}
.tooltip:hover {
    color: rgba(255,255,255,1);
    -webkit-transition:color 0.3s;
    transition:color 0.3s;
}


里面主要要注意的是:

a是触发效果的入口,spani都是效果显示,实际项目中,可以更改span中的内容来变成不同的tooltip

经常会在实现各种常规图形附带尖角效果的时候用到:after伪元素。

这次的css效果大致思路就是,先写好各个spani所处的奇葩位置,再定义鼠标画上去的时候正常显示的位置,再给变化的元素加上transition,就OK了。

注意transform-origin这个属性,以及可能会有那些值。

当涉及渐变的时候,不显示的元素别用displaynone,用opacity比较好。

在定义一个元素的css多个属性时,要有一定顺序:

1.      位置position

2.      大小width

3.      文字text-align

4.      背景background

5.      其他animation

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页