动画实现 keyframes

  1. <style>
  2.   * {
  3.     padding: 0;
  4.     margin: 0;
  5.   }
  7.   body {
  8.     width: 100%;
  9.     height: 100vh;
  10.     display: grid;
  11.     place-items: center;
  12.   }
  14.   div {
  15.     width: 500px;
  16.     height: 300px;
  17.     background-color: #000;
  18.     border-radius: 20px;
  19.     box-shadow: 0 0 10px rgba(0, 0, 34, .5);
  20.     /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  21.     animation: ppt 9s infinite linear;
  22.   }
  24.   @keyframes ppt {
  25.     0% {
  26.       background: url(https://tva4.sinaimg.cn/large/0072Vf1pgy1foxkiqu05cj31hc0u0duy.jpg) no-repeat;
  27.       background-size: cover;
  28.     }
  30.     50% {
  31.       background: url(https://tva1.sinaimg.cn/large/7f0c40d4gy1fqbf0e94b8j21hc0xc1ky.jpg) no-repeat;
  32.       background-size: cover;
  33.     }
  35.     100% {
  36.       background: url(https://tva1.sinaimg.cn/large/0072Vf1pgy1fodqnbricvj31kw0vk7wh.jpg) no-repeat;
  37.       background-size: cover;
  38.     }
  39.   }
  40. </style>
  42. <body>
  43.   <div></div>
  44. </body>
  1.                             ![](https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/api/daw2131.gif#height=308&id=f9my4&margin=%5Bobject%20Object%5D&originHeight=410&originWidth=636&originalType=binary&ratio=1&status=done&style=shadow&width=477)