社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 纯CSS3实现图片展示特效_html/css_WEB-ITnose

纯CSS3实现图片展示特效_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:51:02
原创
1215 人浏览过

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

观看演示

HTML代码

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



CSS代码

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



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

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



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

    观看演示

     

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

     

    相关标签：
    纯CSS3实现图片展示特效
    来源：php.cn
    上一篇：CSS3之圆角_html/css_WEB-ITnose 下一篇：css5种实现垂直居中_html/css_WEB-ITnose
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
    来自于 2024-04-29 11:01:01
    0
    3
    2174
    google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
    来自于 2024-04-23 00:22:19
    0
    11
    2325
    子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
    来自于 2024-04-19 15:37:47
    0
    1
    1958
    父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
    来自于 2024-04-18 23:52:34
    0
    1
    1840
    关于CSS思维导图的课件在哪？ 课件
    来自于 2024-04-16 10:10:18
    0
    0
    1887
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板