css实现鼠标滑过图片放大阴影（3D）效果

最新推荐文章于 2022-12-14 10:53:32 发布

转载最新推荐文章于 2022-12-14 10:53:32 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wjunwei/p/8930183.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS实现的鼠标悬浮动画效果，包括元素位置变化及阴影效果，并通过图片对比展示了实际效果。代码中详细展示了如何设置CSS属性以实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先上两张图，对比一下鼠标未经过和鼠标悬浮的效果

中间还有动画效果，要自己看效果才能体会了，下面上代码

  // css    
       div{
            text-align: center;
        }
        a{
            display: inline-block;
            text-decoration: none;
            transition: all .3s ease;
        }
        a:hover {
            transform: translateY(-6px);
            -webkit-transform: translateY(-6px);
            -moz-transform: translateY(-6px);
            box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
        }
        .i-subject-head{
            overflow: hidden;
        }
        .i-subject-wrap img{
            width: 100%;
            -webkit-transition: -webkit-transform .3s;
        }
        a:hover .i-subject-wrap img{
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

<div>
    <a href="" target="_blank" title="">
        <div class="i-subject-wrap">
            <div class="i-subject-head">
                <img src="http://cdn.alloyteam.com/assets/img/alloystick-d2c55e.jpg">
            </div>

        </div>
    </a>
</div>