效果
完整代码
<nav class="navbar"> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> <header class="hero"> <div class="carousel"> <div class="carousel-item active"> <div> <h1>欢迎来到我们的公司</h1> <p>我们致力于为您提供最优质的服务和解决方案</p> </div> </div> <div class="carousel-item"> <div> <h1>创新科技</h1> <p>引领行业前沿，打造未来科技</p> </div> </div> <div class="carousel-item"> <div> <h1>全球视野</h1> <p>放眼世界，为您开启国际化发展之路</p> </div> </div> </div> <div class="carousel-nav"> <div class="carousel-nav-item active"></div> <div class="carousel-nav-item"></div> <div class="carousel-nav-item"></div> </div> </header> <section class="features"> <div class="feature"> <h2>创新科技</h2> <p>我们不断追求技术创新，为客户提供最前沿的解决方案。</p> </div> <div class="feature"> <h2>优质服务</h2> <p>我们的团队随时为您提供专业、高效的支持和服务。</p> </div> <div class="feature"> <h2>全球视野</h2> <p>我们拥有国际化的团队和资源，助力您的业务在全球范围内发展。</p> </div> </section> <footer class="footer"> <p>© 2024 酷炫企业官网. 保留所有权利。</p> </footer>
<script> let currentSlide = 0; const slides = document.querySelectorAll('.carousel-item'); const navItems = document.querySelectorAll('.carousel-nav-item'); function showSlide(index) { slides[currentSlide].classList.remove('active'); navItems[currentSlide].classList.remove('active'); currentSlide = (index + slides.length) % slides.length; slides[currentSlide].classList.add('active'); navItems[currentSlide].classList.add('active'); } function nextSlide() { showSlide(currentSlide + 1); } setInterval(nextSlide, 5000); navItems.forEach((item, index) => { item.addEventListener('click', () => showSlide(index)); }); </script>
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } .navbar { background-color: #333; color: #fff; padding: 1rem; position: fixed; width: 100%; top: 0; z-index: 1000; transition: background-color 0.3s ease; } .navbar:hover { background-color: #555; } .navbar ul { display: flex; list-style: none; justify-content: flex-end; } .navbar li { margin-left: 1rem; } .navbar a { color: #fff; text-decoration: none; transition: color 0.3s ease; } .navbar a:hover { color: #ffd700; } .hero { height: 100vh; position: relative; overflow: hidden; } .carousel { width: 100%; height: 100%; position: relative; } .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; opacity: 0; transition: opacity 0.5s ease-in-out; } .carousel-item.active { opacity: 1; } .carousel-item:nth-child(1) { background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%); } .carousel-item:nth-child(2) { background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%); } .carousel-item:nth-child(3) { background: linear-gradient(45deg, #a18cd1 0%, #fbc2eb 100%); } .carousel-item h1 { font-size: 3rem; margin-bottom: 1rem; opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } .carousel-item p { font-size: 1.5rem; max-width: 600px; margin: 0 auto; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; } .carousel-item.active h1, .carousel-item.active p { opacity: 1; transform: translateY(0); } .carousel-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .carousel-nav-item { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin: 0 5px; cursor: pointer; transition: background-color 0.3s ease; } .carousel-nav-item.active { background-color: #fff; } .features { padding: 4rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-around; } .feature { flex-basis: calc(33.333% - 2rem); margin: 1rem; padding: 2rem; background-color: #f4f4f4; border-radius: 10px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .feature h2 { margin-bottom: 1rem; } .footer { background-color: #333; color: #fff; text-align: center; padding: 2rem; } </style>
