效果
完整代码
HTML部分
<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> </section>
CSS部分
*, *::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: 2400px; } .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; } @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; } }
Js
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.26.0/dist/tsparticles.min.js"></script> <script> tsParticles.load("tsparticles", { fpsLimit: 60, backgroundMode: { enable: true, zIndex: -1, }, particles: { number: { value: 30, density: { enable: true, area: 800, }, }, color: { value: [ "#3998D0", "#2EB6AF", "#A9BD33", "#FEC73B", "#F89930", "#F45623", "#D62E32", ], }, destroy: { mode: "split", split: { count: 1, factor: { value: 5, random: { enable: true, minimumValue: 4, }, }, rate: { value: 10, random: { enable: true, minimumValue: 5, }, }, particles: { collisions: { enable: false, }, destroy: { mode: "none", }, life: { count: 1, duration: { value: 1, }, }, }, }, }, shape: { type: "circle", stroke: { width: 0, color: "#000000", }, polygon: { sides: 5, }, }, opacity: { value: 1, random: false, animation: { enable: false, speed: 1, minimumValue: 0.1, sync: false, }, }, size: { value: 8, random: { enable: true, minimumValue: 4, }, animation: { enable: false, speed: 40, minimumValue: 0.1, sync: false, }, }, collisions: { enable: true, mode: "destroy", }, move: { enable: true, speed: 7, direction: "none", random: false, straight: false, out_mode: "out", attract: { enable: false, rotateX: 600, rotateY: 1200, }, }, }, detectRetina: true, }); </script>
