<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/style.css" /> <title>Document</title> </head> <body> <div class="bg-box"> <div class="bg" style="--s-clr: #408e20; --e-clr: #9acd31"></div> <div class="bg" style="--s-clr: #550802; --e-clr: #f40401"></div> <div class="bg" style="--s-clr: #696901; --e-clr: #ffff03"></div> <div class="bg" style="--s-clr: #823043; --e-clr: #fac0cb"></div> </div> <div class="carousel"> <div class="list-img"> <div class="item"> <img src="img/img1.png" alt="" /> </div> <div class="item"> <img src="img/img2.png" alt="" /> </div> <div class="item"> <img src="img/img3.png" alt="" /> </div> <div class="item"> <img src="img/img4.png" alt="" /> </div> </div> <div class="box-info"> <div class="list-info"> <div class="info"> <h2>Green Dragon</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, odio nemo totam assumenda at quam iure, atque repellendus sapiente laboriosam neque recusandae facere a! Suscipit numquam aperiam labore fugiat itaque. </p> <a href="#" class="btn">View More</a> </div> <div class="info"> <h2>Red Dragon</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, odio nemo totam assumenda at quam iure, atque repellendus sapiente laboriosam neque recusandae facere a! Suscipit numquam aperiam labore fugiat itaque. </p> <a href="#" class="btn">View More</a> </div> <div class="info"> <h2>Yellow Dragon</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, odio nemo totam assumenda at quam iure, atque repellendus sapiente laboriosam neque recusandae facere a! Suscipit numquam aperiam labore fugiat itaque. </p> <a href="#" class="btn">View More</a> </div> <div class="info"> <h2>Pink Dragon</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, odio nemo totam assumenda at quam iure, atque repellendus sapiente laboriosam neque recusandae facere a! Suscipit numquam aperiam labore fugiat itaque. </p> <a href="#" class="btn">View More</a> </div> </div> </div> </div> <div class="navigation"> <span class="prev-btn"><i class="bx bx-chevron-left"></i></span> <span class="next-btn"><i class="bx bx-chevron-right"></i></span> </div> <script> const listInfo = document.querySelector(".list-info"); const childCount = listInfo.childElementCount; const listImg = document.querySelector(".list-img"); const prevBtn = document.querySelector(".prev-btn"); const nextBtn = document.querySelector(".next-btn"); const bgs = document.querySelectorAll(".bg"); const activeColor = "white"; const activeBorder = "2px solid white"; const inactiveColor = "rgba(255,255,255,0.5)"; const inactiveBorder = "2px solid rgba(255,255,255,0.5)"; let index = 0; function changeBtnColor(index) { let nextInactive = index === childCount - 1 ? true : false; let prevInactive = index === 0 ? true : false; nextBtn.style.color = nextInactive ? inactiveColor : activeColor; nextBtn.style.border = nextInactive ? inactiveBorder : activeBorder; prevBtn.style.color = prevInactive ? inactiveColor : activeColor; prevBtn.style.border = prevInactive ? inactiveBorder : activeBorder; } nextBtn.addEventListener("click", () => { index = index < childCount - 1 ? index + 1 : childCount - 1; listInfo.style.transform = `translateY(${ (index * -1 * 100) / childCount }%)`; listImg.style.transform = `translateY(${index * -100}%)`; bgs[index].classList.add("active"); changeBtnColor(index); }); prevBtn.addEventListener("click", () => { indexPrev = index > 0 ? index : 0; index = index > 0 ? index - 1 : 0; listInfo.style.transform = `translateY(${ (index * -1 * 100) / childCount }%)`; listImg.style.transform = `translateY(${index * -100}%)`; bgs[indexPrev].classList.remove("active"); changeBtnColor(index); }); </script> </body></html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif;}.carousel { height: 100vh; padding: 0 10%; overflow: hidden;}.carousel .box-info { position: absolute; top: 50%; transform: translateY(-50%); height: 250px; aspect-ratio: 13/5; overflow: hidden;}.box-info .list-info { transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}.list-info .info { display: flex; flex-direction: column; justify-content: center; color: #fff; height: 250px;}.info h2 { font-size: 50px; line-height: 1;}.info p { font-size: 16px; margin: 20px 0;}.info .btn { display: inline-flex; justify-content: center; align-items: center; width: 180px; height: 50px; background: transparent; border: 2px solid #fff; border-radius: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); font-size: 16px; color: #fff; text-decoration: none; font-weight: 600; transition: 0.5s; cursor: pointer;}.info .btn:hover { transform: translateX(24px) scale(1.1);}.carousel .list-img { height: 100%; transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}.list-img .item { position: relative; height: 100%; display: flex; align-items: center;}.item img { position: absolute; right: 0; pointer-events: none; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));}.navigation { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);}.navigation span { display: inline-flex; justify-content: center; align-items: center; width: 60px; aspect-ratio: 1/1; background: transparent; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); cursor: pointer; margin: 0 20px; font-size: 55px; color: #fff; transition: 0.5s;}.navigation span:first-child { color: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255, 255, 255, 0.5);}.navigation span:hover { transform: scale(1.2);}.bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;}.bg-box .bg { position: absolute; width: 100%; height: 100%; z-index: -1; background: linear-gradient(360deg, var(--s-clr), var(--e-clr)); transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}.bg-box .bg:not(:first-child) { clip-path: circle(0% at 50% 50%);}.bg-box .bg:not(:first-child).active { clip-path: circle(75% at 50% 50%);}
阅读原文：原文链接
该文章在 2025/12/23 10:43:06 编辑过
400 186 1886
