17. 旋转中的视差效果

最新推荐文章于 2024-07-11 17:14:12 发布

LBJ辉

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量352

点赞数 4

分类专栏： code 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36081714/article/details/139412490

版权

code 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转中的视差效果</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        margin-top: 100px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-template: 'a a b' 'c d b' 'c e e';
        gap: 10px;
      }
      .item:nth-child(1) {
        grid-area: a;
      }
      .item:nth-child(2) {
        grid-area: b;
      }
      .item:nth-child(3) {
        grid-area: c;
      }
      .item:nth-child(4) {
        grid-area: d;
      }
      .item:nth-child(5) {
        grid-area: e;
      }
      .item {
        overflow: hidden;
        border: 2px solid;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item img {
        width: 280%;
        height: 280%;
        object-fit: cover;
      }
      .container {
        --d: 360deg;
      }
      .item img {
        --d: -360deg;
      }
      .container,
      .item img {
        animation: rotation 10s linear infinite;
      }
      @keyframes rotation {
        to {
          transform: rotate(var(--d));
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"><img src="https://picsum.photos/id/12/300/300" alt="" /></div>
      <div class="item"><img src="https://picsum.photos/id/32/300/300" alt="" /></div>
      <div class="item"><img src="https://picsum.photos/id/42/300/300" alt="" /></div>
      <div class="item"><img src="https://picsum.photos/id/35/300/300" alt="" /></div>
      <div class="item"><img src="https://picsum.photos/id/64/300/300" alt="" /></div>
    </div>
  </body>
</html>