积极向上主题网页设计 - 充满活力的网页动画特效 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>积极向上主题网页设计 - 充满活力的网页动画特效</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
<pre><code>	header {
		background-color: #0072C6;
		color: #fff;
		padding: 20px;
		text-align: center;
	}

	nav {
		background-color: #F1F1F1;
		padding: 10px;
		text-align: center;
	}

	nav a {
		color: #000;
		text-decoration: none;
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
		background-color: #0072C6;
		color: #fff;
		transition: all 0.2s ease-in-out;
	}

	nav a:hover {
		background-color: #fff;
		color: #0072C6;
		border: 1px solid #0072C6;
	}

	section {
		padding: 20px;
		text-align: center;
	}

	h2 {
		color: #0072C6;
		font-size: 36px;
		margin-bottom: 20px;
	}

	p {
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.featured {
		background-color: #F1F1F1;
		padding: 20px;
		text-align: center;
		margin-bottom: 20px;
	}

	.featured h3 {
		color: #0072C6;
		font-size: 24px;
		margin-bottom: 20px;
	}

	.featured p {
		font-size: 18px;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.button {
		background-color: #0072C6;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		text-decoration: none;
		transition: all 0.2s ease-in-out;
	}

	.button:hover {
		background-color: #fff;
		color: #0072C6;
		border: 1px solid #0072C6;
	}

	.animation {
		animation-duration: 2s;
		animation-name: slidein;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	@keyframes slidein {
		from {
			margin-left: 100%;
			width: 300%;
		}

		to {
			margin-left: 0%;
			width: 100%;
		}
	}

	.animation2 {
		animation-duration: 2s;
		animation-name: rotate;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

&lt;/style&gt;
</code></pre>
</head>
<body>
	<header>
		<h1>积极向上</h1>
		<p>让我们一起迎接美好的明天</p>
	</header>
	<nav>
		<a href="#">首页</a>
		<a href="#">关于我们</a>
		<a href="#">联系我们</a>
	</nav>
	<section>
		<div class="container">
			<h2>积极向上，迎接挑战</h2>
			<p>在这个充满变化的时代，我们需要积极向上，勇敢迎接挑战。只有不断学习和进步，才能在竞争激烈的社会中立于不败之地。</p>
			<a href="#" class="button">了解更多</a>
		</div>
	</section>
	<section class="featured">
		<div class="container">
			<h3>我们的优势</h3>
			<p>我们是一支年轻有活力的团队，拥有丰富的经验和专业知识。我们致力于为客户提供最优质的服务，让您的业务蒸蒸日上。</p>
			<a href="#" class="button">联系我们</a>
		</div>
	</section>
	<section>
		<div class="container">
			<h2>我们的服务</h2>
			<p>我们提供多种服务，包括网站设计和制作、SEO优化、社交媒体营销等等。我们的服务覆盖多个行业，为客户量身定制最适合的解决方案。</p>
			<a href="#" class="button">查看更多</a>
		</div>
	</section>
	<section>
		<div class="container">
			<h2>我们的团队</h2>
			<p>我们的团队由一群年轻有活力的人组成，每个人都拥有独特的技能和经验。我们相信只有团队的力量才能创造出最好的结果。</p>
			<div class="animation">
				<img src="https://via.placeholder.com/300x200" alt="团队照片">
			</div>
			<div class="animation2">
				<img src="https://via.placeholder.com/300x200" alt="团队照片">
			</div>
		</div>
	</section>
</body>
</html>