flash

src/pages/index.vue

@@ -43,7 +43,10 @@
             <div class="line">starting from the Web2 platform, bringing together advertisers, users, and bloggers through the bounty task growth system and the reward mechanism of smart contracts, redefining and solving the problems of growth, advertising and user incentives.</div>
             <div class="line">DeNet attracts users to enter web3 through rewards, and at the same time lowers the threshold of Web3 by technical means. In Denet, everyone can give full play to their own exclusive influence and earn excess bounties, thus realizing the perfect migration from Web2 to Web3.</div>
         </div>
-        <video class="video" autoplay muted loop src="../static/img/three_video.mp4"></video>
+        <div class="flash">
+            <img class="middle" src="../static/img/three_img01.svg" />
+            <img class="rotate" src="../static/img/three_img02.svg" />
+        </div>
     </div>
     <div class="four-screen">
         <div class="title">APPLICATION</div>
@@ -283,6 +286,24 @@ function discord() {
         margin-left: 0.9rem;
         mix-blend-mode: darken;
     }
+    .flash {
+        position: relative;
+        width: 3.437rem;
+        height: 3.437rem;
+        margin-left: 0.9rem;
+        .middle {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .rotate {
+            width: 100%;
+            height: 100%;
+            animation: rotate 3s linear infinite;
+        }
+    }
 }
 
 .four-screen {
@@ -396,4 +417,13 @@ function discord() {
         }
     }
 }
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
+}
 </style>

src/static/img/three_img01.svg

@@ -0,0 +1,3 @@
+<svg width="440" height="440" viewBox="0 0 440 440" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M220.003 354.062C294.042 354.061 354.062 294.04 354.062 220C354.062 145.96 294.042 85.9393 220.003 85.9375V354.062Z" fill="#1D9BF0"/>
+</svg>

src/static/img/three_img02.svg

@@ -0,0 +1,6 @@
+<svg width="440" height="440" viewBox="0 0 440 440" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M165.412 405.297C165.14 403.153 165 400.968 165 398.75C165 392.875 165.983 387.229 167.792 381.968C99.4677 360.107 50 296.08 50 220.5C50 209.657 51.0181 199.052 52.9639 188.775C44.9611 187.931 37.5042 185.256 31.0197 181.177C28.3847 193.871 27 207.024 27 220.5C27 308.036 85.4277 381.926 165.412 405.297ZM412 220.5C412 310.252 350.576 385.658 267.473 406.975C267.902 404.296 268.125 401.549 268.125 398.75C268.125 393.471 267.332 388.378 265.858 383.583C336.935 363.417 389 298.039 389 220.5C389 209.754 388 199.242 386.088 189.051C394.124 188.885 401.707 186.88 408.436 183.441C410.775 195.433 412 207.823 412 220.5ZM219.5 28C163.622 28 113.304 51.8086 78.138 89.8348C85.4312 92.8525 91.8813 97.4952 97.0368 103.312C127.893 71.0751 171.352 51 219.5 51C268.884 51 313.336 72.1194 344.315 105.819C349.071 99.72 355.169 94.7183 362.164 91.2571C326.944 52.4032 276.072 28 219.5 28Z" fill="#1D9BF0"/>
+<circle cx="384.999" cy="137.499" r="33.7333" fill="#1D9BF0"/>
+<circle cx="58.4368" cy="137.499" r="33.7333" fill="#1D9BF0"/>
+<circle cx="216.562" cy="398.749" r="33.7333" fill="#1D9BF0"/>
+</svg>