效果
完整代码
HTML部分
<header> <div class="container"> <div id="branding"> <h1><span class="highlight">Acme</span> 网络科技</h1> </div> <nav> <ul> <li class="current"><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">案例</a></li> <li><a href="#team">团队</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </div> </header> <section id="showcase"> <div class="container"> <h1 class="fade-in">专业的网络解决方案</h1> <p class="fade-in">我们提供高质量的网络服务，帮助您的业务在数字时代蓬勃发展。</p> <a href="#contact" class="button pulse">联系我们</a> </div> </section> <section id="about"> <div class="container"> <h2 class="fade-in">关于我们</h2> <div class="about-content slide-in-left"> <div class="about-text"> <p>Acme网络科技成立于2010年，是一家专注于提供全方位网络解决方案的科技公司。我们的使命是帮助企业在数字化转型的浪潮中脱颖而出，实现业务增长。</p> <p>凭借我们经验丰富的团队和先进的技术，我们为客户提供从网站开发、移动应用到数字营销的一站式服务。我们相信，每个企业都应该拥有一个强大的在线形象，我们致力于将这一愿景变为现实。</p> </div> <div class="about-image"> <img src="https://via.placeholder.com/500x300" alt="关于我们"> </div> </div> </div> </section> <section id="services"> <div class="container"> <h2 class="fade-in">我们的服务</h2> <div class="services-container"> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="网页设计"> <h3>网页设计</h3> <p>我们创造美观实用的网站，助力您的在线形象。从响应式设计到用户体验优化，我们都能满足您的需求。</p> </div> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="移动应用开发"> <h3>移动应用开发</h3> <p>专业的移动应用开发团队，为您打造iOS和Android平台的高性能应用，让您的业务触手可及。</p> </div> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="数字营销"> <h3>数字营销</h3> <p>结合SEO、社交媒体营销和内容营销等策略，提升您的品牌知名度，吸引更多潜在客户。</p> </div> </div> </div> </section> <section id="portfolio"> <div class="container"> <h2 class="fade-in">成功案例</h2> <div class="portfolio-items"> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目1"> <h3>电子商务网站</h3> <p>为某服装品牌开发的全功能电商平台</p> </div> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目2"> <h3>企业管理系统</h3> <p>为某制造业公司定制的内部管理系统</p> </div> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目3"> <h3>教育类移动应用</h3> <p>广受欢迎的在线学习平台移动应用</p> </div> </div> </div> </section> <section id="team"> <div class="container"> <h2 class="fade-in">我们的团队</h2> <div class="team-members"> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="张三"> <h3>张三</h3> <p>创始人 & CEO</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="李四"> <h3>李四</h3> <p>技术总监</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="王五"> <h3>王五</h3> <p>设计主管</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="赵六"> <h3>赵六</h3> <p>市场总监</p> </div> </div> </div> </se <header> <div class="container"> <div id="branding"> <h1><span class="highlight">Acme</span> 网络科技</h1> </div> <nav> <ul> <li class="current"><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">案例</a></li> <li><a href="#team">团队</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </div> </header> <section id="showcase"> <div class="container"> <h1 class="fade-in">专业的网络解决方案</h1> <p class="fade-in">我们提供高质量的网络服务，帮助您的业务在数字时代蓬勃发展。</p> <a href="#contact" class="button pulse">联系我们</a> </div> </section> <section id="about"> <div class="container"> <h2 class="fade-in">关于我们</h2> <div class="about-content slide-in-left"> <div class="about-text"> <p>Acme网络科技成立于2010年，是一家专注于提供全方位网络解决方案的科技公司。我们的使命是帮助企业在数字化转型的浪潮中脱颖而出，实现业务增长。</p> <p>凭借我们经验丰富的团队和先进的技术，我们为客户提供从网站开发、移动应用到数字营销的一站式服务。我们相信，每个企业都应该拥有一个强大的在线形象，我们致力于将这一愿景变为现实。</p> </div> <div class="about-image"> <img src="https://via.placeholder.com/500x300" alt="关于我们"> </div> </div> </div> </section> <section id="services"> <div class="container"> <h2 class="fade-in">我们的服务</h2> <div class="services-container"> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="网页设计"> <h3>网页设计</h3> <p>我们创造美观实用的网站，助力您的在线形象。从响应式设计到用户体验优化，我们都能满足您的需求。</p> </div> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="移动应用开发"> <h3>移动应用开发</h3> <p>专业的移动应用开发团队，为您打造iOS和Android平台的高性能应用，让您的业务触手可及。</p> </div> <div class="service-box fade-in"> <img src="https://via.placeholder.com/80" alt="数字营销"> <h3>数字营销</h3> <p>结合SEO、社交媒体营销和内容营销等策略，提升您的品牌知名度，吸引更多潜在客户。</p> </div> </div> </div> </section> <section id="portfolio"> <div class="container"> <h2 class="fade-in">成功案例</h2> <div class="portfolio-items"> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目1"> <h3>电子商务网站</h3> <p>为某服装品牌开发的全功能电商平台</p> </div> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目2"> <h3>企业管理系统</h3> <p>为某制造业公司定制的内部管理系统</p> </div> <div class="portfolio-item fade-in"> <img src="https://via.placeholder.com/300x200" alt="项目3"> <h3>教育类移动应用</h3> <p>广受欢迎的在线学习平台移动应用</p> </div> </div> </div> </section> <section id="team"> <div class="container"> <h2 class="fade-in">我们的团队</h2> <div class="team-members"> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="张三"> <h3>张三</h3> <p>创始人 & CEO</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="李四"> <h3>李四</h3> <p>技术总监</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="王五"> <h3>王五</h3> <p>设计主管</p> </div> <div class="team-member fade-in"> <img src="https://via.placeholder.com/150" alt="赵六"> <h3>赵六</h3> <p>市场总监</p> </div> </div> </div> </section> <section id="contact"> <div class="container"> <h2 class="fade-in">联系我们</h2> <form class="fade-in"> <input type="text" placeholder="您的姓名"> <input type="email" placeholder="您的邮箱"> <input type="tel" placeholder="您的电话"> <textarea placeholder="您的留言" rows="5"></textarea> <button type="submit" class="button">发送消息</button> </form> </div> </section> <footer> <div class="container"> <p>Acme 网络科技 © 2024 | 电话: 123-456-7890 | 邮箱: info@acmetech.com</p> </div> </footer>ction> <section id="contact"> <div class="container"> <h2 class="fade-in">联系我们</h2> <form class="fade-in"> <input type="text" placeholder="您的姓名"> <input type="email" placeholder="您的邮箱"> <input type="tel" placeholder="您的电话"> <textarea placeholder="您的留言" rows="5"></textarea> <button type="submit" class="button">发送消息</button> </form> </div> </section> <footer> <div class="container"> <p>Acme 网络科技 © 2024 | 电话: 123-456-7890 | 邮箱: info@acmetech.com</p> </div> </footer>
CSS部分
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; padding: 20px 0; } header { background: #35424a; color: #ffffff; padding-top: 30px; min-height: 70px; border-bottom: #e8491d 3px solid; position: fixed; width: 100%; top: 0; z-index: 1000; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header #branding { float: left; } header #branding h1 { margin: 0; } header nav { float: right; margin-top: 10px; } header .highlight, header .current a { color: #e8491d; font-weight: bold; } header a:hover { color: #cccccc; font-weight: bold; } #showcase { min-height: 400px; background: url('https://via.placeholder.com/1500x400') no-repeat center center/cover; text-align: center; color: #ffffff; padding-top: 150px; } #showcase h1 { font-size: 55px; margin-bottom: 10px; } #showcase p { font-size: 20px; margin-bottom: 20px; } .button { display: inline-block; font-size: 18px; color: #ffffff; background: #e8491d; padding: 10px 20px; border: none; cursor: pointer; text-decoration: none; } .button:hover { background: #ff6a3c; } #about, #services, #portfolio, #team, #contact { padding: 40px 0; } #about { background: #f4f4f4; } .about-content { display: flex; justify-content: space-between; align-items: center; } .about-text { flex: 1; padding-right: 30px; } .about-image { flex: 1; } .about-image img { width: 100%; border-radius: 10px; } #services .services-container { display: flex; justify-content: space-between; flex-wrap: wrap; } .service-box { flex-basis: 30%; text-align: center; padding: 20px; margin-bottom: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .service-box img { width: 80px; margin-bottom: 15px; } #portfolio .portfolio-items { display: flex; flex-wrap: wrap; justify-content: space-between; } .portfolio-item { flex-basis: 30%; margin-bottom: 30px; } .portfolio-item img { width: 100%; border-radius: 5px; } #team .team-members { display: flex; justify-content: space-between; } .team-member { flex-basis: 22%; text-align: center; } .team-member img { width: 100%; border-radius: 50%; margin-bottom: 15px; } #contact form { display: flex; flex-direction: column; } #contact form input, #contact form textarea { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; } footer { background: #35424a; color: #ffffff; text-align: center; padding: 20px 0; } /* 动画效果相关的CSS */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .fade-in.appear { opacity: 1; transform: translateY(0); } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .slide-in-left { animation: 1s ease-out 0s 1 slideInFromLeft; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } .service-box { transition: transform 0.3s ease-in-out; } .service-box:hover { transform: translateY(-10px); } html { scroll-behavior: smooth; }
Js
// 淡入效果 const faders = document.querySelectorAll('.fade-in'); const appearOptions = { threshold: 0.1, rootMargin: "0px 0px -100px 0px" }; const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) { entries.forEach(entry => { if (!entry.isIntersecting) { return; } else { entry.target.classList.add('appear'); appearOnScroll.unobserve(entry.target); } }); }, appearOptions); faders.forEach(fader => { appearOnScroll.observe(fader); }); // 为导航添加平滑滚动效果 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
