0x01布局总体预览图
慕课Amy-Tooltip 修改版总体布局预览图
0x02 代码示例
html布局代码
<body>
<div class="nav">
<ul>
<li><a href="#" class="tooltip tooltip-effect-1">Home
<span class="tooltip-content">
<i class="fa fa-home fa-fw" aria-hidden="true"></i></span>
</a></li>
<li><a href="#" class="tooltip tooltip-effect-2">About me
<span class="tooltip-content">
<i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
</a></li>
<li><a href="#" class="tooltip tooltip-effect-3">
<span class="tooltip-content">
<i class="fa fa-camera-retro"></i></span>Potography
</a></li>
<li><a href="#" class="tooltip tooltip-effect-4">Work
<span class="tooltip-content">
<i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
</a></li>
<li><a href="#" class="tooltip tooltip-effect-5">Contact
<span class="tooltip-content">
<i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
</a></li>
</ul>
</div>
</body>
css样式代码
/*Global style*/
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: #47c9af;
color: #74777b;
font-weight:300;
font-size: 1.5em;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a:link,a:visited,a:focus{
text-decoration: none;
outline:none;
}
/*
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个
盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 ,
例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box
使元素消失;
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
padding-box
width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。
*/
*,*: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;
}
*:after,*:before{
display:inlie-block;
content:"";
}
*:after{clear: both;}
/*Navgaitor style*/
.nav{
width: 900px;
height: 300px;
margin: 300px auto;
}
.nav li{
display: inline-block;
margin:0 1em;
}
.tooltip{
position: relative; /*定位属性 使元素 按照用户定义进行移动 相对定位元素*/
z-index: 9;
float: left;
font-weight: 700;
color: rgba(0,0,0,0.3);
padding: 0.15em 0.25em;
}
.tooltip-content {
position: absolute; /*定位属性 使元素 按照用户定义进行移动 绝对定位元素*/
z-index: 10;
left: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
margin-left:-40px;
bottom: 100%;
text-align: center;
padding-top:25px;
color:#47c9af;
}
.tooltip-content::after{ /*css3 after元素选择*/
display: block;
content: "";
}
.tooltip>*{
opacity: 0;/*css透明度*/
}
.tooltip:hover > *{
opacity: 1; /*css透明度*/
transition:1s; /*css3过渡动画*/
transform: rotate(360deg); /*css3旋转动画*/
}
效果图
Amy-Tooltip 修改版效果1
Amy-Tooltip 修改版效果2
Amy-Tooltip 修改版效果3
网友评论