From fc3b9854f1bf35c28cfe18a0b8f896297dd8a74c Mon Sep 17 00:00:00 2001 From: huangjinming Date: Mon, 27 Feb 2023 14:41:12 +0800 Subject: [PATCH] newcebg --- src/components/home/DameplaySwiperCard.vue | 8 +- src/components/home/GameGallerp.vue | 88 +++++++-- src/components/home/GameIntroduction.vue | 4 - src/components/home/WhatCebg.vue | 204 ++++++++++++++------- 4 files changed, 208 insertions(+), 96 deletions(-) diff --git a/src/components/home/DameplaySwiperCard.vue b/src/components/home/DameplaySwiperCard.vue index 9d0de34..80d6d11 100644 --- a/src/components/home/DameplaySwiperCard.vue +++ b/src/components/home/DameplaySwiperCard.vue @@ -31,10 +31,10 @@ />
- +
- +
@@ -142,7 +142,7 @@ const handSlideNext = () => { width: 30px; height: 30px; /*图片路径*/ - background: url("../assets/img/home/game-swiper-card/bullet.png") no-repeat + background: url("@/assets/img/home/game-swiper-card/bullet.png") no-repeat left center; } /*显示当前活动块的图片*/ @@ -150,7 +150,7 @@ const handSlideNext = () => { width: 30px; height: 30px; /*图片路径*/ - background: url("../assets/img/home/game-swiper-card/bullet-active.png") + background: url("@/assets/img/home/game-swiper-card/bullet-active.png") no-repeat right center; } } diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue index bb52cd7..9ece45e 100644 --- a/src/components/home/GameGallerp.vue +++ b/src/components/home/GameGallerp.vue @@ -165,7 +165,6 @@ function handleScroll() { line-height: 30px; opacity: 0.3; z-index: 1; - } .content { width: 1440px; @@ -191,11 +190,55 @@ function handleScroll() { margin: 59px auto; margin-bottom: 71px; } - .btn{ + .btn { width: 100%; display: flex; justify-content: center; } + // .go-to-btn { + // margin-top: 30px; + // width: 196px; + // height: 62px; + // position: relative; + // margin-right: 30px; + // color: #263641; + // cursor: pointer; + // background-image: url("@/assets/img/home/go-to-btn.png"); + // background-position: center; + // background-repeat: no-repeat; + // background-size: cover; + // overflow: hidden; + // transition: background-image 0.3s; + // } + // .go-to-btn:hover { + // // background-image: none; + // } + // .go-to-btn::after { + // position: absolute; + // left: 0; + // right: 0; + // top: 0; + // bottom: 0; + // opacity: 1; + // // transition: 0.5s; + // background: url("@/assets/img/home/go-to-btn-active.png") no-repeat; + // background-size: 100% 100%; + // transform: scaleX(1, 1); + // z-index: -1; + // clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + // transition: all 0.3s ease-in-out; + // } + // .go-to-btn:hover:after { + // opacity: 1; + // clip-path: polygon( + // calc(50% + 0px) calc(50% + 150px), + // calc(50% + 150px) calc(50% + 0px), + // calc(50% + 0px) calc(50% - 150px), + // calc(50% - 150px) calc(50% - 0px) + // ); + // transition: all 0.3s ease-in-out; + // transform: scaleX(1, 1); + // } .go-to-btn { margin-top: 30px; width: 196px; @@ -208,29 +251,38 @@ function handleScroll() { background-position: center; background-repeat: no-repeat; background-size: cover; - overflow: hidden; - transition: background-image 0.3s ease-in-out; + // border: 1px solid #333; + // overflow: hidden; + transition: background-image 0.3s; } - .go-to-btn:hover { + .pve-right-active:hover { // background-image: none; } - .go-to-btn::before { + .go-to-btn::after { content: ""; position: absolute; - top: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("@/assets/img/home/go-to-btn-active.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: scaleX(0); - transform-origin: center; - transition: transform 0.3s ease-in-out; + right: 0; + top: 0; + bottom: 0; + background: url("@/assets/img/home/go-to-btn-active.png") no-repeat; + background-size: 100% 100%; + transform: scaleX(1, 1); + opacity: 1; + // z-index: -1; + clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + transition: all 0.3s ease-in; } - .go-to-btn:hover::before { - transform: scaleX(1); + .go-to-btn:hover:after { + opacity: 1; + clip-path: polygon( + calc(50% + 0px) calc(50% + 150px), + calc(50% + 150px) calc(50% + 0px), + calc(50% + 0px) calc(50% - 150px), + calc(50% - 150px) calc(50% - 0px) + ); + transition: all 0.3s ease-in; + transform: scaleX(1, 1); } .slogan { font-size: 18px; diff --git a/src/components/home/GameIntroduction.vue b/src/components/home/GameIntroduction.vue index 60249b2..957965d 100644 --- a/src/components/home/GameIntroduction.vue +++ b/src/components/home/GameIntroduction.vue @@ -26,10 +26,6 @@ - -
- -
diff --git a/src/components/home/WhatCebg.vue b/src/components/home/WhatCebg.vue index 76f6d54..7ed9b50 100644 --- a/src/components/home/WhatCebg.vue +++ b/src/components/home/WhatCebg.vue @@ -286,40 +286,37 @@ function handleScroll() { background-repeat: no-repeat; background-size: cover; // border: 1px solid #333; - overflow: hidden; - transition: background-image 0.3s ease-in-out; + // overflow: hidden; + transition: background-image 0.3s; } .pve-left:hover { // background-image: none; } - .pve-left::before { + .pve-left::after { content: ""; position: absolute; - top: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("@/assets/img/home/pve-btn-active.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: scaleX(0); - transform-origin: center; - opacity: 0; - clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - transition: transform 0.3s ease-in-out; + right: 0; + top: 0; + bottom: 0; + background: url("@/assets/img/home/pve-btn-active.png") no-repeat; + background-size: 100% 100%; + transform: scaleX(1,1); + opacity: 1; + // z-index: -1; + clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + transition: all 0.25s ease-in; } - .pve-left:hover::before { + .pve-left:hover:after { opacity: 1; clip-path: polygon( - 0px 0, - 100% 0, - 100% calc(100% - 0px), - calc(100% - 0px) 100%, - 0px 100%, - 0 0px + calc(50% + 0px) calc(50% + 150px), + calc(50% + 150px) calc(50% + 0px), + calc(50% + 0px) calc(50% - 150px), + calc(50% - 150px) calc(50% - 0px) ); - transform: scaleX(1); + transition: all 0.25s ease-in; + transform: scaleX(1,1); } .pve-left-active { margin-top: 30px; @@ -333,25 +330,33 @@ function handleScroll() { background-repeat: no-repeat; background-size: cover; overflow: hidden; - transition: background-image 0.3s ease-in-out; + transition: background-image 1s ease-in-out; } - .pve-left-active::before { + .pve-left-active::after { content: ""; position: absolute; - top: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("@/assets/img/home/pve-btn.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: scaleX(0); - transform-origin: center; - transition: transform 0.3s ease-in-out; + right: 0; + top: 0; + bottom: 0; + background: url("@/assets/img/home/pve-btn.png") no-repeat; + background-size:100% 100%; + opacity: 0; + transform: scaleX(1.1); + clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + + transition: transform 0.25s ease-in-out; } - .pve-left-active:hover::before { - transform: scaleX(1); + .pve-left-active:hover::after { + clip-path: polygon( + calc(50% + 0px) calc(50% + 150px), + calc(50% + 150px) calc(50% + 0px), + calc(50% + 0px) calc(50% - 150px), + calc(50% - 150px) calc(50% - 0px) + ); + opacity: 1; + transform: scaleX(1,1); + transition: all 0.25s ease-in; } .pve-right { // margin-top: 30px; @@ -363,59 +368,118 @@ function handleScroll() { background-repeat: no-repeat; background-size: cover; // border: 1px solid #333; - overflow: hidden; - transition: background-image 0.3s ease-in-out; + // overflow: hidden; + transition: background-image 1s; } - .pve-right::before { + .pve-right::after { content: ""; position: absolute; - top: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("@/assets/img/home/pvp-btn-active.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: scaleX(0); - transform-origin: center; - transition: transform 0.3s ease-in-out; + right: 0; + top: 0; + bottom: 0; + background: url("@/assets/img/home/pvp-btn-active.png") no-repeat; + background-size:100% 100%; + opacity: 1; + transform: scaleX(1,1); + clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + transition: all 0.3s ease-in; } - .pve-right:hover::before { - transform: scaleX(1); + .pve-right:hover:after { + clip-path: polygon( + calc(50% + 0px) calc(50% + 150px), + calc(50% + 150px) calc(50% + 0px), + calc(50% + 0px) calc(50% - 150px), + calc(50% - 150px) calc(50% - 0px) + ); + opacity: 1; + transition: all 0.25s ease-in; + transform: scaleX(1,1); } - .pve-right-active { + // .pve-right-active { + // // margin-top: 30px; + // width: 196px; + // height: 62px; + // position: relative; + // background-image: url("@/assets/img/home/pvp-btn.png") ; + // background-position: center; + // background-repeat: no-repeat; + // background-size: cover; + // transition: background-image 1s; + // } + + // .pve-right-active::after { + // content: ""; + // position: absolute; + // left: 0; + // right: 0; + // top: 0; + // bottom: 0; + // background: url("@/assets/img/home/pvp-btn-active.png")no-repeat; + // background-size:100% 100%; + // transform: scaleX(1,1); + // opacity: 1; + // clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + // // transform-origin: center; + // transition: transform 0.3s ease-in; + // } + // .pve-right-active:hover::after { + // opacity: 1; + // clip-path: polygon( + // calc(50% + 0px) calc(50% + 150px), + // calc(50% + 150px) calc(50% + 0px), + // calc(50% + 0px) calc(50% - 150px), + // calc(50% - 150px) calc(50% - 0px) + // ); + // transition: transform 0.3s ease-in; + // transform: scaleX(1,1); + // } + } + .pve-right-active { // margin-top: 30px; width: 196px; height: 62px; position: relative; + margin-right: 30px; + color: #263641; + cursor: pointer; background-image: url("@/assets/img/home/pvp-btn.png"); background-position: center; background-repeat: no-repeat; background-size: cover; - overflow: hidden; - transition: background-image 0.3s ease-in-out; + // border: 1px solid #333; + // overflow: hidden; + transition: background-image 0.3s; } - - .pve-right-active::before { + .pve-right-active:hover { + // background-image: none; + } + .pve-right-active::after { content: ""; position: absolute; - top: 0; left: 0; - width: 100%; - height: 100%; - background-image: url("@/assets/img/home/pvp-btn-active.png"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: scaleX(0); - transform-origin: center; - transition: transform 0.3s ease-in-out; + right: 0; + top: 0; + bottom: 0; + background: url("@/assets/img/home/pvp-btn-active.png") no-repeat; + background-size: 100% 100%; + transform: scaleX(1,1); + opacity: 1; + // z-index: -1; + clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); + transition: all 0.3s ease-in; } - .pve-right-active:hover::before { - transform: scaleX(1); + .pve-right-active:hover:after { + opacity: 1; + clip-path: polygon( + calc(50% + 0px) calc(50% + 150px), + calc(50% + 150px) calc(50% + 0px), + calc(50% + 0px) calc(50% - 150px), + calc(50% - 150px) calc(50% - 0px) + ); + transition: all 0.3s ease-in; + transform: scaleX(1,1); } - } .gameplay-content { display: flex; // background: #59a2d0;