css实现曲面图片排列效果代码-html代码-BFW代码库

css实现曲面图片排列效果代码

代码语言：html

代码描述：css实现曲面图片排列效果代码，有点像一整张曲面屏排列展开。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">


    <style>
        body {
          width: 100vw;
          height: 100vh;
          display: grid;
          padding: 60px 0;
          grid: 1fr -webkit-min-content -webkit-min-content 1fr/1fr;
          grid: 1fr min-content min-content 1fr/1fr;
          align-items: center;
          justify-items: center;
        }
        
        header {
          font-size: 42px;
          font-weight: bold;
          text-align: center;
        }
        
        section {
          width: 100vw;
          overflow: hidden;
          position: relative;
          --v-offset: 60px;
          --curve-height: 120px;
        }
        section:before, section:after {
          content: "";
          display: block;
          background: white;
          width: calc(100vw + 2 * var(--v-offset));
          height: var(--curve-height);
          position: absolute;
          border-radius: 50%;
          left: calc(-1 * var(--v-offset));
          right: calc(-1 * var(--v-offset));
        }
        section:before {
          top: calc(-0.6 * var(--curve-height));
        }
        section:after {
          bottom: calc(-0.6 * var(--curve-height));
        }
        
        .wrapper {
          display: grid;
          grid-template-rows: 300px;
          grid-auto-flow: column;
          grid-gap: 24px;
          overflow: auto;
        }
    </style>




</head>

<body>
    <header>
        <h1>
            CSS Only Curved Carousel
        </h1>
    </header>
    <section>
        <div class="wrapper">
            <img src="//repo.bfw.wiki/bfwrepo/image/62bb8b9308b60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" />
            <img src="//repo.bfw.wiki/bfwrepo/image/62c13a0998077.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90" />
            <img src="//repo.bfw.wiki/bfwrepo/image/62c3704d88.........完整代码请登录后点击上方下载按钮下载查看