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

观看演示

HTML代码

通过上的演示，估计你已经能猜到，它的HTML结果应该是一个父元素里包含多个子元素，没错：这里用的是一个ol和其子元素li。


CSS代码

CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。

非常简单的几段CSS代码就能实现我们要求的动作，但这里有几个事情需要注意：

  • 最好要设置overflow-x: hidden; ，以免出现奇怪的效果。
  • 我们用两个transition-属性控制图片展示的宽度，起初都是显示一半，当鼠标悬停在某个图片上时，宽度增加。

这里我们只使用了几个图片，但图片的个数是不受限制的。

观看演示

文字来自：http://www.webhek.com/css-kwicks

纯CSS3实现图片展示特效的更多相关文章

  1. 纯CSS3手风琴图片滑动特效

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 制作CSS3制作手风琴图片滑动效果,我们仅 ...

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

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

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

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

  4. 纯CSS3文字Loading动画特效

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

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

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

  6. 纯CSS3创意loading文字特效

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

  7. 7种html5css3网页图片展示特效代码

    鼠标拖拽图片渐变透明切换特效 mobile手机左右滑动切换幻灯片 游戏透明提示图层幻灯片特效 可以编辑滚动条灯片颜色的scroll插件 几种文字动画显示插件代码 360度背景图片旋转的css3动画 左 ...

  8. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  9. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

随机推荐

  1. notepad++去换行（简单、快捷）

    文本处理问题 这个方式可以快捷处理, 不用Linux命令, linux 与window之间的文件转换很烦人, 这个方法可以处理

  2. Delphi 日期函数列表

    引用单元 :DateUtils CompareDate 比较两个日期时间值日期部分的大小CompareDateTime 比较两个日期时间值的大小CompareTime 比较两个日期时间值时间部分的大小 ...

  3. php基本，输出 ，变量

    <?php   //php开头//单行注释/*多行注释*/ echo "hello word";//输出 方式连续输出多个字符串print"hello word&q ...

  4. 2017-3-7html基础

    一:<html><!--html文档的开始--> <head><!--头标签,html文档的开头,来描述html文档的信息,head之间的内容不会在浏览器中显 ...

  5. NX二次开发-UFUN特征选择对话框UF_UI_select_feature

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //特征选择对话框 char sMessage[] = "特征 ...

  6. 【Python】模拟登录上海西南某高校校园网 (jaccount)

    好久没写东西了,最近学习了一下模拟登录,以校园网为例,作一记录. 去年的时候写过一篇模拟登录的文章,用的是登录后的cookies,这种操作比较傻瓜,也不智能,不够自动化,本质还是手动登录. 这次我尝试 ...

  7. 安装zabbix需求环境

    yum install gcc gcc-c++ make mysql-server mysql-devel libcurl-devel net-snmp-devel php php-ldap php- ...

  8. Python中的动态类

    Python中的动态类 有这样一个需求,我有SegmentReader.PostagReader.ConllReader这三个Reader,他们都继承于一个Reader类.在程序运行中,由用户通过se ...

  9. ionic-CSS：ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  10. 基于Netty的RPC架构学习笔记（三）：netty客户端

    文章目录 举个