我创建了这个交叉渐变:
<!--- Home --->
<div class="container-fluid home" id="home">
<section class="row">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
<h1 class="main">urbanphenomena</h1>
<h1 class="sub-main">design+research</h1>
</div>
</section>
</div>
<!---------- CrossFade ---------->
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
这是css:
/*********** CrossFade Images ***********/
.crossfade > figure:nth-child(1) {
animation-delay: 0s;
background-image: url('https://dw9to29mmj727.cloudfront.net/misc/newsletter-naruto3.png');
}
.crossfade > figure:nth-child(2) {
animation-delay: 9s;
background-image: url('https://images3.alphacoders.com/671/671375.png');
}
.crossfade > figure:nth-child(3) {
animation-delay: 15s;
background-image: url('http://www.zebumob.com/i/2017/02/naruto-hokage-wallpapers-1080p.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 21s;
background-image: url('http://2.bp.blogspot.com/-Rp2zvt0SBnI/VCgqHtHTi8I/AAAAAAAAABc/HooancZAvVA/s1600/naruto_angry.jpg');
}
/*********** CrossFade Animation ***********/
@keyframes
imageAnimation { 0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
我面临的问题是,文字随着交叉淡化逐渐消失,我希望它能够被修复而不会淡出图像!
另外,当网站加载时,你会看到图像立即消失,我不希望动画在3秒后开始...
另外,当你看到交叉渐变时,在每张幻灯片之后,它会显示一个白色背景,我认为该类.home负责这一点! 我该如何解决?
body, html {
overflow-x:hidden;
}
/*********** CrossFade ***********/
.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
/*********** CrossFade Images ***********/
.crossfade > figure:nth-child(1) {
animation-delay: 0s;
background-image: url('https://dw9to29mmj727.cloudfront.net/misc/newsletter-naruto3.png');
}
.crossfade > figure:nth-child(2) {
animation-delay: 9s;
background-image: url('https://images3.alphacoders.com/671/671375.png');
}
.crossfade > figure:nth-child(3) {
animation-delay: 15s;
background-image: url('http://www.zebumob.com/i/2017/02/naruto-hokage-wallpapers-1080p.jpg');
}
.crossfade > figure:nth-child(4) {
animation-delay: 21s;
background-image: url('http://2.bp.blogspot.com/-Rp2zvt0SBnI/VCgqHtHTi8I/AAAAAAAAABc/HooancZAvVA/s1600/naruto_angry.jpg');
}
/*********** CrossFade Animation ***********/
@keyframes
imageAnimation { 0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/*********** General Settings ***********/
.home {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 9em 0 45em 0;
color: white;
}
h2 {
font-weight:600;
}
/*********** Home ***********/
.home h1 {
font-family: 'Open Sans';
font-size: 5em;
}
.main {
text-shadow: 0px 0px 10px #696969;
color: #f6f6f6;
font-weight: 900;
}
.sub-main {
font-weight: 100;
color: white;
text-shadow: 0px 0px 50px #696969 !important;
}
<!--- Home --->
<div class="container-fluid home" id="home">
<section class="row">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
<h1 class="main">urbanphenomena</h1>
<h1 class="sub-main">design+research</h1>
</div>
</section>
</div>
<!---------- CrossFade ---------->
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>