css3如何向上_CSS3 实现div元素向上移动的效果

今天应一个用户的要求，要做一个html页面，而页面中的部份div元素，在鼠标移入时向上移动，鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的，不使用任合的JS代码。

css3 实现div向上移动的效果代码

html代码：html>

/*鼠标移入，向上移动8个像素*/

.div:hover {

transform:translateY(-8px);

}

.div {

width:100px;

height:80px;

line-height: 80px;

/*动画的过渡效果*/

transition: all  .25s  ease-in;

border:0;

margin:10px;

background-color: pink;

float: left;

font-size: 12px;

text-align: center;

}

/*鼠标移入，向上移动8个像素*/

.div:hover {

transform:translateY(-8px);

}

飞鸟慕鱼博客

feiniaomy.com

注释：

transform：该属性向元素应用 2D 或 3D 转换，对元素进行旋转、缩放、移动或倾斜的操作。

transition：属性设置元素当过渡效果。

CSS 实现元素向上移动的效果

PS：

1、当鼠标移到DIV元素上时，DIV元素会向上移动几个像素

2、当鼠标移出DIV元素时，DIV元素会移回原来的位置

3、DIV在移动的过程中，是由 css 中的 transition 属性，来控制速度与过度效果的