<!DOCTYPE html> <html> <head> <title>tooltip</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body { background-color: green; padding: 200px; width: 100%; height: 100%; font-size: 1.5em; font-weight: 300; font-family: 'Arial'; } *,*.after,*.before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } li { list-style: none; display: inline-block; padding: 20px; } li a { position: relative; display: inline-block; text-decoration: none; font-weight: 700; color: rgba(0,0,0,0.3); z-index: 999; -webkit-transition: color 0.3s; transition: color 0.3s; } .tooltip-content { position: absolute; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; z-index: 9999; bottom: 100%; left: 50%; margin-left: -40px; margin-bottom: 20px; text-align: center; padding-top: 20px; color: green; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3; } .tooltip-content:after{ position: absolute; display: block; content: ''; width: 30px; height: 20px; background: url('img/tooltip1.svg') no-repeat; top: 100%; margin-top: -7px; margin-left: -15px; left: 50%; } //hover之前的状态 .tooltip-content i { -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } //hover之后的最终状态 a:hover { color: rgba(255,255,255,1); } a:hover .tooltip-content i, a:hover .tooltip-content { opacity: 1; -webkit-transform: translate3D(0,0,0) rotate3D(1,1,1,0) scale3D(1,1,1); } .tooltip-effect1 .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: center bottom; transform-origin: 50% 100%; } .tooltip-effect1 .tooltip-content i { opacity: 0; -webkit-transform: scale3D(0,0,5); transform: scale3D(0,0,1); } .tooltip-effect2 .tooltip-content { -webkit-transform: translate3D(0, 10px,0); transform: translate3D(0, 10px,0) } .tooltip-effect2 .tooltip-content i{ -webkit-transform: translate3D(0, 15px,0); transform: translate3D(0, 15px,0); } .tooltip-effect3 .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-effect3 .tooltip-content i{ -webkit-transform: scale3D(0,0,1); transform: scale3D(0,0,1); } .tooltip-effect4 .tooltip-content { -webkit-transform: translate3D(0, -20px,0); transform: translate3D(0, -20px,0); } .tooltip-effect4 .tooltip-content i{ -webkit-transform: translate3D(0, 20px,0); transform: translate3D(0, 20px,0); } .tooltip-effect5 .tooltip-content { -webkit-transform: scale3D(0,0,1); transform: scale3D(0,0,1); } .tooltip-effect5 .tooltip-content i{ -webkit-transform: translate3D(0, 20px,0); transform: translate3D(0, 20px,0); } </style> </head> <body> <ul> <li> <a href="#" class="tooltip-effect1">Home<span class="tooltip-content"><i class="fa fa-fw fa-home"></i></span></a> </li> <li> <a href="#" class="tooltip-effect2">About me<span class="tooltip-content"><i class="fa fa-fw fa-user"></i></span></a> </li> <li> <a href="#" class="tooltip-effect3">Photograph<span class="tooltip-content"><i class="fa fa-fw fa-camera-retro"></i></span></a> </li> <li> <a href="#" class="tooltip-effect4">More<span class="tooltip-content"><i class="fa fa-fw fa-briefcase"></i></span></a> </li> <li> <a href="#" class="tooltip-effect5">Service<span class="tooltip-content"><i class="fa fa-fw fa-envelope"></i></span></a> </li> </ul> </body> </html>