纯CSS3实现图片展示特效
2016-07-17 21:22
696 查看
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能。而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。
观看演示
通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个
CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。
非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意:
最好要设置
我们用两个
这里我们只使用了几个图片,但图片的个数是不受限制的。
观看演示
5年前的时候我们根本无法用这么简单的代码实现这么漂亮的效果。随着浏览器的进步,javascript和CSS的发展,Web程序员的工作将变得越来越轻松。
观看演示
HTML代码
通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素
li。
<ul id="kwicks"> <li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li> <li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li> <li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li> <li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li> </ul>
CSS代码
CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。/* structure */ #kwicks { width: 590px; overflow-x: hidden; } #kwicks:hover li a { width: 100px; } #kwicks li { float: left; overflow-x: hidden; display: block; } #kwicks li:hover a { width: 285px !important; } /* individual kwicks */ #kwicks li a { display: block; text-indent: -9999px; width: 134px; height: 143px; transition-property: width; transition-duration: 1s; }
非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意:
最好要设置
overflow-x: hidden;,以免出现奇怪的效果。
我们用两个
transition-属性控制图片展示的宽度,起初都是显示一半,当鼠标悬停在某个图片上时,宽度增加。
这里我们只使用了几个图片,但图片的个数是不受限制的。
观看演示
5年前的时候我们根本无法用这么简单的代码实现这么漂亮的效果。随着浏览器的进步,javascript和CSS的发展,Web程序员的工作将变得越来越轻松。
相关文章推荐
- CSS3滚动视差效果的制作技巧
- js获取计算后的样式表
- TextView设置个别字体样式
- CSS浮动(float,clear)通俗讲解
- Sublime CSS属性代码提示
- CSS技巧收集——巧用滤镜
- css3
- CSS 三列平分
- modernizr css3、h5兼容方案
- 在慕课学习HTML与CSS基础课程的一些笔记
- Word 2013自定义样式
- CSS3过渡transition
- CSS box-reflect倒影效果
- css布局之"display"属性
- CSS font-smoothing
- CSS3 nth 伪类选择器
- CSS3新特性2D、3D效果讲解
- CSS3滤镜
- CSS中的line-height百分比
- CSS基础课程笔记