gsap Flip实现列表排列方式改变动画过渡效果代码-html代码-BFW代码库

gsap Flip实现列表排列方式改变动画过渡效果代码

代码语言：html

所属分类：动画

代码描述：gsap Flip实现列表排列方式改变动画过渡效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background-color: #222;
          color: #ccc;
          padding: 10px 24px;
          font-family: "Signika Negative", sans-serif, Arial;
          font-weight: 300;
        }
        
        .group.reorder {
          flex-direction: row;
        }
        
        h1 {
          color: white;
          font-weight: 400;
        }
        
        .group {
          width: 740px;
          height: auto;
          padding: 4px;
          background: #111;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          color: black;
        }
        
        .box {
          margin: 4px;
          padding: 8px;
          font-size: 22px;
          line-height: 28px;
        }
        .box:nth-child(1) {
          background: rgba(85, 102, 205, 0.7);
        }
        .box:nth-child(2) {
          background: rgba(125, 70, 200, 0.7);
        }
        .box:nth-child(3) {
          background: rgba(33, 150, 243, 0.7);
        }
        .box:nth-child(4) {
          background: rgba(0, 188, 212, 0.7);
        }
        
        .button {
          padding: 10px 20px;
          margin-bottom: 10px;
        }
        .logo {
          position: absolute;
          width: 60px;
          bottom: 20px;
          right: 30px;
        }
    </style>



</head>

<body>
    <h1>Smoothly change flex direction with GSAP's Flip plugin</h1>

    <button id="changeLayout" class="button">change</button>
    <div class="group">
        <div class=".........完整代码请登录后点击上方下载按钮下载查看