纯CSS3手风琴图片滑动特效
2014-07-29 00:00
525 查看
要求
必备知识
基本了解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="images/6.png"> </a> </li> </ul> </div>
2,添加CSS样式,关键点是li中的transition属性,ul和li的:hover状态。
*{margin:0;padding:0;} 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: 0; bottom: 0; width: 640px; background: rgba(0,0,0,0.5);
} #wrap .title a { display: block; color: #fff; font-size: 16px; padding: 20px;
}
最终效果如下图:
如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。
作者:Li-Cheng
出处: http://www.cnblogs.com/Li-Cheng/p/3874725.html
由于本人水平有限,文章在表述和代码方面如有不妥之处,欢迎批评指正。留下你的脚印,欢迎评论哦。你也可以关注我,一起学习哦!
相关文章推荐
- 纯CSS3手风琴图片滑动特效
- javascript经典特效分享 手风琴、轮播图、图片滑动
- 移动手机APP手指滑动切换图片特效附源码下载
- 适合移动mobile的css3弹性堆叠图片切换特效
- 纯css3鼠标经过图片显示描述特效
- flash特效原理:图片滑动放大效果(2)
- iHover实用的CSS3图片鼠标悬停动画特效插件
- 30款css3实现的鼠标经过图片显示描述特效
- 酷炫CSS3鼠标经过图片显示特效
- 使用 CSS3 动画实现的 3D 图片过渡特效
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
- android-image-slide-panel图片照片墙的加载和滑动特效
- flash特效原理:图片滑动放大效果(2)
- 基于CSS3图片悬停放大特效
- CSS3图片旋转特效
- 纯CSS3实现图片展示特效
- CSS3实战开发:手把手教你纯CSS3手风琴特效实战开发(无需JS代码或插件)
- 黄聪:手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图
- 推荐用简单的CSS3代码实现图片展示特效
- Android图片上下左右滑动特效--Recycker实现