1

我正在研究图像之间的纯 CSS3 交叉渐变器。我遇到的问题是它只有两个图像，当第二个图像淡出时，它淡出为白色，而不是直接循环回图像 1。

我不那么工作的小提琴在这里：http: //jsfiddle.net/uQU6y/2/

.item img {
    position:absolute;
    left:0;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f2 {
    -webkit-animation-delay: -4s;
}
4

4 回答 4

1

嗨，请找到您在 html 中给出的jsfiddleid="f1"，但您没有在 css 中使用它。

于 2013-08-12T13:58:46.320 回答
1

这使用了一种非常不同的方法，但从您的示例的外观来看，它可能正是您所需要的。http://jsfiddle.net/ericjbasti/uQU6y/4/这是一个纯 css 交叉淡入淡出，利用当前浏览器淡化背景图像的方式。

.image1{
    background-image:url(http://placehold.it/290x350);
}
.image1:hover{
    background-image:url(http://placehold.it/290x350/000000/ffffff);
}

对于我的快速示例，我所做的只是悬停效果，但您可以通过更改类名轻松控制它。

于 2013-08-12T20:11:05.587 回答
1

1这个解决方案可以改进。如果您使用真实图像，您会清楚地看到最初有粗略的过渡。那是因为您将 f2 设置为 999。请改用：

#f1 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

然后改变动画位如下：

@-webkit-keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes fade {
    0% {opacity: 1;}
    20% {opacity: 0;}
    33% {opacity: 0;}
    53% {opacity: 1;}
    100% {opacity: 1;}
}

这将过渡#f1 而不是#f2，这意味着动画从一开始就很流畅。

于 2014-12-08T02:56:29.037 回答
0

事实证明，这是对 CSS 计时和动画代码位置的简单修复。我使用的代码在 3 个图像上效果很好，但是对于 2 个图像，我需要更改动画的持续时间以消除淡入为白色。我还必须输入动画信息（持续时间、迭代、名称等）这是 JSfiddle：http: //jsfiddle.net/uQU6y/7/

代码的关键部分：

#f2 {
    z-index:999;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 10s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}
于 2013-08-15T08:35:09.870 回答