资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用CSS3怎么实现一个图片抽屉式效果-创新互联

这篇文章将为大家详细讲解有关使用CSS3怎么实现一个图片抽屉式效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业服务器托管报价,主机托管价格性价比高,为金融证券行业服务器机柜租赁,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

HTML代码:


                                      国际美妆抢先看                                           
  •                 女神标准大讨论                              
  •                              吃货也能越吃越瘦                                           
  •                 连衣裙抢头条                              
  •             
  •                 宫三女主美妆对决                              
  •              

    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; }

    关于使用CSS3怎么实现一个图片抽屉式效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


    分享名称:使用CSS3怎么实现一个图片抽屉式效果-创新互联
    分享链接:http://www.cdkjz.cn/article/geceo.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220