使用css实现图片抽屉式效果应该怎样做-创新互联

使用css实现图片抽屉式效果应该怎样做？相信有很多人都不太了解，今天小编为了让大家更加了解css实现图片抽屉式效果的方法，所以给大家总结了以下内容，一起往下看吧。

成都网站制作、网站建设的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。创新互联建站多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择创新互联建站，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。

首先，我们来看一下效果：

这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码；

HTML代码：

<div>
        <ul id="list">
            <li >
                <a href="">国际美妆抢先看</a>
                <img src="images/1.jpg" />
            </li>
            <li>
                <a href="">女神标准大讨论</a>
                <img src="images/2.jpg" />
            </li>
            <li class="select">
                <a href="">吃货也能越吃越瘦</a>
                <img src="images/3.jpg" />
            </li>
            <li>
                <a href="">连衣裙抢头条</a>
                <img src="images/4.jpg" />
            </li>
            <li>
                <a href="">宫三女主美妆对决</a>
                <img src="images/5.jpg" />
            </li>
        </ul>
    </div>

CSS代码：

*{ margin:0;padding:0; }
    ul{ list-style:none; }
    a{ font-size:16px;text-decoration:none;color:#666; }
    div{ width:300px;margin:20px auto; }
    #list li{ line-height:40px;height:40px;background:#efefef;text-indent:1em; margin-bottom:3px;overflow:hidden;-webkit-transition:height 0.3s ease;-moz-transition:height 0.3s ease-ms-transition:height 0.3s ease;-o-transition:height 0.3s ease;transition:height 0.3s ease;}
    #list li img{ width:300px;height:200px;}
    #list li:nth-child(1){height:240px;background:#F36;}
    #list li:nth-child(1) a{ color:#fff; }
    #list:hover li{ height:40px;background:#efefef; }
    #list:hover li a{color:#666;}
    #list li:hover{ height:240px; background:#F36;}
    #list li:hover a{ color:#fff; }

以上就是使用css实现图片抽屉式效果应该怎样做的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来创新互联行业资讯！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前名称：使用css实现图片抽屉式效果应该怎样做-创新互联
网页路径：https://www.cdcxhl.com/article0/djeioo.html

成都网站建设公司_创新互联，为您提供微信公众号、电子商务、搜索引擎优化、域名注册、网站排名、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联