银行卡片收纳包切换卡片效果
代码语言:html
所属分类:布局界面
代码描述:银行卡片收纳包切换卡片效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,700;1,400&display=swap'> <style> /* ***** Colors - Start ***** */ /* ***** Colors - End ***** */ /* ***** Dimensions - Start ***** */ /* ***** Dimensions - End ***** */ /* ***** Global Styles - Start ***** */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #111; overflow: hidden; } .container { display: flex; justify-content: center; align-items: center; } .card-1, .card-2, .card-3, .card-4, .card-5, .card-6 { position: absolute; width: calc(300px - 30px); height: 200px; background-color: #242224; border-radius: 10px; } .slide { width: calc(300px - 30px); height: 200px; border-radius: 10px; } /* ***** Global Styles - End ***** */ /* ***** Specific Styles - Start ***** */ .container { height: 100vh; } .card-1 { top: 10px; left: -200px; transform: rotate(-20deg); } .card-2 { top: calc(calc(300px - 30px) - 20px); left: -120px; transform: rotate(-20deg); } .card-3 { top: calc(calc(300px - 30px) * 2 - 50px); left: -35px; transform: rotate(-20deg); } .card-4 { bottom: 10px; right: -200px; transform: rotate(-20deg); } .card-5 { bottom: calc(calc(300px - 30px) - 20px); right: -120px; transform: rotate(-20deg); } .card-6 { bottom: calc(calc(300px - 30px) * 2 - 50px); right: -35px; transform: rotate(-20deg); overflow: hidden; } .card-stack { display: flex; justify-content: center; width: 300px; height: 550px; background-color: #242224; border-radius: 20px; transform: rotate(-20deg); } .card-stack .balance { position: absolute; width: 100%; margin-top: 230px; margin-left: 40px; font-size: 11px; color: #fff; } .card-stack .balance span { font-size: 18px; } .swiper-container { display: flex; width: calc(300px - 30px); height: 200px; justify-content: center; align-self: flex-end; margin-bottom: 15px; } .slide { position: absolute; font-size: 18px; padding: 20px; background: #fff; cursor: pointer; outline: none; } .slide .bank-name { display: flex; justify-content: space-between; align-items: flex-start; font-size: 12px; } .slide .bank-name span { font-size: 10px; color: grey; } .slide .bank-name img { margin: -15px -10px 0 0; } .slide img { margin: 10px 0; } .slide .card-number { font-size: 15px; } .slide .personal-info { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; } .slide.slide-3 { width: calc(calc(300px - 30px) - 30px); margin-top: -30px; background: #486fe9; z-index: 1; color: #fff; } .slide.slide-3 span { color: #fff; opacity: 0.5; } .slide.slide-2 { width: calc(calc(300px - 30px) - 15px); background-color: #fff; z-index: 2; } .slide.slide-1 { margin-top: -320px; z-index: 3; color: #fff; background-color: #111; } /* ***** Specific Styles - End ***** */ /* ***** Media Queries - Start ***** */ @media screen and (max-width: 650px) { .card-1, .card-2, .card-3, .card-4, .card-5, .card-6 { display: none; } } /* ***** Media Queries - End ***** */ </style> </head> <body translate="no"> <div class="extra-cards-stack"> <div class="card-1"></div> <div class="card-2"></div> <div class="card-3"></div> <div class="card-4"></div> <div class="card-5"></div> <div class="card-6"></div> </div> <div class="container"> <div class="card-stack"> <div class="balance"> <p>Balance:</p> <span>$ <span id="balance-counter">3021</span></span> </div> <div class="swiper-container"> <div class="slide slide-1"> <div class="bank-name"> <p> monobank | <span>Universal Bank</span></p> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bfb7c348.png" /> </div> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bdc8b57e.png" /> <div class="card-number">4505 7389 6378 5628</div> <div class="personal-info"> <p>Visnu Ravichandran</p> <p>07/2023</p> </div> </div> <div class="slide slide-2"> <div class="bank-name"> <p> monobank | <span>Town Bank</span></p> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bfb7c348.png" /> </div> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bdc8b57e.png" /> <div class="card-number">4729 7837 9829 7828</div> <div class="personal-info"> <p>Visnu Ravichandran</p> <p>02/2022</p> </div> </div> <div class="slide slide-3"> <div class="bank-name"> <p> monobank | <span>Gold Card</span></p> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bfb7c348.png" /> </div> <img src="http://repo.bfw.wiki/bfwrepo/image/5f333bdc8b57e.png" /> <div class="card-number">4183 9737 1283 0837</div> <div class="personal-info"> <p>Visnu Ravichandran</p> <p>05/2025</p> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script> <script> // ***** GSAP Timeline Initialization ***** var animateCard1 = gsap.timeline({ paused: true }); var animateCard2 = gsap.timeline({ paused: true }); var animateCard3 = gsap.timeline({ paused: true }); var selectCard = gsap.timeline({ paused: true }); // ***** GSAP TimelineMax Initialization ***** var animateCurrentCard = new TimelineMax(); var animateExtraCards = new TimelineMax(); // ***** SCSS Parameters ***** const colors = { $black: "#111", $lightBlack: "#242224", $blue: "#1b2f69", $lightBlue: "#27408f", $white: "#fff", $lightWhite: "#dae4ee" }; const balance = { $card1: 3021, $card2: 568, $card3: 2748 }; const cardPositions = { $top: { $marginTop: "-320px" }, $behind: { $marginTop: "-30px" }, $end: { $marginTop: "0px" } }; // ***** Animation Parameters Initialization ***** let rotateAxis = 180; const duration = 0.5; // ***** Variables Initialization ***** let extraCardsBackgroundColor = null; let bodyBackgroundColor = null; // ***** Function : updateBalance : Start ***** const updateBalance = updatedValue => { var counter = { val: 0 }; TweenLite.to(counter, duration, { val: updatedValue, roundProps: "val", onUpdate: function () { $("#balance-counter").text(counter.val); } }); }; // ***** Function : updateBalance : End ***** // ***** Function : setAnimationForExtraCards : Start ***** const setAnimationForExtraCards = () => { animateExtraCards. to("body", duration, { backgroundColor: bodyBackgroundColor }). to(".card-stack", { backgroundColor: extraCardsBackgroundColor }, 0). to(".card-1", { rotateX: rotateAxis, backgroundColor: extraCardsBackgroundColor }, 0). set(".card-1", { rotateX: 0 }). to(".card-2", { rotateX: rotateAxis, backgroundColor: extraCardsBackgroundColor }, 0). set(".card-2", { rotateX: 0 }). to(".card-3", { rotateX: rotateAxis, backgroundColor: extraCardsBackgroundColor }, 0). set(".card-3", { rotateX: 0 }). to(".card-4", { rotateX: rotateAxis, backgroundColor: extraCardsBackgroundColor }, 0). set(".card-4", { rotateX: 0 }). to(".card-5", { rotateX: rotateAxis, backgroundColor: extraCardsBackgroundC.........完整代码请登录后点击上方下载按钮下载查看
网友评论0