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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 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
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
js倒计时抢购实例
2015/12/20 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python统计cpu利用率的方法
2015/06/02 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python assert语句的简单使用示例
2019/07/28 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
关于VPN
2012/06/10 面试题
超市业务员岗位职责
2013/12/05 职场文书
社区志愿者心得体会
2014/01/03 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
校车司机安全责任书
2015/05/11 职场文书
焦点访谈观后感
2015/06/11 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
php访问对象中的成员的实例方法
2021/11/17 PHP