<!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>
时间： 2024-11-02 23:22:58