CSS 动画幻灯片不显示

时间：2021-07-21 23:38:37

标签： html css css-animations carousel slideshow

我正在尝试创建一个非常简单的 css 幻灯片，但我一直遇到无法弄清楚的问题。有两个图像应该作为自动幻灯片旋转。由于某种原因没有发生任何事情，幻灯片应该显示的地方只是呈现白色

/*
  Layout -------------------------
*/
.ou-wrapper table {

  table-layout: fixed;

}



.ou-wrapper td {

  word-wrap: break-word;

}



.ou-body {

  margin-bottom: 50px;
  max-width: 554;
  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

}



.row {

  display: flex;

  justify-content: center;

  align-items: center;

}



.tabletextcolhead {

  color: #FFFFFF;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  margin: 10px 0px;

  font-size: 20px;

}



p {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 16px;

  line-height: 20px;

}



li {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 16px;

  line-height: 20px;

}



input {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 11px;

  line-height: 14px;

}



select {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 11px;

  line-height: 14px;

}

.slideshow im {
  
}


.ou-title h1 {

  font-weight: bold;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  /* font-size: 14px; */

  line-height: 14px;

  color: #E3414F;

  margin-bottom: 0px;

}



.ou-title h2 {

  font-weight: bold;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  font-size: 13px;

  line-height: 14px;

  color: #E3414F;

  margin-bottom: 0px;

}



.ou-title {

  margin: 10px 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.ou-message {

  margin: 10px 15px 25px 15px;

}



.ou-message p {

 font-family: 'Open Sans Condensed', sans-serif, 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

 font-size: 12px;

 line-height: 14px;

}



.ou-register {

  border-radius: 3px;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  background: #FFFFFF;

  color: #E3414F;

  font-size: 14px !important;

  padding: 10px 25px 10px 25px;

  border: solid #E3414F 2px;

  text-decoration: none;

  text-transform: uppercase;

}



.ou-register:hover {

  background: #E3414F;

  color: #FFFFFF;;

  border: solid #E3414F 2px;

  border-radius: 3px;

  text-decoration: none;

  text-transform: uppercase;

}

.ou-support ul {

  list-style-type: none;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 10px;

  line-height: 14px;

  padding-left: 0px;

}



.ou-support ul li {

  font-size: 16px;

  line-height: 20px;

}

.slideshow {
  position: relative;
  height: 300px;
  outline: 1px solid black;
  overflow: hidden;
}
.slideshow img {
  position: absolute;
  opacity: 0;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  animation-name: fade;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  width: 100%;
  height:auo
}
.slideshow img:nth-child(1) {
  animation-delay: 0s;
}
.slideshow img:nth-child(2) {
  animation-delay: 5s;
}

* {
  box-sizing: border-box;
}

  Slideshow -------------------------
*/

.slideshow {
  position: relative;
  display: table;
  text-align: center;
  vertical-align: middle;
  width: 554px;
  height: 370px;
  overflow: hidden;
  box-shadow: 0px 0px 2px 5px #333;
}

.slide {
  position: absolute;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* duration = h */
  -webkit-animation: slide 20s infinite;
          animation: slide 20s infinite;
  /* slide animation */
/*   transform: translateX(100%); */
  /* fade animation */
  opacity: 0;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
  max-width: 554px;
  min-height: 370px;
  height: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  -o-object-fit: cover;
     object-fit: cover;
}

/*
Slideshow calculations:
----------------------
  n = number of images
  t = transition time
  s = stay time
  d = delay time 
  T = total time
  S = show start %
  h = hide start %
  D = delay start %
  a = animation delay

  d = (n - 1)(t + s) - t
  T = n(t + s)
  S = (t/T) x 100%
  h = 100/n%
  D = S + h
  a = (i - 1)(t + s)

  5 images:
  ---------
  n = 5
  t = 1s
  s = 3s
  d = delay time 
  T = total time
  S = show start %
  h = hide start %
  D = delay start %
  i = slide number

  d = (5 - 1)(2 + 3) - 1 = 19s
  T = 5(1 + 3) = 20s
  S = (1/20) x 100% = 5%
  h = 100/5% = 20%
  D = 5 + 20 = 25%

*/

@-webkit-keyframes slide {
  0% {
    /* slide animation: */
/*     -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); */
    /* fade animation: */
    opacity: 0;
  }
  /* S */
  5%,
  /* h */
  20% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
  /* D */
  25%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); */
    /* fade animation: */
    opacity: 0;
  }
}

@keyframes slide {
  0% {
    /* slide animation: */
/*     -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); */
    /* fade animation: */
    opacity: 0;
  }
  /* S */
  5%,
  /* h */
  20% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
  /* D */
  25%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); */
    /* fade animation: */
    opacity: 0;
  }
}

.slide:nth-child(1) {
  /*i = 1*/
  /*animation-delay: 0s;*/
  /*(i - 1)(t + s) = 0s*/
  /*slide T infinite, first-slide t*/
  -webkit-animation: slide 20s infinite, first-slide 1s;
          animation: slide 20s infinite, first-slide 1s;
}

@-webkit-keyframes first-slide {
  0%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
/*     fade animation: */
    opacity: 1;
  }
}

@keyframes first-slide {
  0%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
}

.slide:nth-child(2) {
  /*
    i = 2
    (i - 1)(t + s) = (1)(4s)
  */
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.slide:nth-child(3) {
  /*
    i = 3
    (i - 1)(t + s) = (2)(4s)
  */
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

.slide:nth-child(4) {
  /*
    i = 4
    (i - 1)(t + s) = (3)(4s)
  */
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}

.slide:nth-child(5) {
  /*
    i = 3
    (i - 1)(t + s) = (4)(4s)
  */
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}
<td width="554" bgcolor="#FFFFFF" valign="top">
  <div align="left">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="554">
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
         <tr>
          <td width="20">&nbsp;</td>

          <div class="ou-body">
            <div class="slideshow">
              <img src="https://i.imgur.com/XAmj47u.png.PNG" />
              <img src="https://i.imgur.com/ZtVOJyD.png" />
                          </div>
    </table
<!--Title-->
          <div class="ou-title">
            <h1>
              Welcome To Tesla Online Safety Training
          </h1>
            <hr />
          </div>
          <div style="margin: 10px 15px 25px 15px">

。我什至可以右键单击幻灯片应该显示的位置，然后下载或打开应该渲染的图像。我在这里不知所措。

https://codepen.io/danielalegria/pen/WNjZoOB

1 个答案:

答案 0 :(得分：0)

只需将 from flask import abort try: userID = int(request.form.get("userID")) [...] except: db.rollback() abort(500) 重命名为 fade 即可匹配关键帧。

slide

成为；

.slideshow img {
  position: absolute;
  opacity: 0;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  animation-name: fade; /** this is incorrect**/
  animation-duration: 50s;
  animation-iteration-count: infinite;
  width: 100%;
  height:auo
}

你可以在这里看到结果;

.slideshow img {
  position: absolute;
  opacity: 0;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  animation-name: slide; /** this now matches your keyframe **/
  animation-duration: 50s;
  animation-iteration-count: infinite;
  width: 100%;
  height:auo
}

/*
  Layout -------------------------
*/
.ou-wrapper table {

  table-layout: fixed;

}

.ou-wrapper td {

  word-wrap: break-word;

}

.ou-body {

  margin-bottom: 50px;
  max-width: 554;
  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

}



.row {

  display: flex;

  justify-content: center;

  align-items: center;

}



.tabletextcolhead {

  color: #FFFFFF;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  margin: 10px 0px;

  font-size: 20px;

}



p {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 16px;

  line-height: 20px;

}



li {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 16px;

  line-height: 20px;

}



input {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 11px;

  line-height: 14px;

}



select {

  font-weight: normal;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 11px;

  line-height: 14px;

}

.slideshow im {
  
}


.ou-title h1 {

  font-weight: bold;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  /* font-size: 14px; */

  line-height: 14px;

  color: #E3414F;

  margin-bottom: 0px;

}



.ou-title h2 {

  font-weight: bold;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  font-size: 13px;

  line-height: 14px;

  color: #E3414F;

  margin-bottom: 0px;

}



.ou-title {

  margin: 10px 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.ou-message {

  margin: 10px 15px 25px 15px;

}



.ou-message p {

 font-family: 'Open Sans Condensed', sans-serif, 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

 font-size: 12px;

 line-height: 14px;

}



.ou-register {

  border-radius: 3px;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  background: #FFFFFF;

  color: #E3414F;

  font-size: 14px !important;

  padding: 10px 25px 10px 25px;

  border: solid #E3414F 2px;

  text-decoration: none;

  text-transform: uppercase;

}



.ou-register:hover {

  background: #E3414F;

  color: #FFFFFF;;

  border: solid #E3414F 2px;

  border-radius: 3px;

  text-decoration: none;

  text-transform: uppercase;

}

.ou-support ul {

  list-style-type: none;

  font-family: 'Open Sans Condensed', sans-serif, 'Oswald', sans-serif, Arial, Verdana;

  color: #000000;

  font-size: 10px;

  line-height: 14px;

  padding-left: 0px;

}



.ou-support ul li {

  font-size: 16px;

  line-height: 20px;

}

.slideshow {
  position: relative;
  height: 300px;
  outline: 1px solid black;
  overflow: hidden;
}
.slideshow img {
  position: absolute;
  opacity: 0;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  animation-name: slide;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  width: 100%;
  height:auo
}
.slideshow img:nth-child(1) {
  animation-delay: 0s;
}
.slideshow img:nth-child(2) {
  animation-delay: 5s;
}

* {
  box-sizing: border-box;
}

  Slideshow -------------------------
*/

.slideshow {
  position: relative;
  display: table;
  text-align: center;
  vertical-align: middle;
  width: 554px;
  height: 370px;
  overflow: hidden;
  box-shadow: 0px 0px 2px 5px #333;
}

.slide {
  position: absolute;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* duration = h */
  -webkit-animation: slide 20s infinite;
          animation: slide 20s infinite;
  /* slide animation */
/*   transform: translateX(100%); */
  /* fade animation */
  opacity: 0;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
  max-width: 554px;
  min-height: 370px;
  height: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  -o-object-fit: cover;
     object-fit: cover;
}

/*
Slideshow calculations:
----------------------
  n = number of images
  t = transition time
  s = stay time
  d = delay time 
  T = total time
  S = show start %
  h = hide start %
  D = delay start %
  a = animation delay

  d = (n - 1)(t + s) - t
  T = n(t + s)
  S = (t/T) x 100%
  h = 100/n%
  D = S + h
  a = (i - 1)(t + s)

  5 images:
  ---------
  n = 5
  t = 1s
  s = 3s
  d = delay time 
  T = total time
  S = show start %
  h = hide start %
  D = delay start %
  i = slide number

  d = (5 - 1)(2 + 3) - 1 = 19s
  T = 5(1 + 3) = 20s
  S = (1/20) x 100% = 5%
  h = 100/5% = 20%
  D = 5 + 20 = 25%

*/

@-webkit-keyframes slide {
  0% {
    /* slide animation: */
/*     -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); */
    /* fade animation: */
    opacity: 0;
  }
  /* S */
  5%,
  /* h */
  20% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
  /* D */
  25%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); */
    /* fade animation: */
    opacity: 0;
  }
}

@keyframes slide {
  0% {
    /* slide animation: */
/*     -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); */
    /* fade animation: */
    opacity: 0;
  }
  /* S */
  5%,
  /* h */
  20% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
  /* D */
  25%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); */
    /* fade animation: */
    opacity: 0;
  }
}

.slide:nth-child(1) {
  /*i = 1*/
  /*animation-delay: 0s;*/
  /*(i - 1)(t + s) = 0s*/
  /*slide T infinite, first-slide t*/
  -webkit-animation: slide 20s infinite, first-slide 1s;
          animation: slide 20s infinite, first-slide 1s;
}

@-webkit-keyframes first-slide {
  0%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
/*     fade animation: */
    opacity: 1;
  }
}

@keyframes first-slide {
  0%,
  100% {
    /* slide animation: */
/*     -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); */
    /* fade animation: */
    opacity: 1;
  }
}

.slide:nth-child(2) {
  /*
    i = 2
    (i - 1)(t + s) = (1)(4s)
  */
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.slide:nth-child(3) {
  /*
    i = 3
    (i - 1)(t + s) = (2)(4s)
  */
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
}

.slide:nth-child(4) {
  /*
    i = 4
    (i - 1)(t + s) = (3)(4s)
  */
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}

.slide:nth-child(5) {
  /*
    i = 3
    (i - 1)(t + s) = (4)(4s)
  */
  -webkit-animation-delay: 16s;
          animation-delay: 16s;
}

相关问题
最新问题