gsap Flip实现相册图片排列点击放大动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap Flip实现一个相册图片排列，鼠标点击后放大动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import 'https://fonts.googleapis.com/css?family=Lato:300,400,700';
        html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }
        
        body {
          display: grid;
          align-items: center;
          justify-items: center;
          background: #1D1F20;
          color: white;
          font-size: 14px;
          font-family: Lato, sans-serif;
        }
        
        img {
          width: 100%;
        }
        
        .app {
          height: 90vmin;
          width: 90vmin;
          background: white;
          position: relative;
          overflow: auto;
        
          /* Hide the app on load */
          visibility: hidden;
        }
        
        .gallery {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2% 3.6%;
          padding: 10px;
        }
        
        .item {
          cursor: pointer;
          font-size: 0;
        }
        
        
        
        .detail {
          position: fixed;
          top: 10px;
          left: 50%;
          width: 90.1vmin;
          cursor: pointer;
          font-size: 0;
          display: flex;
          flex-direction: column;
          visibility: hidden;
          max-height: 100%;
          overflow: auto;
        }
        
        .detail > img {
          position: relative;
          z-index: 1;
        }
        
        .detail .content {
          background: #232323;
          padding: 2rem 1.5rem;
          font-size: 1rem;
          box-sizing: border-box;
          flex-grow: 1;
        }
        
        .detail .content > * {
          margin-bottom: 1rem;
        }
        
        .detail .title {
          font-size: 2rem;
          text-transform: uppercase;
        }
        
        .detail .secondary {
          color: lightgray;
        }
        
        .detail .description {
          line-height: 1.5;
        }
    </style>



</head>

<body>
    <div class="app">
        <div class="gallery">
            <div class="item" data-title="Owl" data-secondary="Hoo are you?" data-text="Owel lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png" alt="" />
            </div>
            <div class="item" data-title="Deer" data-secondary="Hi deer." data-text="Deer lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png" alt="" />
            </div>
            <div class="item" data-title="Hipster" data-secondary="What's new?" data-text="Hipster lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5fb34b65ae8bb.png" alt="" />
            </div>
        
            <div class="item" data-title="Dog" data-secondary="I'm trying to sleep here." data-text="Dog lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png" alt="" />
            </div>
            <div class="item" data-title="Bored Ram" data-secondary="No time for you." data-text="Ram side lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png" alt="" />
            </div>
            <div class="item" data-title="Super Ram" data-secondary="I have lazer vision." data-text="Ram horns lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png" alt="" />
            </div>
            <div class="item" data-title="Gorilla" data-secondary="I can fit a whole watermelon in my mouth." data-text="Gorrilla lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="" />
            </div>
            <div class="item" data-title="Birb" data-secondary="I'm just here to chill." data-text="Birb lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png" alt="" />
            </div>
            <div class="item" data-title="Owl" data-secondary="Hoo are you?" data-text="Owel lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum, est amet delectus, blanditiis voluptatem laborum pariatur consequatur quae voluptate, nisi. Laborum adipisci iste earum distinctio, fugit, quas ipsa impedit.">
                <img src="//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png" alt="" />
     .........完整代码请登录后点击上方下载按钮下载查看