CSS3实现ToolTip效果_html/css_WEB-ITnose

效果图如下↓↓↓↓↓ (知识点见代码注释)

HTML

 1  2  3  4      5      6      7      8      9     10 11 12     
13         
14             
15                 Home16                     17                     18                         19                         20                     21                 22             
23             
24                 About me25                     26                 27             
28             
29                 Photography30                     31                 32             
33             
34                 Work35                     36                 37             
38             
39                 Contact40                     41                 42             
43         
44     
45 46 

CSS

  1 html {  2     width:100%;   3     height:100%;  4     /*屏幕旋转时文字大小不发生改变;*/  5     -webkit-text-size-adjust:none;  6 }  7 body {  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 } 18 ul { 19     list-style: none; 20     padding: 0; 21     margin: 0; 22 } 23 a:link,a:visited,a:focus { 24     text-decoration: none; 25     outline: none; 26 } 27  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 } 51 .tooltip { 52     display: inline-block; 53     font-weight: 700; 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 } 60 .tooltip:hover { 61     color:rgba(255,255,255,1); 62 } 63 .tooltip-content { 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 } 84 .tooltip-content i { 85     font-style: normal; 86     font-size: 30px; 87     color:#47c9af; 88     opacity: 0; 89     transition: 0.3s; 90 } 91 .tooltip-effect-1 .tooltip-content { 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 }100 .tooltip-effect-1 .tooltip-content i {101     /*102         元素在X轴和Y轴上缩放0倍(最小化),在Z轴缩放1倍(不缩放);103     */104     transform:scale3d(0,0,1);105 }106 .tooltip-effect-2 .tooltip-content {107     transform: translate3d(0,20px,0);108 }109 .tooltip-effect-2 .tooltip-content i {110     transform:translate3d(0,15px,0);111 }112 .tooltip-effect-3 .tooltip-content {113     transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);114     transform-origin:50% 100%;115 }116 .tooltip-effect-3 .tooltip-content i {117     transform:scale3d(0,0,1);118 }119 .tooltip-effect-4 .tooltip-content {120     transform:translate3d(0,-20px,0);121 }122 .tooltip-effect-4 .tooltip-content i {123     transform:translate3d(0,20px,0);124 }125 .tooltip-effect-5 .tooltip-content {126     transform:scale3d(0,0,1);127     transform-origin:50% 100%;128 }129 .tooltip-effect-5 .tooltip-content i {130     transform:translate3d(0,20px,0);131 }132 /*划过效果,所有效果归位0;*/133 .tooltip:hover .tooltip-content,134 .tooltip:hover .tooltip-content i {135     opacity:1;136     transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);137 }

注:Icon字体引用自 Font Awesome Icons 下载链接 课程链接