css3---transform&transition之toolTip动画效果的实现
知识点总结：
1、元素设置了绝对定位后会自动变为块级元素；
2、父元素设置为相对定位，子元素设为绝对定位，然后对子元素作如下设置会得到不同的效果：
a、bottom:100%----------------->子元素的底端和父元素的顶端对齐重合（如下图所示：黑色框为父元素~白色圆为子元素~）
html代码：
<div id="father"> <div id="child"> </div> </div>
css代码：
<style> #father { background: #000; width: 300px; height: 200px; position: relative; top:300px;//为了让父元不靠在屏幕左上方~稍微设置了left和top left: 600px; } #child { background: #fff; width: 100px; height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; bottom: 100%; } </style>
b、top:100%-------->子元素的顶端和父元素底端对齐（即子元素相对于父元素向下移动父元素的高度）
html代码如上所示，css代码如下：
<style> #father { background: #000; width: 300px; height: 200px; position: relative; top:300px; left: 600px; } #child { background: #fff; width: 100px; height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 100%; } </style>
c、至于bottom:0%和top:0%也依次类推
bottom:0% 即子元素以父元素的底部为基准向上推父元素高度的0%
top:0% 即子元素以父元素的顶部为基准向下推父元素高度的0%
基于transform和transition实现动画效果思路总结：
html代码如下：
<ul> <li> <a href="#" class="tooltip tooltip-effect-5"> Contact <span class="tooltip-content"> <i class="fa fa-envelope fa-fw"></i> </span> </a> </li> </ul>
一般而言我们设置元素的动画都是有事件触发的~比如初始时元素是一个状态~然后鼠标移到上面时开始动画~于是有：
1、设置元素开始时的显示效果：
css代码（采用less编写）
.tooltip-effect-5 .tooltip-content {//定义加了.tooltip-effect-5类的span的初始样式 -webkit-transform: scale3d(0, 0, 0); -moz-transform: scale3d(0, 0, 0); -ms-transform: scale3d(0, 0, 0); -o-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; i { -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; } }
2、定义鼠标hover时的样式：
css代码（采用less编写）
.tooltip:hover .tooltip-content, .tooltip:hover .tooltip-content i { opacity: 1; //定义气泡最终的显示效果~在x、y、z上滑动为0，在x、y、z上旋转为0度,在x、y、z上缩放比例为1 -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0) scale3d(1, 1, 1); -moz-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0) scale3d(1, 1, 1); -o-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); }
3、这样定义好后在注意在 设置元素开始时的显示效果时我们还写了 transition: all 0.3s;的语句~这里写上all~那在鼠标hover时~程序会自动检测所有发生变换的属性~并按照定义的时间（0.3s）进行一个过渡的显示~于是就实现了动画~当然我们也可以手动添加希望发生过渡变化的属性~比如把上面的all改成opacity~那就只有opacity（透明度）会发生一个从0到1的过渡变化~过渡时间为0.3s。
另外小结一下transform后面跟的内容的含义：
1、translate3d（）-------设置x、y、z 上平移的距离单位为像素
注意：虽然三轴上的变换也可以分别用translateX，translateY，translateZ来设置~不过推荐使用translate3d~这样不仅方便设置三轴上的变换~而且在手持设备上也会开启 加速
2、rotate3d（1,1,1,45deg）--------设置x、y、z 上的旋转的角度~前三个参数为0~1的数值~最后一个参数规定旋转的度数~那前三个参数可以理解为旋转规定度数的百分之几
3、scale3d（1,1,1）-----------设置x、y、z 上的缩放比~三个参数的取值也是0~1
源码地址：https://github.com/x-shadow-x/toolTip
在线预览：http://x-shadow-x.github.io/toolTip/
