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

悬浮盒子阴影加上移效果

代码

html 复制代码
<!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>
相关推荐
xiaopengbc2 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君6 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy8 分钟前
不定高虚拟列表
前端
前端AK君17 分钟前
React组件库如何在vue项目中使用
前端
Moonbit27 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud30 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li357440 分钟前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌44 分钟前
Web3 基础
前端
快乐是Happy44 分钟前
分享一个非常实用的防止重复提交操作
前端·javascript
王蛋1111 小时前
前端工作问题或知识记录
前端·npm·node.js