每次内容改变时翻卡

问题描述 投票：0回答：2

每次盒子里的内容发生变化时，即每秒、每分钟、每小时或每天过去后，我都想翻转卡片。

我尝试将变换和旋转属性直接应用于框，但它不起作用，因为它会导致框内的文本旋转 180 度而不是翻转卡片。

.container {
  background-color: #211D2E;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#midsec {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  top: 104px;
  width: 131vh;
  height: 52%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

.container p {
  color: #FFFEFF;
  font-family: hat;
  font-weight: 700;
  font-size: xx-large;
  letter-spacing: 2px;
  position: relative;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  align-items: center;
  justify-content: center;
}

.container span {
  font-family: hat;
  color: hsl(237, 18%, 59%);
}

#stars {
  margin-left: 5%;
  max-width: 73%;
}

#hills {
  max-width: 100%;
  height: 34vh;
  margin-top: 5%;
}

.top-box {
  width: 100%;
  display: grid;
  background-color: #34364F;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 21vh;
  color: #FA5D86 !important;
  letter-spacing: 3px;
}

.name {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 11px;
}
<div class="container">
  <img src="images/bg-stars.svg" alt="none" id="stars">
  <div id="midsec">
    <p>We're launching soon</p>
    <span class="name" style="grid-row: 3; grid-column: 1;">Days</span>
    <span class="name" style=" grid-row: 3; grid-column: 2;">Hours</span>
    <span class="name" style=" grid-row: 3; grid-column: 3;">Minutes</span>
    <span class="name" style=" grid-row: 3; grid-column: 4;">Seconds</span>
    <span class="top-box" id="days" style="grid-column: 1;"> </span>
    <span class="top-box" id="hours" style="grid-column: 2;"></span>
    <span class="top-box" id="mins" style="grid-column: 3;"></span>
    <span class="top-box" id="seconds" style="grid-column: 4;"></span>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

javascript html css timer flip
2个回答
0
投票
  1. 在
    transition
    中添加
    .top-box
    属性：
    transition: transform 0.6s;
  2. 为
    CSS
    添加以下
    .flip
    ，将使用
    JS
    动态添加：
.flip {
  transform: rotateX(90deg);
}
  1. 添加以下
    script
    以显示计时器和翻转功能：
<script>
  function updateTimer() {
    const endDate = new Date('2024-08-10T00:00:00Z');
    const now = new Date();
    const timeDiff = endDate - now;

    if (timeDiff <= 0) {
      document.getElementById('days').textContent = '00';
      document.getElementById('hours').textContent = '00';
      document.getElementById('mins').textContent = '00';
      document.getElementById('seconds').textContent = '00';
      return;
    }

    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    const daysElement = document.getElementById('days');
    const hoursElement = document.getElementById('hours');
    const minsElement = document.getElementById('mins');
    const secondsElement = document.getElementById('seconds');

    if (daysElement.textContent !== days.toString().padStart(2, '0')) {
      daysElement.classList.add('flip');
    }
    if (hoursElement.textContent !== hours.toString().padStart(2, '0')) {
      hoursElement.classList.add('flip');
    }
    if (minsElement.textContent !== minutes.toString().padStart(2, '0')) {
      minsElement.classList.add('flip');
    }
    if (
      secondsElement.textContent !== seconds.toString().padStart(2, '0')
    ) {
      secondsElement.classList.add('flip');
    }

    setTimeout(() => {
      daysElement.classList.remove('flip');
      hoursElement.classList.remove('flip');
      minsElement.classList.remove('flip');
      secondsElement.classList.remove('flip');
    }, 600);

    daysElement.textContent = days.toString().padStart(2, '0');
    hoursElement.textContent = hours.toString().padStart(2, '0');
    minsElement.textContent = minutes.toString().padStart(2, '0');
    secondsElement.textContent = seconds.toString().padStart(2, '0');
  }

  setInterval(updateTimer, 1000);
  updateTimer();
</script>

注意： 根据您所需的输出调整我的 

code
。快乐编码！

0
投票

为了创建每秒、每分钟、每小时或每天更新的翻转卡片效果，您应该使用 CSS 动画和 JavaScript 来更新框项目的内容。

我列出了一种可以用来实现此目的的方法：

<div class="container">
  <img src="images/bg-stars.svg" alt="none" id="stars">
  <div id="midsec">
    <p>We're launching soon</p>
    <span class="name" style="grid-row: 3; grid-column: 1;">Days</span>
    <span class="name" style=" grid-row: 3; grid-column: 2;">Hours</span>
    <span class="name" style=" grid-row: 3; grid-column: 3;">Minutes</span>
    <span class="name" style=" grid-row: 3; grid-column: 4;">Seconds</span>
    <div class="top-box" id="days" style="grid-column: 1;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="hours" style="grid-column: 2;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="mins" style="grid-column: 3;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
    <div class="top-box" id="seconds" style="grid-column: 4;">
      <div class="flip-box-inner">
        <div class="flip-box-front"> </div>
        <div class="flip-box-back"> </div>
      </div>
    </div>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

现在CSS代码写如下：

.container {
  background-color: #211D2E;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#midsec {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  top: 104px;
  width: 131vh;
  height: 52%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

.container p {
  color: #FFFEFF;
  font-family: hat;
  font-weight: 700;
  font-size: xx-large;
  letter-spacing: 2px;
  position: relative;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  align-items: center;
  justify-content: center;
}

.container span {
  font-family: hat;
  color: hsl(237, 18%, 59%);
}

#stars {
  margin-left: 5%;
  max-width: 73%;
}

#hills {
  max-width: 100%;
  height: 34vh;
  margin-top: 5%;
}

.top-box {
  width: 100%;
  display: grid;
  background-color: #34364F;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 21vh;
  color: #FA5D86 !important;
  letter-spacing: 3px;
  perspective: 1000px;
  position: relative;
}

.flip-box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #34364F;
}

.flip {
  animation: flip 1s forwards;
}

@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}

.name {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 11px;
}

JavaScript

function updateFlipBox(box, newValue) {
  const front = box.querySelector('.flip-box-front');
  const back = box.querySelector('.flip-box-back');

  // Swap the text content
  front.textContent = back.textContent;
  back.textContent = newValue;

  // Trigger the flip animation
  const flipInner = box.querySelector('.flip-box-inner');
  flipInner.classList.remove('flip');
  void flipInner.offsetWidth; // Trigger reflow
  flipInner.classList.add('flip');
}

function updateTime() {
  const now = new Date();
  const days = now.getDate();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  updateFlipBox(document.getElementById('days'), days);
  updateFlipBox(document.getElementById('hours'), hours);
  updateFlipBox(document.getElementById('mins'), minutes);
  updateFlipBox(document.getElementById('seconds'), seconds);
}

setInterval(updateTime, 1000);
updateTime(); // Initial call to set values immediately

注意： 您应该根据您的要求从您身边进行基本操作。

我希望您会发现我的回复能够解决您的疑问。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.