CSS3--底部菜单上拉效果

最新推荐文章于 2021-12-15 10:15:57 发布

AsaZyf

最新推荐文章于 2021-12-15 10:15:57 发布

阅读量2.9k

点赞数 1

文章标签： CSS3 底部菜单底部菜单上拉

本文链接：https://blog.csdn.net/AsaZyf/article/details/83059771

版权

本文展示了如何利用CSS3实现一个底部菜单上拉的效果。通过设置相对定位、绝对定位、过渡动画以及背景图片，创建了一个带有信息面板的菜单项。当鼠标悬停在菜单项上时，信息面板会从底部滑动显示出来，营造出吸引人的交互体验。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>底部菜单上拉效果</title>
       <style>
           *{
               margin: 0;
           }
           .wrap{
               width: 1200px;
               margin: 50px auto;

           }
           .wrap .item{
               width: 120px;
               height: 120px;
               border: 1px solid #ddd;
               background: url(img/1.jpg) no-repeat;
               background-size:100% 100%;
               position: relative;
               overflow: hidden;
           }
           .wrap .item .info{
               position: absolute;
               width: 100%;
               height: 40px;
               background:rgba(0,0,0,0.5);