风景，因走过而美丽。命运，因努力而精彩。南国园内看夭红，溪畔临风血艳浓。如果回到年少时光，那间学堂，我愿依靠在你身旁，陪你欣赏古人的诗章，往后的夕阳。
今天应一个用户的要求，要做一个html页面，而页面中的部份div元素，在鼠标移入时向上移动，鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的，不使用任合的JS代码。
css3 实现div向上移动的效果代码
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*鼠标移入，向上移动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);
}
</style>
</head>
<body>
<div></div>
<div>feiniaomy.com</div>
</body>
</html>注释：
transform：该属性向元素应用 2D 或 3D 转换，对元素进行旋转、缩放、移动或倾斜的操作。
transition：属性设置元素当过渡效果。
参考资料：html页面中css缩放图片的方法
CSS 实现元素向上移动的效果
PS：
1、当鼠标移到DIV元素上时，DIV元素会向上移动几个像素
2、当鼠标移出DIV元素时，DIV元素会移回原来的位置
3、DIV在移动的过程中，是由 css 中的 transition 属性，来控制速度与过度效果的
以上就是CSS3 如何实现div元素向上移动的效果。很多人爱着爱着，爱了全世界，可唯独忘了爱自己。更多关于CSS3 如何实现div元素向上移动的效果请关注haodaima.com其它相关文章！
