newcebg

src/components/Banner.vue

@@ -3,7 +3,8 @@
     <div class="banner">
       <div class="content">
         <div class="sologan">
-          <img src="../assets/img/home/slogan.png" alt="" />
+          <!-- <img src="../assets/img/home/slogan.png" alt="" /> -->
+          <Slogan></Slogan>
         </div>
         <div class="download-center">
           <div class="download-item">
@@ -32,7 +33,9 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Slogan from './Slogan.vue'
+</script>
 
 <style lang="scss" scoped>
 .banner {
@@ -47,16 +50,16 @@
   .content {
     position: absolute;
     top: 350px;
-    right: 6%;
+    right: 100px;
     z-index: 8;
     // transform: translate(-50%, -50%);
     .sologan {
-      width: 702px;
+      // width: 702px;
-      height: 162px;
+      // height: 162px;
       padding-bottom: 25px;
-      img {
+      // img {
-        width: 100%;
+      //   width: 100%;
-      }
+      // }
     }
     .download-center {
       margin-top: 25px;

src/components/Slogan.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="glitch">
+    <img src="../assets/img/home/slogan.png" alt=""/>
+    <div class="glitch__layer"></div>
+    <div class="glitch__layer"></div>
+    <div class="glitch__layer"></div>
+  </div>
+  
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+.glitch {
+	position: relative;
+	overflow: hidden;
+   background: transparent;
+}
+.glitch img {
+	position: relative;
+	z-index: 1;
+	display: block;
+}
+.glitch__layers {
+	position: absolute;
+	z-index: 2;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+.glitch__layer {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+     background-image: url('../assets/img/home/slogan.png');
+	background-repeat: no-repeat;
+	background-position: 0 0;
+}
+.glitch__layer:nth-child(1) {
+	transform: translateX(-2%);
+	animation: glitch-anim-1 1s infinite linear alternate;
+}
+.glitch__layer:nth-child(2) {
+	transform: translateX(-.2%) translateY(0.1%);
+	animation: glitch-anim-2 1.2s -.2s infinite linear alternate;
+}
+
+@keyframes glitch-anim-1 {
+	0% {
+		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
+	}
+	10% {
+		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
+	}
+	20% {
+		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
+	}
+	30% {
+		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
+	}
+	40% {
+		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
+	}
+	50% {
+		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
+	}
+	60% {
+		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
+	}
+	70% {
+		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
+	}
+	80% {
+		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+	}
+	90% {
+		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
+	}
+	100% {
+		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
+	}
+}
+@keyframes glitch-anim-2 {
+	0% {
+		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
+	}
+	15% {
+		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
+	}
+	25% {
+		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
+	}
+	30% {
+		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
+	}
+	45% {
+		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
+	}
+	50% {
+		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
+	}
+	65% {
+		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
+	}
+	75% {
+		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
+	}
+	80% {
+		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
+	}
+	95% {
+		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
+	}
+	100% {
+		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
+	}
+}
+@keyframes glitch-anim-flash {
+	0% {
+		opacity: .2;
+	}
+	30%, 100% {
+		opacity: 0;
+	}
+}
+
+.youtube-link {
+	position: fixed;
+	left: 20px;
+	bottom: 20px;
+	color: #fff;
+	text-decoration: none;
+	font-size: 12px;
+}
+</style>

src/components/heroSwiper.vue

@@ -10,6 +10,9 @@
         a distinguishing design, skills, and gameplay. All the entry-level
         heroes are free for all the players, so there is no threshold to this
         game. -->
+
+        <!-- <div class="vertical-line"></div> -->
+        <div class="hero-boder"></div>
         <XyzTransitionGroup class="item-group" xyz="fade down-100% back-5">
           <div
             :class="
@@ -143,7 +146,6 @@
               fondness for candy, she often seals her cure magics in lollipops.
             </div>
           </div>
-       
         </XyzTransitionGroup>
         <div><img src="" alt="" /></div>
       </div>
@@ -201,6 +203,7 @@
                     class="hero_thumb_bg hero_thumb_bg-active"
                     :src="slideContent.img"
                   />
+                  <div class="line"></div>
                 </div>
               </div>
             </SwiperSlide>
@@ -225,7 +228,7 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/thumbs";
 import "swiper/css/free-mode";
-
+import line from "./line.vue";
 const heroList = reactive([
   { id: 1, img: require("../assets/img/home/hero/001.png"), name: "midif" },
   { id: 2, img: require("../assets/img/home/hero/002.png"), name: "ChipCard" },
@@ -301,33 +304,30 @@ function test(index, sc) {
       color: #1c3045;
     }
     .hero-boder {
-      // padding-top: 28px;
+      width: 721px;
-      // padding-bottom: 29px;
+      height: 1px;
-      // width: 649px;
+      background-color: #ff3030;
-      // height: 25px;
+      // border: 1px solid #ff3030;
+      opacity: 0.2;
+      top: 600px;
+      position: absolute;
     }
     .hero-slogan {
-      // width: 617px;
+      width: 617px;
-      // height: 82px;
+      height: 82px;
-      // margin-left: 20px;
-      // font-size: 18px;
-      // font-family: Arial;
-      // font-weight: bold;
-      // color: #1d2931;
-      // line-height: 32px;
-      // padding-bottom: 244px;
     }
+
     .miffy-container {
       background: url("../assets/img/home/miffy-bg.png") no-repeat;
       background-size: contain;
       opacity: 0;
-      top: 590px;
+      top: 690px;
       position: absolute;
       // transform: translateY(100px) translateZ(0px);
     }
     .miffy-container-active {
       opacity: 1;
-      top: 590px;
+      top: 690px;
       position: absolute;
       transform: none;
     }
@@ -437,6 +437,7 @@ function test(index, sc) {
 .hero_thumb {
   width: 90px;
   height: 184px;
+  padding-bottom: 100px;
 }
 .hero_thumb_img {
   display: block;
@@ -471,6 +472,28 @@ function test(index, sc) {
 }
 .weapon-bg {
   position: relative;
+  height: 190px;
+  //  padding-bottom: 300px;
+  .line {
+    width: 2px;
+    background-color: #000;
+    transform: rotateY(180deg);
+    position: absolute;
+    opacity: 0.2;
+    z-index: 10px;
+     bottom: -77px;
+    // top: 180px;
+    left: 96px;
+    animation: myfirst 1s ease-in alternate 1 forwards;
+  }
+  @keyframes myfirst {
+    0% {
+      height: 0px;
+    }
+    100% {
+      height: 121px;
+    }
+  }
 }
 .weapon-bg::before {
   position: absolute;

src/components/line.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="line"></div>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+
+// const showLine = ref(false);
+
+// const lineAnimation = computed(() => {
+//   showLine.value = true;
+// });
+// onMounted(() => {
+//   setTimeout(lineAnimation(), 1000);
+// });
+</script>
+<style>
+/* .line {
+  width: 2px;
+  height: 0;
+  background-color: #000;
+  margin: 0 auto;
+  transition: height 1s ease;
+}
+.line.active {
+  height: 150px;
+} */
+/* @keyframes myfirst {
+  100% {
+    height: 100px;
+  }
+  75% {
+    height: 75px;
+  }
+  50% {
+    height: 50px;
+  }
+  25% {
+    height: 25px;
+  }
+  0% {
+    height: 0px;
+  }
+}
+
+.line {
+  width: 100px;
+  background-color: aquamarine;
+  transform: rotateX(180deg);
+  position: absolute;
+  bottom: 200px;
+  left: 200px;
+  animation-name: myfirst;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-delay: 2s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-play-state: running;
+} */
+</style>