CSS实现鼠标悬停元素上浮边框外添加阴影

最新推荐文章于 2023-04-21 16:08:17 发布

weixin_45553596

最新推荐文章于 2023-04-21 16:08:17 发布

阅读量1.2k

点赞数 2

分类专栏： CSS 文章标签： css css3 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45553596/article/details/121501419

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS实现当鼠标悬停在元素上时，元素上浮并添加阴影的效果。通过设置CSS的`transition`属性平滑过渡，`box-shadow`属性添加阴影，以及`transform`属性调整元素位置，可以创建出动态且美观的交互体验。

摘要由CSDN通过智能技术生成

效果：

鼠标悬停元素时：元素上浮添加阴影

实现代码：

HTML部分：

<body>
       <div class="top">
           <ul>
               <li>第一个</li>
               <li>第二个</li>
           </ul>
       </div>>
   </body>

css部分：

<style>
           .top{
               width: 798px;
               height: 410px;
               border: 1px solid black;
           }
           .top ul li{
               float: left;
               border: 1px solid red;
               width: 180px;
               height: 180px;
               list-style-type: none;
               margin-bottom: 10px;
               margin-left: 20px;
               -webkit-transition: all .2s linear;
           }
           .top ul li:hover{
                -webkit-box-shadow:0 15px 30px rgba(0,0,0,.1);
                box-shadow:0 15px 30px rgba(0,0,0,.3);          注：（0.3阴影颜色的深浅）
                -webkit-transform:translate3d(0,-10px,0); 注：（-10px上浮的距离）
           }
</style>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

>