时间戳

首页 > 解决方案 > 如何使用关键帧自动为我的 css 效果设置动画？

html - 如何使用关键帧自动为我的 css 效果设置动画？

问题描述

我的 CSS 代码 我从谷歌得到这个效果

.flip-card {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}



.flip-card-container:hover .flip-card {
  transform: rotateY(180deg); /* <=>  rotateY(.5turn) */
}

/* 定位正反面 */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 0.5rem; */
}

.flip-card-front {
  background-color: #333;
  color: #fff;
}

.flip-card-back {
  background-color: #517fa4;
  color: #fff;
  transform: rotateY(180deg);
}



.flip-card-front img {
  width: 100%;
  height: 100%;
  /* border-radius: 0.5rem; */
}

.flip-card-back img {
  width: 100%;
  height: 100%;
  /* border-radius: 0.5rem; */
}

DIV我从谷歌得到这个代码

<div class = 'flip-card-container'>
        <div class="flip-card">
                <div class="flip-card-front">
                    <img src="EAT2.png" >
                </div>
                <div class="flip-card-back">
                    <img src="SAKE.png">
                </div>
                </div>
        </div>

我已经把我的代码放在上面了，对不起，如果我给你带来了困扰，因为我是网络编程的新手。如何在不使用悬停的情况下自动运行此效果？ 请帮忙，非常感谢

标签： htmlcss

解决方案

我已经实现了代码供您参考。我希望我能正确理解你。

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  animation: flip 2s linear infinite;
}

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

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

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="https://picsum.photos/id/400/300/200" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <img src="https://picsum.photos/id/800/300/200" alt="Paris" style="width:300px;height:200px">
    </div>
  </div>
</div>

推荐阅读