CSS3实现图片抽屉式效果的示例代码


Posted in HTML / CSS onNovember 06, 2019

老规矩,先放图片效果图: 

CSS3实现图片抽屉式效果的示例代码

这个效果实现原理很简单:只要你掌握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; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 #HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 #HTML / CSS
CSS3 @media的基本用法总结
Sep 10 #HTML / CSS
You might like
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PDO::errorInfo讲解
2019/01/28 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
js实现图片轮播效果学习笔记
2017/07/26 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
利用Python破解斗地主残局详解
2017/06/30 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Linux的主要特性
2016/09/03 面试题
公务员职业生涯规划书范文  
2014/01/19 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
人力资源主管职责范本
2014/03/05 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年班组工作总结
2015/04/20 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android