CSS 褪色多张图片。延迟不透明度过渡。 Webkit 转换延迟
CSS fading multiple images. Delaying opacity transition. Webkit transition delay
我正在尝试淡入 3 张堆叠在一起的图像。仅使用 CSS 转换。
这是我的代码笔:
http://codepen.io/FredHair/pen/MYQZJv?editors=110
我已经设法淡入第一张图片,但不确定如何正确地延迟和淡入第三张图片。
我在这里发现了很多与此类似的问题,但其中 none 帮助我破译了实现此目标所需的确切代码。
我的代码:
HTML
<body>
<div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp- content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>
CSS
#image1{
position: absolute;
left: 200px;
z-index: 3;
}
#image2{
position: absolute;
left: 200px;
z-index: 2;
}
#image3{
position: absolute;
left: 200px;
z-index: 1;
}
#image1:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:1s;
}
#image2:hover {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:3s;
}
}
我最好只使用 CSS 来实现此目的,但如果您知道一个简单的 jQuery 修复方法,我也希望看到它。
感谢您的帮助
B 先生
您需要在 #fadeImage
上设置 :hover
而不是单个图像。这是我的解决方案:
#fadeImage {
position: relative;
}
#fadeImage img {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: opacity 1s linear;
}
#image1 {
z-index: 3;
}
#image2 {
z-index: 2;
}
#image3 {
z-index: 1;
}
#fadeImage:hover #image1 {
opacity: 0;
}
#fadeImage:hover #image2 {
opacity: 0;
transition-delay: 3s;
}
<div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>
我正在尝试淡入 3 张堆叠在一起的图像。仅使用 CSS 转换。
这是我的代码笔:
http://codepen.io/FredHair/pen/MYQZJv?editors=110
我已经设法淡入第一张图片,但不确定如何正确地延迟和淡入第三张图片。
我在这里发现了很多与此类似的问题,但其中 none 帮助我破译了实现此目标所需的确切代码。
我的代码:
HTML
<body>
<div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp- content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>
CSS
#image1{
position: absolute;
left: 200px;
z-index: 3;
}
#image2{
position: absolute;
left: 200px;
z-index: 2;
}
#image3{
position: absolute;
left: 200px;
z-index: 1;
}
#image1:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:1s;
}
#image2:hover {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:3s;
}
}
我最好只使用 CSS 来实现此目的,但如果您知道一个简单的 jQuery 修复方法,我也希望看到它。
感谢您的帮助
B 先生
您需要在 #fadeImage
上设置 :hover
而不是单个图像。这是我的解决方案:
#fadeImage {
position: relative;
}
#fadeImage img {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: opacity 1s linear;
}
#image1 {
z-index: 3;
}
#image2 {
z-index: 2;
}
#image3 {
z-index: 1;
}
#fadeImage:hover #image1 {
opacity: 0;
}
#fadeImage:hover #image2 {
opacity: 0;
transition-delay: 3s;
}
<div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>