css实现鼠标移入滑动显示功能

最新推荐文章于 2024-07-31 16:59:37 发布

weixin_30413739

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量1.5k

点赞数

原文链接：http://www.cnblogs.com/k13web/p/4139868.html

版权

鼠标移上去，元素位置移动，显示隐藏功能效果。（推荐在火狐或谷歌中观看，会有有动画效果）

效果如图：

css：

    .box {
       width: 200px;
       height: 300px;
       position: relative;
       margin: 200px auto 0 auto;
   }

   .box:hover .img {
       top: -45px;
       -moz-transition: all 0.3s ease-in;
       -webkit-transition: all 0.3s ease-in;
       -o-transition: all 0.3s ease-in;
       transition: all 0.3s ease-in;
   }

   .img {
       width: 192px;
       height: 292px;
       position: absolute;
       top: 0;
       left: 0;
       padding: 3px;
       border: 1px solid #e5e5e5;

       -moz-transition: all 0.3s ease-in;
       -webkit-transition: all 0.3s ease-in;
       -o-transition: all 0.3s ease-in;
       transition: all 0.3s ease-in;
   }
   .img div {
       width: 192px;
       height: 292px;
       background: #f7f7f7;
   }
   .btn {
       width: 70px;
       height: 25px;
       line-height: 25px;
       position: absolute;
       display: block;
       left: 50%;
       bottom: 10px;
       margin-left: -35px;
       background: #ff464f;
       text-decoration: none;
       text-align: center;
       font-size: 12px;
       color: #fff;
   }