CSS3 视差滚动相册

懒羊羊大王呀

已于 2024-08-22 23:57:05 修改

阅读量320

点赞数 7

分类专栏： css3 文章标签： css3 css javascript

于 2024-08-22 22:43:52 首次发布

本文链接：https://blog.csdn.net/m0_73777400/article/details/141439750

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。

视差滚动相册

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转视差相册</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .content {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      margin-top: 100px;
      display: grid;
      /* 列 * 3，每列占 1/3，repeat的添加与否效果一致 */
      /* grid-template-columns: repeat(3, 1fr);
      grid-template-rows: (3, 1fr); */

      /* grid-template 会覆盖前面的 grid-template-columns & grid-template-rows */
      grid-template:
        "A A B"
        "C D B"
        "C E E";
      grid-gap: 10px;
      padding: 10px;
      border: 5px solid transparent;
      border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
      animation: rotation 15s infinite linear;
    }

    .item {
      overflow: hidden;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item img {
      animation: rotation1 15s infinite linear;
      width: 300%;
      height: 300%;
      object-fit: cover;
    }

    .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;
    }



    @keyframes rotation {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rotation1 {
      to {
        transform: rotate(-360deg);
      }
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="item">
      <img src="./static/pic1.jpg">
    </div>
    <div class="item">
      <img src="./static/pic2.jpg">
    </div>
    <div class="item">
      <img src="./static/pic3.jpg">
    </div>
    <div class="item">
      <img src="./static/pic4.jpg">
    </div>
    <div class="item">
      <img src="./static/pic5.jpg">
    </div>
  </div>
</body>

</html>