div+css实现照片三维飘动旗帜动画效果代码-html代码-BFW代码库

div+css实现照片三维飘动旗帜动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现照片三维飘动旗帜动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *::before, *::after {
          padding: 0;
          margin: 0 auto;
          box-sizing: border-box;
        }
        
        body {
          background-color: #111;
          color: #fff;
          min-height: 100vh;
          display: grid;
          place-items: center;
        }
        
        .dots {
          display: grid;
          grid-template-columns: repeat(24, 25px);
          grid-template-rows: repeat(18, 25px);
          place-items: center;
        }
        
        .dot {
          position: relative;
          width: 42px;
          height: 42px;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_450,/quality,q_90");
          background-position: var(--xPos) var(--yPos);
          border-radius: 50%;
          -webkit-animation: dot 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
                  animation: dot 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
        }
        .dot::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-image: linear-gradient(135deg, #0005, #7770, #fff5);
          -webkit-animation: dotA 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
                  animation: dotA 24s calc(var(--delay1, 0s) + var(--delay2, 0s)) infinite ease-in-out;
        }
        @-webkit-keyframes dot {
          from {
            transform: rotate(0deg) translateX(25px) rotate(1440deg);
          }
          to {
            transform: rotate(1440deg) translateX(25px) rotate(0deg);
          }
        }
        @keyframes dot {
          from {
            transform: rotate(0deg) translateX(25px) rotate(1440deg);
          }
          to {
            transform: rotate(1440deg) translateX(25px) rotate(0deg);
          }
        }
        @-webkit-keyframes dotA {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(1440deg);
          }
        }
        @keyframes dotA {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(1440deg);
          }
        }
        .dot:nth-child(24n+1) {
          --delay1: 0s;
          --xPos: 0%;
        }
        .dot:nth-child(24n+2) {
          --delay1: -0.3s;
          --xPos: 4.347826087%;
        }
        .dot:nth-child(24n+3) {
          --delay1: -0.6s;
          --xPos: 8.6956521739%;
        }
        .dot:nth-child(24n+4) {
          --delay1: -0.9s;
          --xPos: 13.0434782609%;
        }
        .dot:nth-child(24n+5) {
          --delay1: -1.2s;
          --xPos: 17.3913043478%;
        }
        .dot:nt.........完整代码请登录后点击上方下载按钮下载查看