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

风景,因走过而美丽。命运,因努力而精彩。南国园内看夭红,溪畔临风血艳浓。如果回到年少时光,那间学堂,我愿依靠在你身旁,陪你欣赏古人的诗章,往后的夕阳。

今天应一个用户的要求,要做一个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 实现元素向上移动的效果

div 向上移动效果,css控制div上下移动, css 移动

PS:

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

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

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

以上就是CSS3 如何实现div元素向上移动的效果。很多人爱着爱着,爱了全世界,可唯独忘了爱自己。更多关于CSS3 如何实现div元素向上移动的效果请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题