本文中要实现的一个纯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. Mybatis3中@SelectProvider传递参数

    一.通常情况下我们使用实体类或者vo类来传递参数,这样可以在provider中直接使用#{param}来获取参数 二.在mybatis3.3以下版本只能传递一个参数,所以如果要传递多个参数必须封装成M ...

  2. CSS盒模型及应用

    其实,CSS就三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器 ...

  3. UML关系类图

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  4. sql语句创建表

    create table `search_custom_mall` ( `id` ) NOT NULL PRIMARY KEY AUTO_INCREMENT, `uid` ) NOT NULL, `n ...

  5. 01二重退背包+组合数学——cf1111d

    退背包进阶,还是挺难想的 /* dp1[k]表示取到体积k的方案数 dp2[i][j][k]表示左侧必选ij的情况下,取到体积k的方案数 dp2[i][j][k]=dp1[k]-左侧不选ij的方案数 ...

  6. paper 15 ：整理的CV代码合集

    这篇blog,原来是西弗吉利亚大学的Li xin整理的,CV代码相当的全,不知道要经过多长时间的积累才会有这么丰富的资源,在此谢谢LI Xin .我现在分享给大家,希望可以共同进步!还有,我需要说一下 ...

  7. NX二次开发-UFUN发射线函数UF_MODL_trace_a_ray的用法

    今天是国庆节,放假休息懒得动,没有出去玩,在家研究一下发射线函数UF_MODL_trace_a_ray.小弟以前在软件公司混的时候,当时我做的那个项目就用到了UF_MODL_trace_a_ray,当 ...

  8. 2018-2019-2-20175323 java实验二《Java面向对象程序设计》

    单元测试 1.在IDEA中新建项目并输入单元测试的代码 2.在IDEA中下载Junit,我发现Junit已经存在了 3.新建test文件 遇到的问题 发现Junit红字解析不了 解决办法:查找到jun ...

  9. hdu多校第八场 1009 （hdu6665） Calabash and Landlord 计算几何/dfs

    题意: 给定两个矩形,输出这两个矩形把平面分成了多少块. 题解: 本来是道计算几何的大讨论,被我生生写成了bfs. 离散化边,注意不重合的边中间要空出来一格,四周也要空出来一圈,然后暴力bfs计算一共 ...

  10. 剑指offer——11矩阵覆盖

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法?   题解: 使用递归或者动态规划,明显,递归没有动态规划优 ...