要求

    • 必备知识

      基本了解CSS语法,初步了解CSS3语法知识。

    • 开发环境

      Adobe Dreamweaver CS6/Chrome浏览器

    • 演示地址

      演示地址

制作CSS3制作手风琴图片滑动效果,我们仅需利用CSS3的Transition属性和:hover 选择器简单几步就能完成该特效。

制作过程

1,在body中添加html标签

<div id='wrap'>
<ul>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src='images/1.png'>
</a>
</li>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src='images/2.png'>
</a>
</li>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src='images/3.png'>
</a>
</li>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src='images/4.png'>
</a>
</li>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src='images/5.png'>
</a>
</li>
<li>
<div class='title'>
<a href="#">TEXT</a>
</div>
<a href="#">
<img src="data:images/6.png">
</a>
</li>
</ul>
</div>

2,添加CSS样式,关键点是li中的transition属性,ul和li的:hover状态。

*{margin:;padding:;}
body {background:url(images/bg.jpg) repeat;}
ul{list-style:none;}
a{ text-decoration:none;}
img{border:none;} #wrap {
width:845px;
height: 320px;
overflow: hidden;
margin: 80px auto;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
} #wrap ul {
width: 3000px;
}
#wrap li {
display: block;
width: 140px; height: 320px;
position: relative;
float: left;
border-left: 1px solid #aaa;
box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
#wrap li img {
display: block;
width:640px; }
#wrap ul:hover li { width:40px;}
#wrap ul li:hover { width: 640px;}
#wrap .title {
position: absolute;
left:; bottom:;
width: 640px;
background: rgba(0,0,0,0.5);
}
#wrap .title a {
display: block;
color: #fff;
font-size: 16px;
padding: 20px;
}

最终效果如下图:

如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。

作者:Li-Cheng
由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。留下你的脚印,欢迎评论哦。你也可以关注我,一起学习哦!

纯CSS3手风琴图片滑动特效的更多相关文章

  1. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

  2. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  3. html、css、js实现手风琴图片滑动

    手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...

  4. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

  5. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  6. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  7. 纯CSS3创意loading文字特效

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  8. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  9. 【实践】纯jquery实现图片滑动无缝轮播,带左右按钮及控制按钮

    在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...

随机推荐

  1. PreTranslateMessage(MSG* pMsg)专题

    .. BOOL CQuickMosaicDlg::PreTranslateMessage(MSG* pMsg) { if (pMsg->message==WM_KEYDOWN) //键盘按下 { ...

  2. 百度地图的js导入及使用

    做页面,地图可能会用到 1 导入百度地图的js库 <script type="text/javascript" src="http://api.map.baidu. ...

  3. MySQL连接查询(多表查询)

    基本含义 连接就是指两个或两个以上的表(数据源) “连接起来成为一个数据源”. 连接语法的基本形式:from 表1 [连接方式] join 表2 [on 连接条件]; 连接的结果可以当做一个“表”来使 ...

  4. oj错误之char型超出范围

    在oj时遇到一个题 题目本身并不是很难,但在一个数据时出了错,刚开始一直没想通是哪里出了错 下面为源代码 #include <bits/stdc++.h> using namespace ...

  5. codeforces 477D

    题意:给定一个长度<=5000的二进制字符串S,以及一个初始为0的n,有一下两种操作: 1. 输出n(n>=1并且为2进制形式输出) 2.n=n+1 每次选择一种操作.. 求:1.有多少方 ...

  6. ASP.NET MVC Area 区域

    大型网站或项目通常有很多子系统或功能模块,如大型网站可能包含酒店.旅游.机票子系统,通过二级域名来访问,或者一个网站的前台和后台模块,每个团队负责某一子系统或模块,为了各团队进行协同开发,我们可以分不 ...

  7. MODBUS串行通信协议详细说明

    第一章  简介 本文详细地描述了装置在MODBUS 通讯模式下的输入和输出命令.信息和数据,以便第三方使用和开发. 1.1 串行通讯协议的目的 通信协议的作用是使信息和数据在上位机主站和装置之间有效地 ...

  8. RGB-D数据集(SLAM的和行人检测的)

    移动机器人编程一般用mrpt,这个软件来做三维,里面封装了很多常用算法. http://www.mrpt.org/download-mrpt/ SLAM的数据集,其中包括机器人slam http:// ...

  9. SQL SERVER锁(LOCK)知识及锁应用

    提示:这里所摘抄的关于锁的知识有的是不同sql server版本的,对应于特定版本时会有问题. 一 关于锁的基础知识 (一). 为什么要引入锁 当多个用户同时对数据库的并发操作时会带来以下数据不一致的 ...

  10. vue-cli初始化一个项目

    1,换成淘宝源: npm config set registry https://registry.npm.taobao.org/ 检查是否修改成功 npm config get registry 2 ...