html - 在css中更改图像为180度时

Question

你好，我已经被困在这里好几天了，我不知道该怎么办。如何在旋转 div 更改图像时消除淡入和淡出效果。我猜旋转的时机不正确。

.spinner {
  position: relative;
  height: 300px;
  width: 600px;        
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH');
  background-size: cover;
  transform-style: preserve-3d;
}

@keyframes rotate {
  33.34% {
    transform-style: preserve-3d;
    background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg');
    transform: rotateY(180deg);
    top: 0;
    left: 0;
    background-size: cover;
    position: absolute;
    height: 300px;
    width: 600px;
  }

  66.68% {
    transform-style: preserve-3d;
    background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg');
    transform: rotateY(0deg);
    top: 0;
    left: 0;
    background-size: cover;
    position: absolute;
    height: 300px;
    width: 600px;

  }

  100% {
    transform-style: preserve-3d;
    background: url('data:image/png;base64,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');
    transform: rotateY(180deg);
    top: 0;
    left: 0;
    background-size: cover;
    position: absolute;
    height: 300px;
    width: 600px;
  }
}

<div class="card_container">
  <div class="spinner"></div>
</div>

Answer 1

如果我理解你的要求，你想要这个:

诀窍在于您不希望背景图像平滑变化。要实现此目的，您需要设置 2 个具有不同属性和非常接近的百分比的关键帧。

例如，第一张图片为 33.33%，第二张图片为 33.34%。

示例中需要设置

• 背景数字 1，从 0% 到大约 1/3 = 33.3%
• 背景数字 2，从 33.34% 变为大约 2/3 = 66.6%
• 背景数字 3，从 66.7% 变为 100%

旋转必须平滑，因此您只需为每个旋转值设置 1 个关键帧。

.spinner {
  position: absolute;
    top: 0;
    left: 0;
  height: 300px;
  width: 600px;        
  animation-name: rotate;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQugQCqanFP9X3akqA4XtDdm0qja8v9YxdT9OazMzCes7co2SqH');
  background-size: cover;
  transform-style: preserve-3d;
}

@keyframes rotate {
   0% {
    transform: rotateY(90deg);
   }
  0%, 33.33% {
    background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg');
  }
  33.33% {
    transform: rotateY(-90deg);
  }

  33.34%, 66.68% {
    background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg');
  }
  66.68% {
    transform: rotateY(90deg);
  }
  66.69%, 100% {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAACkCAMAAAAuTiJaAAAAjVBMVEX///8AAACpqan09PQwMDD7+/v39/fc3Nzv7+9+fn729vbs7OzPz8/g4OBFRUXy8vK0tLTm5uZOTk7IyMiFhYViYmJXV1eenp6/v78oKCjX19eOjo5AQEAeHh5vb29qampaWloRERHDw8M4ODiXl5djY2OMjIwrKysiIiK2trYLCwujo6N5eXkXFxc7Ozt6dD7hAAAPuElEQVR4nO2daXuyOhCGBcUd933HpbVa+/9/3mECKjBPAGVLz9v7S6+LFAxjMpktsVT6448//vjjjz/++DUYPT3AzHi2tq6BxuvCvloOXiXa9P9D0DC8P6zMPkp8WBvcE2Cfu1jCaWlBdtVn65G19u2rU3bVpkf/PwANX/eHXfFdE/Q0ySMUYcl6+P1sLDMhTOgyEs2KpNleg5b7w0zQ9iG5x8+6yrpdLB3WxcazccgaaTy1b+DFhKjRWLo/ztjytp8yvifAR/5iCWV/YV0cPVtHwbaDWUJz1oZ0XfMAGtrus8CcXts3VX8iZXYZgo4XCRDA8tnK2rb2xTJ6TYv+vQYaBnXnUVx3atpRck+AjmKzs37mfZw+Wr9YG33nbfRi4iYwAYVgbAygB3fUsIkW2jFvqUTAlZam6Y9W/kL4qj2DaBKWK6Cl5Tyqx1vmtZJkRgfoFyCYMHagj7N7Y+0z2EQauTUH95zItgOC0VbOo9DKKT4H3RNgUoRgQmiB2ak91C5/oTa8qjmz0/gGDT3nUSfesqHrRiNaaL0iJBOCjjppuo1cDe1sC6EKlRANtD64XnEeBsyKjpi3fb54BzmYks4XRBVpbs1d7oAQjvCq5s4g9A04hnIfDGjHEokxOzdFSCYEpGmeFjz3FWhwQBdK+IYr0ODoR6A5XbuGm9b42QoBrdS70AwmhB+6jFa7H1rfFmimiSeB4bRripaFFS20IgQTBloHH73kvoJwodAdwodA34CYnSb/GKvmfAb+1vizFQIZaZp2dls/gg2fpJH5nNUc/dRCXjz5VmhyuqZgHd0Dnq0STCyCH6exzsYHDZsWUkJr+v8FaBAuFJicGzdih+7RKh0Pq00d970o+tgYd23JGWsgpQ4Hp3Bz0EJM1pvJLGSt4noJ2IVSzMIIgGen8MltxsHrF7oKX1MoKHD9skDP8bgcFrhp1y1AFPGRKBRH85osNEjXDXTDloIQyEgblODkfERRoJF2LUYYMYEC0O5BDi4EGjby15S4UEAFHB5DCbpQqnnnfqCVqrmuXpkteeRCoeCrtiYNVQMxa2oAPudDZ/HBrKnnnfuBAiCEv859BREwlL4mmp0NtJp4gmNw2M5wbxUBGvCEsK1YnPtGAwSG84WQkZk8K5l8cm6fPUDRt8fCqiay2ekIjQmBlHoJBZI+yZCCAY4qUnRPlQU9f9Xs/wAoo/QQ2p5dpcwjDOeLtRCZyQ00OT0JTOhbqOad+4HGOLEmq4vNTquFrtpc6DWhO2S2+PzzZAfrKEdcKUgaMZFGTClsyA0FelvoQolwNjKTB03+ETdPwQM0rVVLcPrpo+CXoNOXuVB8zmruYoiMNJ3/u+XNX8JvTW0XCqgbl0kdVFccKPyFROModnD9c8+/lqW3B/Czm4UIIy7A6HQ5NUt1dpEWtSr677EsC7XjCnDg7QBPqWrqpVD8QAE4fBvAHKPFAdqiIjCGzOStFbxiLbw9gMnTcePJt2qBNLmRRoOqyVyoAY0nlCKtiDg3DgAH8Q2j6Hv8MlYBJACXD+ArkEsOX3NMD4uRUdKCTmX0PQPU7yIZWvLOHkGcm2YnHJy0HPIEDOLgD5NF36NaHV/Y7NSmJTbQdvYtBky2yXLEUTKIcY9qscgqM9XHz/mq83xTuAsVo7DAtv78PUC+hZ8G6HehcBfq42mZzfgLUWQWioZmZzPW7PRrtGp0jli5EBFf7muPsXe5MiHQl95FhXwTkqbcTPZy8nUA+hY+OooloUp1Nju35kOP3fhAI5ccika4UNEzjfAXZODcoRflZieooHrqsQuTKCUvYRWVKO2oW7GE5hNCVxqWelArSDYyuAA6dUk2T0AuFHesNNeSgu4Qx+d2Rs/oQyGSCYFXDC9xnZoLRR6gLSqsiBg7J4iptwchprWLcnk87lkuwhSTiAuiIKMotoOpFoDXhzJR1NzHWTkXii33Fexyu5BLXntptwXCa0GEDWuHE+55cbSZwW+LRb4BQpRgw4ooWlS7YHZaaPB5Qhbl6BmtXIiIC8AMybI4uy3ga9LDUCnlBCYMnh2I4UIZkr4XRYvZrt8GDqM6kLaHSRgRzkeWyAcKlXnSmdC3UE6J+eACIKUlFxrdA19TTDiYI0bj0iM0lCMeqJ0jZnHueVdWsEyQJW9YoGFcLmEj7QAyd8+K8TDfQlm4AEhpyX1Bcsmh/Sp1oXRUfHx5Cg1aN2pnofhy34ZXXcS0kWah+mB2Wn3kXZwf0bE+L4x8VKymTjoLisGUtIiowgoBgrwftHPCiY+hIbiB8+9QvvcAzk5d1t8klL9m6WhKbsCLaSaNI0oL+YQLhaJiPRgW7jwSmsgeOac+O+v9427TTimLyubhTSyCsj2Xwm9Ghu+cZifa9norw9k8uW9zRfd4N82ngdlbnrVlehlAplCcnA8oJhaQ3wxtURHpQX7CFo+l7V27yM9ZSAWj2R511tpZTxLDNPyzmgf6RTgB7puwudB4gvqOXEleYaqJZQV5Ud+u0Mro61mn5AC0hrpIUW+/kj1w6r8dbxFDBYsC2iOBvEttTo9FfsJPHRvK91o96Fukss2uft2uyKu2vs2E38HUF8YCI8rpr+xkjPC9UMjgOkoqHu7GKzTSkrpQxmI2ct9gMi1H/3847Yq/vpwLwNEmkritMK7ga8p2W1AtFRxM96AiakuYQxmOdndNPRgmT8eY64B3whbJH0flScLPYhiiBrHvEN0k2W3xMMSg5+GfDa/Qb+tPvXpopOH0G4Ogd4LFIo3z06Itf01kWdCXBGNvrtCQPWi9aRv0p9+egM3tms6mjW0wAIo3oZRkuy475RIO6QpbtCZzy6HT5agBEwY4Xn+zcm048kYAL6e0jJYr2yrJBHBzG+B7imEjf000OoU1BiPnTiVHKi6UMVuO/THTUWp2rD2vBv6VZMF8yLs2gYHZtfQ4CSEB6ZlfyHq7OCkCaA62a14Woa5P39SDfe0s06uU6a+ZhmWz86FN0HByxhN8TeolcocOwrdCDqlTodxFDwsizxIvrg1euPOVYnERFenfAqsJi3OP71Yg7L3UhQrfsL5A34AYtXE2rDvbIBnN/mz7aQX/d/6dbh6etFRAw/Lo7GMkwu6TUpe6UFU0BJ3zDdm70evR92fEySsDDVffT5Hz9amnHBvRwedzK/WuPmDkgVyoJhKNWFSHYDfapxi4UNmLc2DallxWd86BCFi5dR1XwGdZnTTnpcBxi/yf32Wzc/f4d9R9UurQSBOzEw1BZ+BCm08Y0XFmp89IWvRGuJzZSm+9fCLcioF/HcKbUARoiRTHk8CKKBo0VRDMdSJzOPazsvtiRBYjaJ6zoZr774HkhvMxi83HjtkVWDuZMb56fLRMqTfRjlAR50ZDcGd4PjwAqdewwqQ7FWEk9YdT+Xkdk14mmWR34PjrL8tMAM+KMeTcSF0o6W4L50vC2p6EFuNEPrKnzaMT4sGMF9nUL7uBxop/bcFHoTkAEXzSdWSmiup4cNSGU5hrCw1qoYk9fKAx6Ocywr6Jy2CZVU3pfbtJwODgAghrc1woJBrpbgu3EhkfwTCOXfwn56xnl4W/Wxb+ZMUCZ6EEwLCgo1RxFRUtqlU0BN0twdjq35YMWRoiHvNNlqe2PtStv5ZQGuCw6fN0Eyn1KnxN0sLIrvtxlxW8Yfkb15/G5phpCW7rEe33+VD8NGmPuwI2PZG2h/UdYvwiI+2eBMB7nkaxjDQJu0xSyR6eitQX4ZBkoRyA49OUiMaxo9Bui/uygnP1yzgn8mE2s6yL1Tzfs8/x5YuSR6lys5e0vQEjabR8QUvk/jBsWFx5+WUsDsvsS7A8BSmfvu+n81nxMfccKVKanSuBVlLq7UOFcRa22DT4/3bDY1nZzPltlfVsqlnEbW3fe44rwFWG6+UDb3XLwCe0chBvq8Fa8dX7bVVZA9FEt5WNarfbbVabrZo+uMWTmXVq53Jit9cU2qlWtmrPgxkM8UDOx5w2Y9e9xuhYLaEZteUkhkvg8tnLrZrU50Ke1BGa0e5tX1kHtjn++oA/iqDK9Cx/bQYxN7U4NMwcf3zA8Ke1OgoIzRwuY5yb72VwzffnGgLBv0PRQqtNN9G/A+LnZ5/zzlhWUl3gL2zUF70Yh/4GJTbK/zBItpgXtZ25rjdel5g21ws4P5O7NgVsnG+a7VeVmOC2LWQDWZd/ubmfE7g/buOkTjhZpJbiAFJAeZ460zVt7+gtgWmdaVGnf5VBb+Z5bZ1vfS1jbsnm7HrFnSQBSzyzDt3ZGPXFaPXenLRZN5KWFCehhjNAGRsd1b2+eVtgtiF5LXaLp2TXfob6tdrSxz/vxRUFl8G+4POXZNubdxl9njn7eNXWD9Ao/hA+aYI1i4N2h6MXQjyQ9VSBc+DlFUyDxBsRfHTbb3hHQXZqnCUXcnzZMvruuLT0zUD67cRmvEj3e3wX+fZzLSVfqlrbL1GFwqt0PpTZ3R96Etc8eYVl+ziOd7hoBDmGsCOBe6U9JFG6/XdCPFhimZZivEzUuT2Hd72plt6IdW5hHJZqnYbGK2kZr+u1an+/edP/BuyUOzgoRk3m5eMlD8+YTbepKDGHRualGK8TfXybTWcYs+P1vr5LUWDaoYAQdjR9K17vtzH8FrM3SugdBejkUYrxBnGPfNOscdghFUa5PeqkOcTsD9wNFf1tgab8VwU4lSk+EKW118cJAhaQW4qnYqRNqDcA+NktZy3DcDSc/deo9Rq7JCEezLmI1FJsws4tl7NeTcan8aSTMFohY6PcAdJ+UrM+02NUZAg7DskqpjNgoCsusVIK+xnSJY1TMbIn3lHj+fDTUNMoC9JMtgkkTZQIYccC/Lx5IazzLF1MivQnAPPlQ107FqDCOlBcKcabRP98RNZsv9TIk7xAwevA/LumvlXGSDeQ8yKVlE6RypsCF89B3iXFqWEVJLF1UaWLaVCMyC6ZnIqRG0WI7KRGKcb7pB48jGS7KHB3Qjqkl5qMxeDjtyp/LxlFXjGrr98RxYji7Zrql/nc/OL10k9e4bRbtqdi5Eu834hMinqlGInIIzSkYilGIuopFY9JqeRwKkbuZKvUJoqWYiQEnuWYDrf/gR0r4Z3NlXFYH9X+HadEZLN+Vr5+tUseBT7iLBlqlRRnQepabfQbQ9ivkuAsN85vKMVIg+orZX3hTH5FKUYqNNNx2w+Nf0ZihPn2wYFPKmkfuK48rYQzdH1SvHQxE5qhxxBHoXBJcbZMrTcl1jn+urqC9Gi/VX2b9If2fjvG8tU0y7rxL9ixESziHF3/oHP919ZLjDGMa3xYg9k/ZZWFM2xYkRJbNQo830dNTD00xra6Lv6X4djE1PWPHcsjrzvbkV7s4T6qU+4v2vpoMyZOjaU+XJitv6WS+A+kiPRPusQn7AAAAABJRU5ErkJggg==');
  }

  100% {
    transform: rotateY(-90deg);

  }

}

<div class="card_container">
  <div class="spinner"></div>
</div>