newcebg

src/components/home/DameplaySwiperCard.vue

@@ -153,5 +153,8 @@ const handSlideNext = () => {
     background: url("@/assets/img/home/game-swiper-card/bullet-active.png")
       no-repeat right center;
   }
+  :deep( .swiper-pagination-bullet) {
+    opacity: 1;
+  }
 }
 </style>

src/components/home/GameGallerp.vue

@@ -190,6 +190,9 @@ function handleScroll() {
       margin: 59px auto;
       margin-bottom: 71px;
     }
+    .btn{
+      padding-top: 30px;
+    }
     .btn {
       width: 100%;
       display: flex;
@@ -240,7 +243,7 @@ function handleScroll() {
     //   transform: scaleX(1, 1);
     // }
     .go-to-btn {
-      margin-top: 30px;
+    // padding-top: 30px;
       width: 196px;
       height: 62px;
       position: relative;
@@ -248,9 +251,8 @@ function handleScroll() {
       color: #263641;
       cursor: pointer;
       background-image: url("@/assets/img/home/go-to-btn.png");
-      background-position: center;
       background-repeat: no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
       // border: 1px solid #333;
       // overflow: hidden;
       transition: background-image 0.3s;

src/components/home/GameIntroduction.vue

@@ -26,7 +26,7 @@
           </XyzTransitionGroup>
         </div>
       </transition>
-    
+      <div class="btn-demo"> </div>
     </div>
     <div class="game-bg">
       <img src="@/assets/img/home/weapon-bg.png" alt="" />
@@ -39,7 +39,7 @@ import TabBar from "./TabBar.vue";
 import HeroCard from "./HeroCard.vue";
 import WeaponCard from "./WeaponCard.vue";
 import ChipCard from "./ChipCard.vue";
-import loginButton from "./loginButton.vue";
+import loginButton from "./btn.vue";
 import { ref, computed } from "vue";
 
 const listred = [
@@ -77,6 +77,10 @@ function handactiveTab(index) {
   .tab-bg {
     position: absolute;
   }
+  .btn-demo{
+    width: 200px;
+    height: 70px;
+  }
   .game-bg {
     position: absolute;
     height: 100%;

src/components/home/btn.vue

@@ -0,0 +1,57 @@
+<template>
+    <button class="btn">
+      <svg class="blue" viewBox="0 0 100 100">
+        <rect x="10" y="10" width="80" height="80" />
+      </svg>
+      <svg class="red" viewBox="0 0 100 100">
+        <rect x="10" y="10" width="80" height="80" />
+      </svg>
+      <span class="label">Click me</span>
+    </button>
+  </template>
+  
+  <style>
+  .btn {
+    position: relative;
+    width: 200px;
+    height: 60px;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    overflow: hidden;
+    color: white;
+    font-size: 1.2rem;
+  }
+  
+  .blue {
+    position: absolute;
+    top: 0;
+    left: 0;
+    fill: blue;
+    transition: transform 0.3s ease-out;
+  }
+  
+  .red {
+    position: absolute;
+    top: 0;
+    left: 0;
+    fill: red;
+    transform: scale(0);
+    transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 1);
+  }
+  
+  .label {
+    position: relative;
+    z-index: 1;
+  }
+  
+  .btn:hover .blue {
+    transform: scale(0);
+  }
+  
+  .btn:hover .red {
+    transform: scale(2);
+  }
+  </style>
+