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>
相关推荐
万少几秒前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_1 分钟前
JS-SDK开发企微侧边栏
前端·javascript
FlowGram7 分钟前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
大西瓜瓜瓜13 分钟前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin16 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰17 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
白水清风21 分钟前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉22 分钟前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate31 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed32 分钟前
# vue3 实现前端生成水印效果
前端