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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Django之模型层多表操作的实现
2019/01/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
使用Python实现牛顿法求极值
2020/02/10 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
项目负责人任命书
2014/06/04 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS