本文中要实现的一个纯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. uboot刷机

    ath> tftp xx.zpk Trying eth0 Using eth0 device TFTP from server 192.168.1.104; our IP address is ...

  2. vue-组件之间的通信：

    组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...

  3. 微信H5授权登陆

    Controllerpackage com.iimscloud.auth.provider.controller; import org.springframework.beans.factory.a ...

  4. NX二次开发-uc1600字符串对话框

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> UF_initialize(); char* cue = "输入框&quo ...

  5. 基于SPI的数据报过滤原理与实现

    一.个人防火墙技术概述 随着网络安全问题日益严重,广大用户对网络安全产品也越来越关注.防火墙作为一种网络安全工具,早已受到大家的青睐.在PC机上使用的个人防火墙,很大程度上成为广大网民的安全保护者.W ...

  6. iOS开发UIResponder简介API

    #import <Foundation/Foundation.h> #import <UIKit/UIKitDefines.h> #import <UIKit/UIEve ...

  7. [kuangbin带你飞]专题一 简单搜索 - K - 迷宫问题

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...

  8. Spring 源码学习——加载 Bean

    继上次注册 bean 之后好久没更新,这两天有空查了查资料也自己看了看 spring BeanFactory 的 getBean(beanName); 这个方法.因时间有限不能像之前那样复制代码并一行 ...

  9. Springboot-WebSocket获取HttpSession问题

    换了新工作,第一个任务就是和这个有关,以前没接触过,没办法,各种度娘.谷哥,大部分都是只言片语,要么就是特定的配置环境还不贴配置--,踩坑无数, 遂整理成笔记 WebSocket协议 WebSocke ...

  10. mysql key分区,分区数制定

    我相信不 太注意的同学肯定会入坑,今天我差点也入坑了,后面自己问自己如果我用key分区,自己问自己 我的分区数应该是多少??? 后面我陷入了沉思......... 我第一次想先随便弄一个分区数,在本地 ...