CSS3向上移动的效果

本文转载自查看原文 2017-11-05 21:04 10985 CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>


       /* 普通的标签也是有hover事件的 */
       .dv:hover {
             border:3px solid #ef8d0e;
             /*Y轴上表示上升*/
             transform:translateY(-8px);
        }
       .dv {
           width:90px;
           height:86px;
           
           transition: all  .25s  ease-in;
           -moz-transition: all  .25s  ease-in;
           -webkit-transition: all  .25s  ease-in;
           border:3px solid #fff;
           margin:300px auto;
           background-color: pink;
           
       }
       

    </style>
</head>
<body>
    <div class="dv">
        
    </div>
</body>
</html>

就是这个效果，这个应用在一些地方还挺常见的。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css3鼠标移动图片上移效果 CSS3旋转缩放移动倾斜等效果——transform CSS3 速移动效果动画流畅无卡顿 css3动画从底部向上升 css3箭头效果 CSS3 晃动效果 css3 圆角效果 css3放大效果 css3开门效果 css3阴影效果