当前位置:首页 > CSS教程 > 正文内容

css如何实现图片抽屉式效果_css教程,css,图片

搜教程4年前 (2020-03-09)CSS教程174

css如何实现流程导航效果?有哪几种方法?_css教程

本文来自CSS入门教程栏目,文中为大家介绍了CSS实现流程导航效果的三种方法,具有一定的参考价值,希望可以帮助到大家。css实现流程导航效果的方法:1、裁剪;2、错位;3、利用border生成前后三角。

首先,我们来看一下效果:

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

css如何清除默认样式并设置公共样式_css教程

本文为大家介绍了如何清除默认样式并设置公共样式的方法,具有一定的参考价值,希望可以帮助到大家。

(推荐教程:CSS入门教程)

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

更多编程相关内容,请关注ki4网编程入门栏目!

以上就是css如何实现图片抽屉式效果的详细内容,更多请关注ki4网其它相关文章!

关于CSS中display:flex与inline-flex属性的详细介绍_css教程

本文来自CSS教程栏目,文中为大家详细介绍了display:flex与inline-flex属性的用法,具有一定的参考价值,希望可以帮助到大家。flex:将对象作为弹性伸缩盒显示;inline-flex:将对象作为内联块级弹性伸缩盒显示。

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17348.html

标签: css图片
分享给朋友:

“css如何实现图片抽屉式效果_css教程,css,图片” 的相关文章

border-image属性怎样用【css教程】,border-image属性,CSS3

border-image属性怎样用【css教程】,border-image属性,CSS3

border-image属性是一个是一个简写属性,经由过程该属性可运用图片来建立边框。 CSS3 border-image属性 作用:运用图片来建立边框 申明:复合属性。设置或检索对象的边框款式运用图象来添补。能够一次性设置: border-image-source,border-im...

CSS中伪类和伪元素的细致引见(代码示例)【css教程】,css3,css

本篇文章给人人带来的内容是关于CSS中伪类和伪元素的细致引见(代码示例),有肯定的参考价值,有须要的朋侪可以参考一下,愿望对你有所协助。 一、伪类 伪类包含两种:状况伪类(UI 伪类)和构造性伪类。 (1)状况伪类是基于元素当前状况举行挑选的。 在与用户的交互过程当中元素的状况是动态变化...

css list-style-position属性怎样用【css教程】,css list-style-position属性

css list-style-position属性怎样用【css教程】,css list-style-position属性

css list-style-position属性定义及用法 在css中,list-style-position属性是运用来设置在那边安排列表项标记,用于声明列表标志相对于列表项内容的位置,外部 (outside) 标志会放在离列表项边框边境肯定间隔处,不过这间隔在 CSS 中未定义,内部...

css box-ordinal-group属性怎样用【css教程】,css box-ordinal-group属性

css box-ordinal-group属性怎样用【css教程】,css box-ordinal-group属性

css box-ordinal-group属性是css3中新增属性,是使用来划定box子元素显现的序次,现在主流浏览器都还不支撑该属性。然则一些主流浏览器有对应的私有属性来替代该属性,Internet Explorer 10支撑ms-flex-order属性,Internet Explore...

css border-right-color属性怎样用【css教程】,css border-right-color属性

css border-right-color属性怎样用【css教程】,css border-right-color属性

css border-right-color属性定义及用法 在css中,border-right-color属性是用来设置一个元素的右边框的色彩。当我们须要转变元素右边框的色彩的时刻,能够运用border-right-color属性来设置。在运用border-right-color属性定义...

css左浮动怎样写?【css教程】,css,float,左浮动

css左浮动怎样写?【css教程】,css,float,左浮动

在css中能够经由过程float属性来定义元素在哪一个方向浮动;想要左浮动则只需将元素的float属性的值设置为left(float:left)即可。下面就来给人人引见一下float属性,愿望对你们有所协助。 css float属性 float 属性指定一个盒子(元素)是不是应当浮动,在...