使用CSS3制作图片开门展示标题特效

查看演示

在制作一个页面的时候，对于某幅图片的标题如何展示的方法有许多的解决方案。可以使用从下往上滑动、淡入淡出等效果，再炫酷一些的效果如纯CSS3炫酷3D折叠面板动画特效。在网上还可以看到一些图片开门的效果：一幅图片从中间切开向两端收缩，图片的标题在图片下面展示出来。他们使用的是用ps等工具将一幅图片处理为两半，在用这两半图片来做动画效果。在这篇文章中，我们将制作相同的效果，但是只用一张图片，使用CSS来处理这张图片，达到这种开门展示图片标题的效果。

这个技术是使用一个div来作为图片的容器，用于制作开门效果的两部分图片分别是原图片的两个clip。当鼠标滑过图片时，两个clip分别向上和向下运动，这时，div中的span内的文字（图片标题）便被展示出来。

<div id="splitter">     <span>Road To Nowhere</span>     <img src="road-to-nowhere.jpg" alt>     <img src="road-to-nowhere.jpg" alt>     <img src="road-to-nowhere.jpg" alt="" style="position: static; opacity: 0"> </div>

基本的CSS样式如下：

div#splitter {     position: relative;overflow: hidden;     width: 500px; background: #0057a7;     font-family: Blue Highway, Arial, sans-serif;     color: #fff; margin: 0 auto;     font-size: 0; } div#splitter img {     position: absolute;     transition: 1s all ease-in-out;     width: 100%; } div#splitter span {     position: absolute; font-size: 8rem;     top: 150px; left: 100px; }

上面的CSS代码中使用overflow: hidden将图片的两个用于开门的副本隐藏起来。下面我们要用nth-of-type选择器和clip来制作图片的clip和动画效果。

div#splitter img:nth-of-type(1) {     clip: rect(0px,500px,250px,0px); } div#splitter img:nth-of-type(2) {     clip: rect(250px,500px,500px,0px); } div#splitter:hover img:nth-of-type(1) {     transform: translateY(-150px); } div#splitter:hover img:nth-of-type(2) {     transform: translateY(150px); }

这个图片开门特效的一个缺点是它不具备响应式效果，因为支持clip的浏览器不允许长度属性使用除了像素之外的其它单位。除了这个缺点，这个图片开门效果还是非常完美的。

查看演示

本文版权属于jQuery之家，转载请注明出处：http://www./ziliaoku/qianduanjiaocheng/201503011444.html

Previous:
上一篇：通过HTML和CSS隐藏和显示元素的4种方法

Next:
下一篇：没有了