CSS3--动态实现ToolTip效果(实例)

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

HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS3实现鼠标悬停显示消息提示框</title>

     <meta http-equiv="X-UA-compatible" contnet="IE=edge">

     <meta name="viewport" content="width=device-width" initial-scale="1">

     <link rel="stylesheet" href="css/style.css">

     <link rel="stylesheet" href="css/font-awesome.min.css">

 </head>

 <body>

     <div class="nav">

         <ul>

             <li>

                 <a href="#" class="tooltip tooltip-effect-1">Home

                     <!-- 应用SVG做背景图片 -->

                     <span class="tooltip-content">

                         <!-- 应用文字图片,fa:Icon公共类; fa-camera:相机Icon; fa-fw:使i标签display:block; fa-spin:Icon动画效果; fa-border:Icon具有圆角边框; -->

                         <i  class="fa fa-camera fa-fw"></i>

                     </span>

                 </a>

             </li>

             <li>

                 <a href="#" class="tooltip tooltip-effect-2">About me

                     <span class="tooltip-content"><i  class="fa fa-heartbeat fa-fw"></i></span>

                 </a>

             </li>

             <li>

                 <a href="#" class="tooltip tooltip-effect-3">Photography

                     <span class="tooltip-content"><i  class="fa fa-diamond fa-fw"></i></span>

                 </a>

             </li>

             <li>

                 <a href="#" class="tooltip tooltip-effect-4">Work

                     <span class="tooltip-content"><i  class="fa fa-cogs fa-fw"></i></span>

                 </a>

             </li>

             <li>

                 <a href="#" class="tooltip tooltip-effect-5">Contact

                     <span class="tooltip-content"><i  class="fa fa-comments fa-fw"></i></span>

                 </a>

             </li>

         </ul>

     </div>

 </body>

 </html>

CSS

 html {

     width:100%;

     height:100%;

     /*屏幕旋转时文字大小不发生改变;*/

     -webkit-text-size-adjust:none;

 }

 body {

     margin:;

     padding:;

     width:100%;

     height:100%;

     background: #47c9af;

     color:#74777b;

     font-weight:;

     font-size: 1.5em;

     font-family:"Raleway","Arial";

 }

 ul {

     list-style: none;

     padding:;

     margin:;

 }

 a:link,a:visited,a:focus {

     text-decoration: none;

     outline: none;

 }

 *,*:after,*:before {

     /*padding(填充)和border(边框)都不要影响盒子原先设定的大小;*/

     -webkit-box-sizing:border-box;

 }

 *:after,*:before {

     display: block;

     content:"";

 }

 /*清除浮动*/

 *:after {

     clear:both;

 }

 /*Navgaitor*/

 .nav {

     width:800px;

     height:300px;

     margin:200px auto;

 }

 .nav li {

     display: inline-block;

     margin:0 1em;

 }

 .tooltip {

     display: inline-block;

     font-weight:;

     color:rgba(0,0,0,0.3);

     padding:0.15em 0.25em 0 0;

     position: relative;

     z-index:;

     transition: 0.4s;

 }

 .tooltip:hover {

     color:rgba(255,255,255,1);

 }

 .tooltip-content {

     position: absolute;

     z-index:;

     width:80px;

     height:80px;

     /*span相对于父元素a垂直居中:

         left:50%;span的左侧距离a的左侧是a宽度一半的距离;

         margin-left:-40px;左移相对于自身宽度的一半;

         bottom:100%;span的底部距离a的底部是a高度一倍的距离,刚好在a的正上方;

     */

     left:50%;

     margin-left: -40px;

     bottom:100%;

     margin-bottom: 20px;

     text-align: center;

     padding-top: 22px;

     /*应用svg文件做背景图片;*/

     background:url(../img/tooltip1.svg) no-repeat center center;

     opacity:;

     transition: 0.4s;

 }

 .tooltip-content i {

     font-style: normal;

     font-size: 30px;

     color:#47c9af;

     opacity:;

     transition: 0.3s;

 }

 .tooltip-effect-1 .tooltip-content {

     /*

         translate3d(0,10px,0):元素沿Y轴向下移动10px;

         rotate3d(1,1,1,45deg):元素分别在X轴,Y轴和Z轴旋转45°;

         transform-origin:50% 100%;元素以本身计算出的位置为中心点;

     */

     transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);

     transform-origin :50% 100%;

 }

 .tooltip-effect-1 .tooltip-content i {

     /*

         元素在X轴和Y轴上缩放0倍(最小化),在Z轴缩放1倍(不缩放);

     */

     transform:scale3d(0,0,1);

 }

 .tooltip-effect-2 .tooltip-content {

     transform: translate3d(0,20px,0);

 }

 .tooltip-effect-2 .tooltip-content i {

     transform:translate3d(0,15px,0);

 }

 .tooltip-effect-3 .tooltip-content {

     transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);

     transform-origin:50% 100%;

 }

 .tooltip-effect-3 .tooltip-content i {

     transform:scale3d(0,0,1);

 }

 .tooltip-effect-4 .tooltip-content {

     transform:translate3d(0,-20px,0);

 }

 .tooltip-effect-4 .tooltip-content i {

     transform:translate3d(0,20px,0);

 }

 .tooltip-effect-5 .tooltip-content {

     transform:scale3d(0,0,1);

     transform-origin:50% 100%;

 }

 .tooltip-effect-5 .tooltip-content i {

     transform:translate3d(0,20px,0);

 }

 /*划过效果,所有效果归位0;*/

 .tooltip:hover .tooltip-content,

 .tooltip:hover .tooltip-content i {

     opacity:;

     transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);

 }

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

svg文件(复制以下代码到编辑器,然后保存文件后缀名为.svg)

 <?xml version="1.0" encoding="utf-8"?>

 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

      viewBox="0 0 80 90" enable-background="new 0 0 80 90" xml:space="preserve">

 <g>

     <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"/>

     <circle fill="#FFffff" cx="40" cy="40.3" r="40"/>

 </g>

 </svg>

巴特西

CSS3--动态实现ToolTip效果(实例)

最新文章

热门文章