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教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php模板原理讲解
2013/11/13 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python检测IP地址变化并触发事件
2018/12/26 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
技术经济专业求职信
2014/09/03 职场文书
单位员工收入证明样本
2014/10/09 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python