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:nth-child(24n+6) {
          --delay1: -1.5s;
          --xPos: 21.7391304348%;
        }
        .dot:nth-child(24n+7) {
          --delay1: -1.8s;
          --xPos: 26.0869565217%;
        }
        .dot:nth-child(24n+8) {
          --delay1: -2.1s;
          --xPos: 30.4347826087%;
        }
        .dot:nth-child(24n+9) {
          --delay1: -2.4s;
          --xPos: 34.7826086957%;
        }
        .dot:nth-child(24n+10) {
          --delay1: -2.7s;
          --xPos: 39.1304347826%;
        }
        .dot:nth-child(24n+11) {
          --delay1: -3s;
          --xPos: 43.4782608696%;
        }
        .dot:nth-child(24n+12) {
          --delay1: -3.3s;
          --xPos: 47.8260869565%;
        }
        .dot:nth-child(24n+13) {
          --delay1: -3.6s;
          --xPos: 52.1739130435%;
        }
        .dot:nth-child(24n+14) {
          --delay1: -3.9s;
          --xPos: 56.5217391304%;
        }
        .dot:nth-child(24n+15) {
          --delay1: -4.2s;
          --xPos: 60.8695652174%;
        }
        .dot:nth-child(24n+16) {
          --delay1: -4.5s;
          --xPos: 65.2173913043%;
        }
        .dot:nth-child(24n+17) {
          --delay1: -4.8s;
          --xPos: 69.5652173913%;
        }
        .dot:nth-child(24n+18) {
          --delay1: -5.1s;
          --xPos: 73.9130434783%;
        }
        .dot:nth-child(24n+19) {
          --delay1: -5.4s;
          --xPos: 78.2608695652%;
        }
        .dot:nth-child(24n+20) {
          --delay1: -5.7s;
          --xPos: 82.6086956522%;
        }
        .dot:nth-child(24n+21) {
          --delay1: -6s;
          --xPos: 86.9565217391%;
        }
        .dot:nth-child(24n+22) {
          --delay1: -6.3s;
          --xPos: 91.3043478261%;
        }
        .dot:nth-child(24n+23) {
          --delay1: -6.6s;
          --xPos: 95.652173913%;
        }
        .dot:nth-child(24n+24) {
          --delay1: -6.9s;
          --xPos: 100%;
        }
        .dot:nth-child(n+1):nth-child(-n+24) {
          --yPos: .........完整代码请登录后点击上方下载按钮下载查看