bootstrap+swiper+tsparticles实现自适应粒子图文幻灯片旅游单页代码
代码语言:html
所属分类:响应式
代码描述:bootstrap+swiper+tsparticles实现自适应粒子图文幻灯片旅游单页代码
代码标签: bootstrap swiper tsparticles 自适应 粒子 图文 幻灯片 旅游 单页 代
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@300;600&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: "Nunito", sans-serif; } body { background-image: radial-gradient( circle at 20% 100%, rgba(184, 184, 184, 0.1) 0%, rgba(184, 184, 184, 0.1) 33%, rgba(96, 96, 96, 0.1) 33%, rgba(96, 96, 96, 0.1) 66%, rgba(7, 7, 7, 0.1) 66%, rgba(7, 7, 7, 0.1) 99% ), linear-gradient(40deg, #040a22, #162561, #202e64, #6f7aa6); background-repeat: no-repeat; background-size: cover; } section { display: grid; grid-template-columns: 50% 45%; place-items: center; gap: 60px; min-height: 100vh; padding: 20px 60px; } /* CONTENT */ .content { max-width: 600px; } .content h1 { font-family: "Comfortaa", sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; letter-spacing: 1px; margin-bottom: 36px; color: #fff; } .content p { font-size: clamp(1rem, 4vw, 1.1rem); font-weight: 300; line-height: 1.5; margin-bottom: 30px; color: #fff; } .content button { background: #eaeaea; color: #202134; font-size: clamp(0.9rem, 4vw, 1rem); font-weight: 600; border: 0; outline: 0; padding: 8px 14px; border-radius: 7px; transform: scale(1); transition: all 0.4s ease-in; cursor: pointer; } .content button:is(:hover, :focus) { transform: scale(0.98); background-color: #6f7aa6; color: #eaeaea; } /* SLIDER */ .swiper { position: relative; width: 400px; height: 490px; } .swiper-slide { position: relative; background-position: center; background-size: cover; border: 1px solid rgba(255, 255, 255, 0.3); user-select: none; border-radius: 20px; } .cost { position: absolute; top: 8px; right: 6px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border-radius: 30px; padding: 6px 10px; color: #fff; font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 600; } .dark-text { color: #202134; } .swiper-slide img { width: 100%; height: 100%; border-radius: 20px; } .overlay { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 0; bottom: 0; width: 100%; height: 150px; padding: 10px 20px; background: rgba(93, 95, 145, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 0 0 20px 20px; } .overlay h1 { font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 600; } .overlay p { font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 300; line-height: 1.3; } .ratings { display: flex; column-gap: 10px; margin-top: -6px; } .ratings span { font-size: clamp(0.8rem, 4vw, 0.9rem); font-weight: 300; } .star { color: #afe312; } @media (max-width: 1050px) { .swiper { width: 350px; height: 450px; } } @media (max-width: 930px) { section { grid-template-columns: 100%; grid-template-rows: 55% 40%; grid-template-areas: "slider" "content"; place-items: center; gap: 64px; padding: 60px; } .swiper { grid-area: slider; } .content { grid-area: content; text-align: center; } .content h1 { margin-bottom: 20px; } } @media (max-width: 470px) { section { padding: 40px 40px 60px; } .swiper { width: 300px; height: 400px; } } </style> </head> <body> <div id="tsparticles"></div> <section> <div class="content"> <h1>Let's Travel The World Together!</h1> <p> Our tours are designed to transport you to the heart of the world's most captivating destinations, creating memories that will last a lifetime. You can uncover the hidden gems, iconic landmarks, and unique cultural treasures that make each destination special. </p> <button>Explore Tours</button> </div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/5fe5a2a479c12.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> <div class="cost">from $230 per group</div> <div class="overlay"> <h1>Walking Tour in Florence</h1> <p> Discover the fascinating beauty of this historic city by strolling through the rich cultural tapestry that makes Florence a timeless destination. </p> <div class="ratings"> <div class="stars"> <ion-icon class="star" name="star"></ion-icon> <ion-icon class="star" name="star"></ion-icon> <ion-icon class="star" name="star"></ion-icon> <ion-icon class="star" name="star"></ion-icon> <ion-icon class="star" name="star-half-outline"></ion-icon> </div> <span>138 reviews</span> </div> </div> </div> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/5eedc7af3f712.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> <div class="cost">from $380 per group</div> <div class="overlay"> <h1>Edinburgh Guid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0