| 字数统计: 795(字) css3实现鼠标悬停消息提示框 发表于 2016-08-08 | 分类于 前端 | 阅读次数 css3实现鼠标悬停消息提示框 效果 技术点: Font Awesome字体库 SVG类型icon使用 :before 与:after生成内容 transition实现过渡动画 transform -webkit-box-sizing: border-box; 代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3实现鼠标悬停消息提示框</title> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width" initial-scale="1"> <link rel="stylesheet" type="text/css" href="style/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style/prettyToolTips.css"></head><body> <div class="nav"> <ul> <li> <a href="#" title="" class="tooltip tooltip-effect-1">Home <span class="tooltip-content"> <i class="fa fa-home fa-fw"></i></span> </a> </li> <li> <a href="#" title="" 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="#" title="" class="tooltip tooltip-effect-3">Photography <span class="tooltip-content"> <i class="fa fa-camera fa-fw"></i></span> </a> </li> <li> <a href="#" title="" class="tooltip tooltip-effect-4">Work <span class="tooltip-content"> <i class="fa fa-briefcase fa-fw" ></i></span> </a> </li> <li> <a href="#" title="" 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> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199/* Global */html{ width: 100%; height: 100%; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -o-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}body{ margin: 0; padding: 0; width: 100%; height: 100%; background-color: #47c9af; color: #74777b; font-weight: 300; font-size: 1.5em; font-family: "Raleway","Arail";}ul{ list-style: none; padding: 0; margin: 0;}a:link,a:visited,a:focus{text-decoration: none;outline: none;}*,*:after,*:before{ -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:after,*:before{ display: block; content: "";}*:after{clear:both;}/* Navigator */.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.4); padding: 0.15em 0.25em 0; position: relative; z-index: 999; -webkit-transition:color 0.6s; transition:color 0.6s;}.tooltip:hover{color:rgba(255,255,255,1);}.tooltip-content{ position: absolute; z-index: 9999; width: 80px; height: 80px; border-radius: 50%; background: #fff; left: 50%; margin-left: -40px; bottom:100%; margin-bottom: 20px; text-align: center; padding-top: 25px; color: #47c9af; opacity: 0; -webkit-transition:all 0.5s; transition:all 0.5s;}.tooltip .tooltip-content i{ opacity: 0; -webkit-transition:opacity 0.6s; transition:opacity 0.6s;}.tooltip-content::after{ display: block; content: ""; width: 30px; height: 20px; background:url(../images/tooltip1.svg) no-repeat center; background-size: 100%; position: absolute; top:100%; left: 50%; margin:-6px 0 0 -15px;}.tooltip-effect-1 .tooltip-content{ -webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg); transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg); -webkit-transform-origin:50% 100%; transform-origin:50% 100%;} .tooltip-effect-1 .tooltip-content i{ -webkit-transform:scale3d(0.5,0.5,0.5); transform:scale3d(0.5,0.5,0.5);}.tooltip-effect-2 .tooltip-content{ -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); } .tooltip-effect-2 .tooltip-content i{ -webkit-transform:translate3d(0,15px,0); transform:translate3d(0,15px,0); }.tooltip-effect-3 .tooltip-content{ -webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg); transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; } .tooltip-effect-3 .tooltip-content i{ -webkit-transform:scale3d(0,0,1); transform:scale3d(0,0,1); }.tooltip-effect-4 .tooltip-content{ -webkit-transform:translate3d(0,-20px,0) ; transform:translate3d(0,-20px,0) ; } .tooltip-effect-4 .tooltip-content i{ -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); }.tooltip-effect-5 .tooltip-content{ -webkit-transform:scale3d(0.5,.5,0.5); transform:scale3d(0.5,0.5,0.5); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; } .tooltip-effect-5 .tooltip-content i{ -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); }.tooltip:hover .tooltip-content,.tooltip:hover .tooltip-content i{ opacity: 1; -webkit-transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1); transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);} 参考 CSS3 用户界面慕课网 CSS3实现漂亮ToolTips效果Font Awesome 官网 扫码订阅公众号 如果文章对您有用请随意打赏,谢谢支持! 赏 微信打赏 支付宝打赏 本文作者: AlexZ33 本文链接: http://jxdxsw.com/2016/08/08/css3_ToolTips/ 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!