纯CSS3手风琴图片滑动特效
要求
必备知识
基本了解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;
}
最终效果如下图:
如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。
纯CSS3手风琴图片滑动特效的更多相关文章
- 纯CSS3实现图片展示特效
本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- html、css、js实现手风琴图片滑动
手风琴图片滑动是我最近学的一个图片的效果,感觉不错,分享给大家. 最终效果见 :http://gjhnstxu.me/squeezebox/demo.html 详细代码如下: html代码: < ...
- 纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览 ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 纯CSS3创意loading文字特效
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- 图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <s ...
- 【实践】纯jquery实现图片滑动无缝轮播,带左右按钮及控制按钮
在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...
随机推荐
- 阿里云 oss实时日志查询
实时日志查询 更新时间:2019-01-29 10:31:49 编辑 · 本页目录 开启实时日志查询 查询实时日志 参考文档 用户在访问 OSS 的过程中,会产生大量的访问日志.实时日志查询功能将 O ...
- 20155326刘美岑 2016-2017-2 《Java程序设计》第5周学习总结
20155326刘美岑 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 使用 try.catch (1)java中所有的错误都会被打包为对象,如果愿意,可以尝 ...
- 在Win环境下配置java的环境进行开发步骤
1.下载官方JDK,网址如下 http://www.oracle.com/technetwork/java/javase/downloads/index.html
- VS2008 安装WINCE插件报错 ToolsMsmCA(Error)解决方案___VS2008
在win7系统,VS2008环境下安装EFMS9280_SDK.msi文件出现报错 ToolsMsmCA(Error):IHxFilters filter registration failure: ...
- centos7 修改默认启动级别
systemctl set-default multi-user.target 设定默认为字符界面,也就是3 systemctl set-default graphical.target ...
- 7.代理handler
简单的自定义opener() import urllib.request #构建一个HTTPHandler处理器对象,支持处理HTTP请求 http_handler=urllib.request.HT ...
- poj 2262 Goldbach's Conjecture
素数判定...很简单= =.....只是因为训练题有,所以顺便更~ #include<cstdio> #include<memory.h> #define maxn 50000 ...
- 作业调度系统quartz.net
任务调度在我们日常开发过程中非常常见,比如:每天晚上0点自动执行某某操作:每周三晚上2点执行某某操作:......当然,我们处理这类问题的方法也有很多,比如:sql的自动任务:windows上创建任务 ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
[源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) App ...
- linux安装mysql详细步骤
最近买了个腾讯云服务器,搭建环境. 该笔记用于系统上未装过mysql的干净系统第一次安装mysql.自己指定安装目录,指定数据文件目录. linux系统版本: CentOS 7.3 64位 安装源文件 ...