CSS实践 —— 悬浮盒子阴影加上移效果

最新推荐文章于 2023-10-30 10:27:50 发布

01空间

最新推荐文章于 2023-10-30 10:27:50 发布

阅读量1k

点赞数

分类专栏： CSS案例文章标签： css 前端

本文链接：https://blog.csdn.net/tergou/article/details/132440091

版权

CSS案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

悬浮盒子阴影加上移效果

- 代码

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-color: #f5f5f5;
            }
            .shadow {
                width: 100px;
                height: 100px;
                margin: 100px auto;
                background-color: #ffffff;
                transition: box-shadow 500ms, transform 0.5s ease-in-out;
            }

            .shadow:hover {
                box-shadow: 2px 2px 10px -4px rgba(0, 0, 0, 0.3);
                transform: translateY(-5px);
            }
        </style>
    </head>
    <body>
        <div class="shadow"></div>
    </body>
</html>