更新时间:2022-10-18 21:31:26
可以转换 z-index
,它没有什么意义,也就是说不会导致你明显寻找的交叉淡化效果: z-index
值是整数,当您以最小可能的步骤(整数,无逗号)更改它们时,会导致状态位于另一个之前或之后 - 无过渡半国之间。如果你想在两个元素之间进行连续交叉淡入淡出,你应该在 opacity
上进行转换。
在你的特殊情况下,由于你的DIV不是直接在彼此之上,而只是相互重叠,你可以通过让第二个 DIV
与 img2
(我称它的类为 .img3
),但是使用 z-index:0
和这个CSS规则:
.img1:hover + .img2 {
opacity:0;
}
这会淡出img2,但仍显示img3,但是后面 img1,创造了img1和img2之间转换的印象。
https://jsfiddle.net/2a2epLfv/1/
.img1,.img2,.img3 {border:1px solid black;过渡:1秒; position:absolute;}。img1 {left:20%; height:300px;宽度:300px; z-index:1; background-image:url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);} .img2,.img3 {right:20%;宽度:300px; height:300px; top:100px; background-image:url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);} .img2 {z-index:2;}。 img3 {z-index:0;}。img1:hover + .img2 {opacity:0;}
https://jsfiddle.net/vaf6nv36/1/
can the balloons image slowly transition over the apple image?
I think that I need more transition parameters, or I should use opacity?
can someone help?
html
<div class="img1">
</div>
<div class="img2">
</div>
CSS
.img1, .img2{
border: 1px solid black;
transition: 1s;
position: absolute;
}
.img1{
left: 25%;
height: 500px;
width: 500px;
z-index: 1;
background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}
.img2{
right: 25%;
width: 500px;
height: 500px;
bottom: 0;
z-index: 2;
background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}
.img1:hover{
z-index: 999;
}
Although theoretically you can transition z-index
, it wouldn't make much sense, i.e. would not result in the crossfade effect which you obviously are looking for: z-index
values are integers, which - when you change them in the smallest possible steps (integers, no commas) - results in states either before the other one OR behind the other one - no transitional "half states" in between. If you want to do a kind of continuous crossfade between two elements, you should use a transition on opacity
.
In your particular case, since your DIVs are not directly above each other, but only overlap each other, you can solve that by having a second DIV
identical to img2
(I called its class .img3
), but with z-index: 0
and this CSS rule:
.img1:hover + .img2 {
opacity: 0;
}
This will fade out img2, but still show img3, which however is behind img1, creating the impression of a transition between img1 and img2.
https://jsfiddle.net/2a2epLfv/1/
.img1,
.img2,
.img3 {
border: 1px solid black;
transition: 1s;
position: absolute;
}
.img1 {
left: 20%;
height: 300px;
width: 300px;
z-index: 1;
background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}
.img2,
.img3 {
right: 20%;
width: 300px;
height: 300px;
top: 100px;
background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}
.img2 {
z-index: 2;
}
.img3 {
z-index: 0;
}
.img1:hover+.img2 {
opacity: 0;
}
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>