CSS background-image Crossfade

时间:2017-04-12 08:48:55

标签: html css cross-fade

我创建了这个交叉渐变:

<!--- 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>

0 个答案:

没有答案