for ya 简单歌词海报响应式_响应式音乐歌词-CSDN博客

本文链接：https://blog.csdn.net/qq_42280724/article/details/113865660

这篇博客展示了如何利用HTML和CSS制作一个动态歌词海报，通过改变div的定位和背景色，实现了移动端视图的平滑切换。代码中使用了fontawesome图标库，并通过导航链接触发不同季节背景的显示。CSS部分设置了元素布局和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是看后盾人视频做出来的一个简单歌词海报，后盾人视频请戳【超酷移动端视图切换】

效果是这样

看看动图

在这里插入图片描述

话不多说，上代码

- HTML部分

图标引入：百度搜索fontawesome，点击下载或者用 CDN 都可以！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>for ya</title>
		<link rel="stylesheet" href="css/m_hdr.css">
		<!--不要图标就不用引入fontawesome-->
		<link rel="stylesheet" href="vendor/font-awesome.min.css">
	</head>
	<body>
		<main>
			<div id="spring">
				<p>所有美好全部come for ya</p>
				<p>我的爱也全部come for ya</p>
				<p>Baby 这是我给你的礼物</p>
				<p>只想把你藏在我心底</p>
				<i class="fa fa-music fa-3x"></i>
			</div>
			<div id="summer">
				<p>亲爱的 what is wrong</p>
				<p>告诉我 who you love</p>
				<p>亲爱的 what is wrong</p>
				<p>告诉我 who you love</p>
				<i class="fa fa-plane fa-3x"></i>
			</div>
			<div id="winter">
				<p>喜欢你是我 的秘密</p>
				<p>深度就像在海底十万米</p>
				<p>我欣赏日出和日落的静谧</p>
				<p>爱着天空也深爱着你</p>
				<i class="fa fa-snowflake-o fa-3x"></i>
			</div>
		</main>
		<nav>
			<a href="#spring">Come</a>
			<a href="#summer">For</a>
			<a href="#winter">Ya</a>
		</nav>
	</body>
</html>

- CSS部分

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

main{
	flex: 1;
	position: relative;
}

main div{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
	z-index: 1;
	transform: translateY(-100%);
	transition: 1s;
}

main p{
	display: block;
	color: #fff;
	font-size: 1.5em;
	padding-bottom: .5rem;
}

div:nth-of-type(1):target{
	background: #cbc0d3;
}

div:nth-of-type(2):target{
	background: #efd3d7;
}

div:nth-of-type(3):target{
	background: #ade8f4;
}

div:target{
	transform: translateY(0);
}

i[class^="fa"]{
	color: #fff;
}

nav{
	height: 7vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background-color: #8e9aaf;	
}

a{
	flex: 1;
	text-align: center;
	color: #edf2f4;
	opacity: .8;
	font-size: 1.5em;
	font-family: "book antiqua";
	text-decoration: none;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
}