代码实现:鼠标悬浮图片的时候,出现翘边阴影

2401_83810323

于 2024-05-09 17:25:39 发布

阅读量466

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2401_83810323/article/details/138622594

版权

要实现鼠标悬浮在图片上时出现翘边阴影的效果，你可以使用CSS的`box-shadow`属性和`transform`属性来实现。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Shadow Effect</title>
<style>
    .image-container {
        position: relative;
        display: inline-block;
    }

    .image-container img {
        display: block;
        width: 1200px; /* 图片宽度 */
        height: auto; /* 图片高度 */
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .image-container img:hover {
        transform: translateY(-10px); /* 图片向上平移10px */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    }
</style>
</head>
<body>
    <div class="image-container">
        <img src="https://www.91pme.com/Uploads/images/20230912/650009eed134f.jpeg" alt="Your Image" >
    </div>
</body>
</html>

实现效果: