本文中要实现的一个纯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. Web API 接口参考

    Web API 接口参考:https://developer.mozilla.org/zh-CN/docs/Web/API

  2. Kotlin Hello World

    { https://github.com/zhmmmm/Kotlin }

  3. HTML——表单标签

    表单标签(掌握) 现实中的表单,类似我们去银行办理信用卡填写的单子. 如下图: 目的是为了收集用户信息. 在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单. 在HTML中,一个完 ...

  4. Python获取房价信息和导出EXCEL

    房价与生活息息相关,那么各地区房价情况和差别咋样呢?  可以打开网站或手机APP去查询一下,不过查看到的数据有限,很不过瘾~ 作为一个合格的程序员,要懂得用代码解决问题! 第一步:打开一个房产交易平台 ...

  5. centos6|centos7防火墙区别 | 网络配置区别

    CentOS 6 Linux防火墙 service iptables status (功能描述:查看防火墙状态) chkconfig iptables –list (功能描述:查看防火墙开机启动状态) ...

  6. CodeForces-1221A-2048 Game-思维题

    You are playing a variation of game 2048. Initially you have a multiset ss of nn integers. Every int ...

  7. VMware Workstation 添加磁盘 挂载目录(centos)

    参考文档: Linux命令大全 需求:测试环境虚拟机某个目录下空间不足,准备通过添加一块磁盘,并将该目录挂载到该磁盘 前面几步在测试服务器上操作的,截图困难,所以网上找了几张设置图 关闭虚拟机(没测试 ...

  8. PAT_A1106#Lowest Price in Supply Chain

    Source: PAT A1106 Lowest Price in Supply Chain (25 分) Description: A supply chain is a network of re ...

  9. solr 如何实现精确查询

    第一条和第三条不应该出现的. 解决办法

  10. Spring Boot集成Shiro实战

    Spring Boot集成Shiro权限验证框架,可参考: https://shiro.apache.org/spring-boot.html 引入依赖 <dependency> < ...