国产视频app今天應一個用戶的要求,要做一個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>

注釋:

国产视频apptransform:該屬性向元素應用 2D 或 3D 轉換,對元素進行旋轉、縮放、移動或傾斜的操作。

国产视频apptransition:屬性設置元素當過渡效果。

參考資料:html頁面中css縮放圖片的方法

CSS 實現元素向上移動的效果

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

PS:

国产视频app1、當鼠標移到DIV元素上時,DIV元素會向上移動幾個像素

2、當鼠標移出DIV元素時,DIV元素會移回原來的位置

3、DIV在移動的過程中,是由 css 中的 transition 屬性,來控制速度與過度效果的