html鼠标滑过播放动画,纯CSS3实现鼠标滑过实现TIP提示框动画（transition：margin方法）...

首先html结构：

Hi

我是一个提示框！

首先我们给父级元素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