CSS3--动态实现ToolTip效果（实例）
效果图如下↓↓↓↓↓  (知识点见代码注释)
HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>CSS3实现⿏标悬停显⽰消息提⽰框</title>
6<meta http-equiv="X-UA-compatible" contnet="IE=edge">
7<meta name="viewport" content="width=device-width" initial-scale="1">
8<link rel="stylesheet" href="css/style.css">
9<link rel="stylesheet" href="css/font-awesome.min.css">
10</head>
11<body>
12<div class="nav">
13<ul>
14<li>
15<a href="#" class="tooltip tooltip-effect-1">Home
16<!-- 应⽤SVG做背景图⽚ -->
17<span class="tooltip-content">
18<!-- 应⽤⽂字图⽚,fa:Icon公共类; fa-camera：相机Icon; fa-fw：使i标签display:block; fa-spin:Icon动画效果; fa-border:Icon具有圆⾓边框; --> 19<i  class="fa fa-camera fa-fw"></i>
20</span>
21</a>
22</li>
23<li>
24<a href="#" class="tooltip tooltip-effect-2">About me
25<span class="tooltip-content"><i  class="fa fa-heartbeat fa-fw"></i></span>
26</a>
27</li>
28<li>
29<a href="#" class="tooltip tooltip-effect-3">Photography
30<span class="tooltip-content"><i  class="fa fa-diamond fa-fw"></i></span>
31</a>
32</li>
33<li>
34<a href="#" class="tooltip tooltip-effect-4">Work
35<span class="tooltip-content"><i  class="fa fa-cogs fa-fw"></i></span>
36</a>
37</li>
38<li>
39<a href="#" class="tooltip tooltip-effect-5">Contact
40<span class="tooltip-content"><i  class="fa fa-comments fa-fw"></i></span>
41</a>
42</li>
43</ul>
44</div>
45</body>
46</html>
CSS
1html {
2    width:100%;
3    height:100%;
4/*屏幕旋转时⽂字⼤⼩不发⽣改变;*/
5    -webkit-text-size-adjust:none;
6 }
7body {
8    margin: 0;
9    padding: 0;
10    width:100%;
11    height:100%;
12    background: #47c9af;
13    color:#74777b;
14    font-weight: 300;
15    font-size: 1.5em;
16    font-family:"Raleway","Arial";
17 }
18ul {
19    list-style: none;
20    padding: 0;
21    margin: 0;
22 }
23a:link,a:visited,a:focus {
24    text-decoration: none;
25    outline: none;
26 }
28*,*:after,*:before {
29/*padding(填充)和border(边框)都不要影响盒⼦原先设定的⼤⼩;*/
30    -webkit-box-sizing:border-box;
31 }
32*:after,*:before {
33    display: block;
34    content:"";
35 }
36/*清除浮动*/
37*:after {
38    clear:both;
39 }
40
41/*Navgaitor*/
42.nav {
43    width:800px;
44    height:300px;
45    margin:200px auto;
46 }
47.nav li {
48    display: inline-block;
49    margin:0 1em;
50 }
52    display: inline-block;
53    font-weight: 700;
css特效文字54    color:rgba(0,0,0,0.3);
55    padding:0.15em 0.25em 0 0;
56    position: relative;
57    z-index: 999;
58    transition: 0.4s;
59 }
61    color:rgba(255,255,255,1);
62 }
64    position: absolute;
65    z-index: 9999;
66    width:80px;
67    height:80px;
68/*span相对于⽗元素a垂直居中:
69        left:50%;span的左侧距离a的左侧是a宽度⼀半的距离;
70        margin-left:-40px；左移相对于⾃⾝宽度的⼀半;
71        bottom:100%;span的底部距离a的底部是a⾼度⼀倍的距离，刚好在a的正上⽅; 72*/
73    left:50%;
74    margin-left: -40px;
75    bottom:100%;
76    margin-bottom: 20px;
77    text-align: center;
78    padding-top: 22px;
79/*应⽤svg⽂件做背景图⽚;*/
80    background:url(../img/tooltip1.svg) no-repeat center center;
81    opacity: 0;
82    transition: 0.4s;
83 }
85    font-style: normal;
86    font-size: 30px;
87    color:#47c9af;
88    opacity: 0;
89    transition: 0.3s;
90 }
92/*
93        translate3d(0,10px,0)：元素沿Y轴向下移动10px;
94        rotate3d(1,1,1,45deg)：元素分别在X轴,Y轴和Z轴旋转45°;
95        transform-origin:50% 100%；元素以本⾝计算出的位置为中⼼点;
96*/
97    transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
98    transform-origin :50% 100%;
99 }
101/*
102元素在X轴和Y轴上缩放0倍(最⼩化)，在Z轴缩放1倍(不缩放);
103*/
104    transform:scale3d(0,0,1);
105 }
107    transform: translate3d(0,20px,0);
108 }
110    transform:translate3d(0,15px,0);
113    transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
114    transform-origin:50% 100%;
115 }
117    transform:scale3d(0,0,1);
118 }
120    transform:translate3d(0,-20px,0);
121 }
123    transform:translate3d(0,20px,0);
124 }
126    transform:scale3d(0,0,1);
127    transform-origin:50% 100%;
128 }
130    transform:translate3d(0,20px,0);
131 }
132/*划过效果，所有效果归位0;*/
135    opacity:1;
136    transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
137 }
注:Icon字体引⽤⾃
svg⽂件(复制以下代码到编辑器，然后保存⽂件后缀名为.svg)
1<?xml version="1.0" encoding="utf-8"?>
2<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd">
4<svg version="1.1" id="图层_1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y="0px"
5    viewBox="0 0 80 90" enable-background="new 0 0 80 90" xml:space="preserve">
6<g>
7<path fill="#FFffff" d="M39.8,89.5c0,0.2,0.4,0.2,0.4,0c1.2-6.7,7.4-11.8,14.8-11.8H25C32.4,77.7,38.6,82.8,39.8,89.5z"/>
8<circle fill="#FFffff" cx="40" cy="40.3" r="40"/>
9</g>
10</svg>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。