css鼠标经过盒子，盒子向上移动动画

最新推荐文章于 2025-03-28 16:26:06 发布

原创最新推荐文章于 2025-03-28 16:26:06 发布 · 4.6k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一个使用CSS样式和hover伪类实现的简单盒子效果案例。盒子具有特定的尺寸和阴影效果，并在鼠标悬停时产生平滑的向上移动动画及阴影变化。通过简单的CSS代码实现了现代网页中常见的元素交互效果。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .y1{
               width: 300px;
               height: 300px;
               background-color: white;
               box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
               border-radius: 12px;
               /* 裁剪 */
               overflow: hidden;
               /* 鼠标经过触发时间 */
               transition: all 0.2s;
           }
           div:hover{
               /* 盒子向上移动 */
               transform: translateY(-5px);
               /* 背景 */
               box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
           }
       </style>
   </head>
   <body>
       <div class="y1">
           1
       </div>
   </body>
</html>