html5游戏图片渐隐,带CSS过渡效果的HTML5图片标题动画

带CSS过渡效果的HTML5图片标题动画技术已经被许多WEB前端开发者使用了，我们将使用一个简短的教程来说明这种效果是如何实现的。在这个教程中列举了两个例子：一个是背景图片淡入淡出效果，一个是背景图片水平滚动效果。这两种效果的图片标题都是滑动显示。

HTML5结构的代码如下：

Hong Kong Skyline at Night

Monument Valley

我们需要给每一个

元素设置relative定位。这样便于制作图片的淡入淡出效果。通过设置overflow: hidden;来隐藏所有超出显示区域的东西，然后还要把

元素设置为并排浮动。

注意：以下代码都没有使用浏览器厂商的前缀，实际使用中需要添加上。

div#sliding-container figure { margin: 0;

padding: 0;

position: relative;

width: 50%;

font-size: 0;

overflow: hidden;

}

div#sliding-container figure:nth-child(1) { float: left; }

div#sliding-container figure:nth-child(2) { float: right; }

图片的标题的背景色使用RGBA模式的颜色，定位设置为绝对定位：

div#sliding-container figure figcaption{

background:rgba(0,0,0,.5);

font-size:1rem;

width:100%;

color:#fff;

padding:.3rem;

position:absolute;

margin:0;

transition:.6s;

text-align: center;

}

要制作当用户鼠标滑过图片时图片标题升起的效果是非常简单的：可以简单的为

元素附加一个:hover伪类，用于改变

的位置。

div#sliding-container figure:hover figcaption { transform: translateY(-2rem); }

接下来要使

元素中的图片动起来。首先，我们需要正确设置它们：

div#sliding-container figure img {

max-width: 100%;

transition-duration: 2.4s;

transition-property: transform, opacity;

transition-timing-function: linear;

}

div#sliding-container figure:nth-child(1) img { max-width: 133%; }

第一个demo的图片要比容器大，要将图片从右向左移动：

div#sliding-container figure:nth-child(1):hover img { transform: translateX(-24%); }

在第二个demo中，因为图片是绝对定位，所以两张图片会互相重叠。我们需要在鼠标滑过图片时渐隐第一张图片，如果使用类选择器来查找图片会相对复杂，我们可以简单的给

元素一个ID：

div#sliding-container figure:nth-child(2):hover img:nth-child(1) { opacity: 0; }

到此两种带CSS过渡效果的HTML5图片标题动画都做好了，一起来体验一下吧！