分享一个鼠标移动投影效果

/ 浏览 2394 次

想要记住的太多,想要留下的也太多,会忘记的也是同等,失去的亦是如此。昨日之日不可留,偶尔还是有闲心做一些小特效和小修改,froyo移植还尚未成功,终归还是闲暇的时间不多。

<style>
body{
     background: #f2f3f5;
}
.item{
    display: block;
    box-sizing: border-box;
    padding: 50px 35px 0;
    width: 330px;
    position: relative;
    height: 330px;
    background: #fff;
    border-bottom: 3px solid transparent;
    transition: all .3s ease;
}
.item:hover {
    border-bottom-color: #00c800;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
</style>
<div class="item"></div>

如果你想转载,请注明来源或者出处 / 随便看看

  1. 小俊
    小俊 2017-12-10 23:14:40 / 删除评论 #回复 #32549

    抢沙发,卖瓜子...

    • 大雄
      大雄 2017-12-10 23:15:18 / 删除评论 #回复 #32550

      @小俊:稳啊,稳如狗啊。

  2. Tokin
    Tokin 2017-12-11 10:13:57 / 删除评论 #回复 #32552

    这也能水一篇,还说“闲暇的时间不多”....

    • 大雄
      大雄 2017-12-11 10:14:37 / 删除评论 #回复 #32553

      @Tokin:哪里像你这么有空,哎~

      • Tokin
        Tokin 2017-12-11 10:15:13 / 删除评论 #回复 #32554

        @大雄:反正我是懒得更新博客

        • 大雄
          大雄 2017-12-11 10:15:50 / 删除评论 #回复 #32555

          @Tokin:懒癌晚期。

  3. siyochen
    siyochen 2017-12-12 10:05:48 / 删除评论 #回复 #32559

    差点没找到留言的入口。第一张是效果图吗 等了很久没见鼠标动

    • 大雄
      大雄 2017-12-12 10:08:49 / 删除评论 #回复 #32560

      @siyochen:哈哈啊哈哈哈哈哈,果然还是有人找不到,第一章只是效果图,懒得放html文件了,看来我要加个图标在这句话前面了。

      • siyochen
        siyochen 2017-12-18 09:00:54 / 删除评论 #回复 #32577

        @大雄:比我留言的地方都难找。。。是要醒目一点了

        • 大雄
          大雄 2017-12-18 10:40:27 / 删除评论 #回复 #32578

          @siyochen:有用的话只留给有缘人。

「人生在世,留句话给我吧」

发表评论

人生在世,错别字在所难免,无需纠正,##修改表单信息##