Html 转换时间不适用于CSS3
我正在制作一个有完整背景图片转换的网站。 问题是动画,我不能让它们正常工作。我希望它们能从一个图像淡入另一个图像,而不会在图像之间出现黑屏。这是我的现场网站: 我尝试了很多方法,但我无法解决这个问题,即使是在试图改变时间的时候 有人知道如何解决这个问题吗? 这是我目前的代码: HTML:Html 转换时间不适用于CSS3,html,css,Html,Css,我正在制作一个有完整背景图片转换的网站。 问题是动画,我不能让它们正常工作。我希望它们能从一个图像淡入另一个图像,而不会在图像之间出现黑屏。这是我的现场网站: 我尝试了很多方法,但我无法解决这个问题,即使是在试图改变时间的时候 有人知道如何解决这个问题吗? 这是我目前的代码: HTML: 我发现的使过渡交叉淡入淡出而不是穿过黑色的最快方法是调整@keyframes以延长不透明度:1倍: 像这样的。天哪。。谢谢你,伙计!我头痛,因为我无法解决这个问题=D测试链路工作正常。你可以看看,testes-
我发现的使过渡交叉淡入淡出而不是穿过黑色的最快方法是调整@keyframes以延长不透明度:1倍:
像这样的。天哪。。谢谢你,伙计!我头痛,因为我无法解决这个问题=D测试链路工作正常。你可以看看,testes-cmt.bl.ee再次感谢。对不起,我不能给你一个+代表,因为我只有不到15个。太好了,很高兴它能工作。这是一个非常巧妙的纯CSS幻灯片,你正在使用。是的,我知道有一些JS等,但我想保持我的网站所有的HTML和CSS,除了倒计时我想放。但是仍然找不到一个很好的教程。我是新的先进技术,建立一个专业的网页设计师。
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
</ul>
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 32s linear infinite 0s;
-moz-animation: imageAnimation 32s linear infinite 0s;
-o-animation: imageAnimation 32s linear infinite 0s;
-ms-animation: imageAnimation 32s linear infinite 0s;
animation: imageAnimation 32s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 32s linear infinite 0s;
-moz-animation: titleAnimation 32s linear infinite 0s;
-o-animation: titleAnimation 32s linear infinite 0s;
-ms-animation: titleAnimation 32s linear infinite 0s;
animation: titleAnimation 32s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
30% { opacity: 1 }
40% { opacity: 0 }
100% { opacity: 0 }
}