这是看后盾人视频做出来的一个简单歌词海报,后盾人视频请戳【超酷移动端视图切换】
效果是这样
![](https://i-blog.csdnimg.cn/blog_migrate/fc7f104893ee32b1e491ec8ff0c1e9bf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d9e9c0d920fda4ea2dd2b7bc3725cc21.png)
看看动图
话不多说,上代码
- 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;
}