js+css实现自适应人物介绍幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现自适应人物介绍幻灯片效果代码,点击底部圆点可切换。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans-serif; } html { scroll-behavior: smooth; } body { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background-image: radial-gradient( at 40% 20%, rgb(255, 184, 122) 0px, transparent 50% ), radial-gradient(at 80% 0%, rgb(31, 221, 255) 0px, transparent 50%), radial-gradient(at 0% 50%, rgb(255, 219, 222) 0px, transparent 50%), radial-gradient(at 80% 50%, rgb(255, 133, 173) 0px, transparent 50%), radial-gradient(at 0% 100%, rgb(255, 181, 138) 0px, transparent 50%), radial-gradient(at 80% 100%, rgb(107, 102, 255) 0px, transparent 50%), radial-gradient(at 0% 0%, rgb(255, 133, 167) 0px, transparent 50%); background-repeat: no-repeat; } main { width: 800px; } main h1 { text-align: center; font-size: clamp(2rem, 4vw, 2.6rem); color: #fff; margin-bottom: 70px; } .slide-row { display: flex; width: 3200px; transition: 0.5s; } .slide-col { position: relative; width: 800px; height: 400px; } .hero { position: absolute; top: 0; right: 0; height: 100%; } .hero img { height: 100%; border-radius: 10px; width: 320px; object-fit: cover; pointer-events: none; user-select: none; } .content { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 520px; height: 270px; color: #4d4352; background: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.5px); -webkit-backdrop-filter: blur(4.5px); border-radius: 10px; padding: 45px; z-index: 2; user-select: none; } .content p { font-size: 1.25rem; font-weight: 400; line-height: 1.3; } .content h2 { font-size: 1.5rem; font-weight: 600; margin-top: 35px; color: #4d4352; } .indicator { display: flex; justify-content: center; margin-top: 4rem; } .indicator .btn { display: inline-block; height: 15px; width: 15px; margin: 4px; border-radius: 15px; background: #fff; cursor: pointer; transition: all 0.5s ease-in-out; } .btn.active { width: 30px; } .slider { width: 100%; overflow: hidden; } @media (max-width: 850px) { main { width: 500px; } .slide-row { width: 2000px; } .slide-col { width: 500px; height: 250px; } .hero img { width: 200px; } .content { width: 320px; height: 200px; padding: 20px; } .content p { font-size: 0.9rem; } .content h2 { font-size: 1.2rem; margin-top: 20px; } } @media (max-width: 550px) { main { width: 300px; } .slide-row { width: 1200px; } .slide-col { width: 500px; height: 300px; } .hero { top: 60%; height: 100px; z-index: 5; } .hero img { width: 100px; } .content { width: 300px; } } </style> </head> <body> <main> <h1>Testimonials</h1> <div class="slider"> <div class="slide-row" id="slide-row"> <div class="slide-col"> <div class="content"> <p>Zen Doan is a business analyst, entrepreneur and media proprietor, and investor. She also known as the best selling book author.</p> <h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0