本文中要实现的一个纯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. vue v-for 组件传值 enter传值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. mui框架开发aop的跨页面传值

    mui开发跨平台app,其实不乏会涉及到跨页面传值,今天给大家简单介绍一种常用也是简单的传值方法 咱在这里设置一个场景,就是两个页面进入到同一页面展示不同的元素,此时需要在这两个页面各自设置一个区别的 ...

  3. 使用VC6.0编译C++代码的时候报错:fatal error C1071: unexpected end of file found in comment(Mark ZZ)

    fatal error C1071: unexpected end of file found in comment(Mark ZZ) 今天在一论坛上看到一人发帖: 『最近遇到一个奇怪的问题,代码中的 ...

  4. bzoj1004题解

    [题意分析] 给N个元素染色,可以在定置换群的作用下互相转化的染色方案算相同的,问本质不同的染色方案数. [解题思路] 引理:Burnside定理 设集合S=[1,n]∩N,记等价类数为L,给定S上的 ...

  5. Nmap扫描与Tcpdump抓包分析

    扫描与抓包分析 3.1 问题 本案例要求熟悉Linux主机环境下的常用安全工具,完成以下任务操作: 使用NMAP扫描来获取指定主机/网段的相关信息 使用EtterCAP截获明文通信的密码.检测非加密通 ...

  6. NX二次开发-NXOPEN自动切换到工程图模块

    UFUN的API里是没有切换到工程图的函数的,NXOPEN里是有方法可以用的.不过应该是不支持NX9以下的版本. NX9的不能录制出来,在UI类里有方法 NX9+VS2012 #include < ...

  7. [JZOJ 5804] 简单的序列

    思路: 似乎和某次培训的题很像啊... 将左括号记为1,右括号记为-1,那么最终一定加和为0,然后再求最小前缀和. 用dp解决即可. #include <bits/stdc++.h> us ...

  8. 牛客多校第八场 G Gemstones 栈/贪心

    题意: 对于一个序列,把可以把连着三个相同的字母拿走,问最多拿走多少组. 题解: 直接模拟栈,三个栈顶元素相同则答案+1,并弹出栈 #include<bits/stdc++.h> usin ...

  9. Delphi 2010 中的泛型

    Delphi 2010 中的泛型 2010已发布很长时间了,口碑还不错,准备用它开发下一项目,但对泛型等新东西的认识还不够,就搜了一下,发现下面这篇文章,还不错,大家一起补补课吧! C++中的模板.C ...

  10. Python正则表达式如何进行字符串替换实例

    Python正则表达式如何进行字符串替换实例 Python正则表达式在使用中会经常应用到字符串替换的代码.有很多人都不知道如何解决这个问题,下面的代码就告诉你其实这个问题无比的简单,希望你有所收获. ...