纯CSS3实现鼠标滑过实现TIP提示框动画（transition：margin方法）-原创手记-慕课网

首先html结构：

<div id="container">
    <div class="item">
        <h1>Hi</h1>
        <div class="tooltip">
            <p>我是一个提示框！</p>
            <div class="arrow"></div>
        </div>
    </div>
</div>

首先我们给父级元素container设置一下样式：

#container{width:130px;margin:100px auto 0 auto;}

然后给div类名为item的设置一下样式：

.item  {width:100px; height:100px; margin:15px; background:#73a058; float:left; border-radius:50px;}

H1元素样式：

h1{display:inline-block;width:100%;height:100%;line-height:100px;text-align:center;color:#fff;font-size:50px;}

OK ,到现在，我们页面首先展示的内容基本样式设置完毕，剩下的就是tip提示框的样式及效果的实现--------------------------

首先我们tip是通过鼠标移动到item上，tip从上往下滑动到item元素的上方，那么我们需要给item设置一个绝对定位，让它定位在item上方，但是不能只定位在上方，因为我们在鼠标滑动上去的时候有一个从上往下的效果，所以需要设置一个负的margin值，至少这个负值要大于item的高度；

.tooltip {width:120px; padding:10px; border-radius:3px; position:absolute; box-shadow:1px 1px 10px 0 #ccc; margin: -400px 0 0 -20px; background:#fff;
   -webkit-transition:margin .5s ease-in-out;  -moz-transition:margin .5s ease-in-out;}

上面代码中，有的同学不理解为什么会有一个margin值等于-20px的左边距，因为我们item是100的宽度；然而我们tooltip是120的宽度，还有一个10px的padding值，所以一起是140的宽度，如果不进行-20px的位移，那么就不相对于item居中了，所以向左边移动了20px的距离，让整体相对于item居中；

还有一个新属性，可能我们在平时用到的很少，因为很多同学可能用transition属性的时候，可能基本上就这样写：transition:2s;这样是一个简写写法，就是告诉元素所有涉及到动画的属性都是2S时间，那么我们这里给了一个限制margin;就是告诉这个元素我只在margin属性上产生这个效果；

然后给item设置hover效果：

.item:hover{background:#6d643b;}

给item下的tooltip设置hover效果：

.item:hover .tooltip {  margin:-110px 0 0 -20px;   -webkit-transition: margin .25s ease-in-out;  -moz-transition: margin .25s ease-in-out;}

上面的代码：首先选择器讲解，我们item:hover后面写了一个tooltip，意思是我鼠标移动到item元素上，然后给item里面的元素tooltip设置了一些样式，样式就是让tooltip的margin值发生变化，

最后一步了：

.arrow {
    position:absolute;
    margin:10px 0 0 50px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
}

这串代码是实现文中出现的倒三角形状，具体的transparent用法同学们自己去搜用法，这里就不讲解了，

OK到这里基本上一个简单的效果就完成了，是不是又学到了css3属性的一些新用法了呢？
同学们也可以去修改效果的，比如说用opacity来实现，用CSS3的transform:scale放大缩小来做，更炫哦