时间戳

首页 > 解决方案 > 动画幻灯片 CSS 对齐问题

html - 动画幻灯片 CSS 对齐问题

问题描述

我制作了一个 4 幻灯片的文本动画，从右到左，但我似乎无法理解如何解决这个宽度和高度错误。我希望文本始终位于幻灯片的中间，但如果您展开或收缩浏览器，它就会丢失。

宽度和高度显然存在问题，但无论您如何操作浏览器窗口大小，我似乎都找不到始终将文本保持在中间的适当比例。

代码如下：

.frame{
  border: 2px solid red;
  height: 80px;
  overflow: hidden;
}
.slidewrapper{
  border: 2px solid blue;
  width: 400%;
  height: 100%;
  animation: slideshow 24s;
  animation-iteration-count:infinite;
  position: relative;
   left: 30px;
   top: -150px;
}
.slide{
  text-align: center;
  height: 100%;
  width: 25%;
  float: right;
  padding-top: 4%;
  font-size: 13px;
}
.p1{
  background-color: hotpink;
}
.p2{
  background-color: blue;
}
.p3{
  background-color: teal;
}
.p4{
  background-color: green;
}
@keyframes slideshow {
  0%{margin-left: -10%  }
  25%{margin-left: -100% }
  50%{ margin-left: -200% }
  75%{margin-left: -300%  }
  }
}
<div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">
        Free shipping and handling on order over $50. CODE:<i>FREE50</i>
      </div>
      
      <div class='slide p2'>  <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p3'> <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p4'><p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
    </div>
 </div>

标签： htmlcssflexbox

解决方案

您需要指定固定padding-top而不是百分比，其中填充由单位而不是屏幕尺寸确定：

    .frame{
      border: 2px solid red;
      height: 80px;
      overflow: hidden;
    }
    .slidewrapper{
      border: 2px solid blue;
      width: 400%;
      height: 100%;
      animation: slideshow 24s;
      animation-iteration-count:infinite;
      position: relative;
       left: 30px;
       top: -150px;
    }
    .slide{
      text-align: center;
      height: 100%;
      width: 25%;
      float: right;
      padding-top: 150px;
      font-size: 13px;
    }
    .p1{
    background-color: hotpink;
  }
    .p2{
    background-color: blue;
    }
    .p3{
    background-color: teal;
    }
    .p4{
    background-color: green;
    }
    @keyframes slideshow {
      0%{margin-left: -10%  }
      25%{margin-left: -100% }
      50%{ margin-left: -200% }
      75%{margin-left: -300%  }
      }
    }
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">Free shipping and handling on order over $50. CODE:
        <i>FREE50</i></div>
      <div class='slide p2'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p3'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p4'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
    </div>
  </div>

</body>

</html>

推荐阅读