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

最新推荐文章于 2021-07-02 10:07:38 发布

Aus0049

最新推荐文章于 2021-07-02 10:07:38 发布

阅读量4k

点赞数 1

分类专栏： CSS 文章标签： CSS3 tooltip

本文链接：https://blog.csdn.net/u014267351/article/details/49669671

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这几天做项目，经常用到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是触发效果的入口，span和i都是效果显示，实际项目中，可以更改span中的内容来变成不同的tooltip。

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

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

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

当涉及渐变的时候，不显示的元素别用display：none，用opacity比较好。

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

1．位置position

2．大小width

3．文字text-align

4．背景background

5．其他animation

Aus0049

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现Bootstrap的tooltip动画提示效果

这几天做项目，经常用到bootstrap中的tooltip，他一插件的形式在项目中出现，样式改起来比较麻烦，索性自己做了个玩玩。Demo来源与网上的教程，自己琢磨改进Html如下 tooltip Home
复制链接

扫一扫