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

最新推荐文章于 2023-09-14 08:45:00 发布

yhd1998

最新推荐文章于 2023-09-14 08:45:00 发布

阅读量4.3k

点赞数 2

本文链接：https://blog.csdn.net/yhd1998/article/details/109001830

版权

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yhd1998

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css鼠标经过盒子，盒子向上移动动画

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .y1{ width: 300px; height: 300px; ...
复制链接

扫一扫