时间戳

首页 > 解决方案 > 用 CSS 翻转 3 个硬币图像

html - 用 CSS 翻转 3 个硬币图像

问题描述

我想用这 3 张图片掷硬币，我希望每张图片在旋转时都可以改变，这样用户就看不到每张图片的原始变化。我知道解决方案可以通过改变百分比来解决，但无法弄清楚

结论：我想在每个硬币变化时“隐藏”。

这是 HTML 和 CSS

.coin {
    height: 40px;
    width: 40px;
    animation: spin 18s ease infinite;
    border-radius: 50%;
    background-size: cover;
}

    @keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/w0M0NjP/3.png");
    }

    33.33% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/w0M0NjP/3.png");
    }

    33.34% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/n7k3p0X/2.png");
    }

    66.66% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/n7k3p0X/2.png");
    }

    66.67% {
        -webkit-transform: rotateY(0deg);
        background-image: url("https://i.ibb.co/gmzSqzG/1.png");
    }
    
    100% {
        -webkit-transform: rotateY(360deg);
        background-image: url("https://i.ibb.co/gmzSqzG/1.png");
    }
}    
<div class="coin"></div>

标签： htmlcssanimation

解决方案

考虑2个动画，它会更容易处理。一个用于将持续的旋转，另一个用于将持续延迟Xs的图像更改，因为您需要打开角度和(3/2)*XsX/4s90deg90deg=360deg/4

.coin {
  height: 40px;
  width: 40px;
  animation: 
    spin 2s linear infinite,
    change 3s infinite linear .5s;
  border-radius: 50%;
  background-size: cover;
}

@keyframes change {
  0%,33.33% {
    background-image: url("https://i.ibb.co/w0M0NjP/3.png");
  }
  33.34%,66.66% {
    background-image: url("https://i.ibb.co/n7k3p0X/2.png");
  }
  66.67%,100% {
    background-image: url("https://i.ibb.co/gmzSqzG/1.png");
  }
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}
<div class="coin"></div>

带有变量以获得更好的控制

.coin {
  --x:4s;
  height: 40px;
  width: 40px;
  animation: 
    spin var(--x) linear infinite,
    change calc(3*var(--x)/2) infinite linear calc(var(--x)/4);
  border-radius: 50%;
  background-size: cover;
}

@keyframes change {
  0%,33.33% {
    background-image: url("https://i.ibb.co/w0M0NjP/3.png");
  }
  33.34%,66.66% {
    background-image: url("https://i.ibb.co/n7k3p0X/2.png");
  }
  66.67%,100% {
    background-image: url("https://i.ibb.co/gmzSqzG/1.png");
  }
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}
<div class="coin"></div>

推荐阅读