前言
网易可以说是做页面做的最好的大厂之一了，网易的程序员一直秉持“把用户当小白”的原则，注重每一个细节的打磨，这也使用户体验极佳，学习如何做它的页面能让我们对HTML5和css有更深的了解，本文将与各位一起探讨网易云音乐的设计理念和技术实现。
模拟器
在pc端我们通过模拟器进行本地调试，模拟器顾名思义，可以完全模拟应用在手机上的复刻。为了确保我们的产品能够完美适配各个不同的手机屏幕，我们一般使用手机型号为iPhone SE的来进行调试，这能保证每个发光点（pt）都能对应实际的2个像素（px），从而呈现更加细腻的画面效果。
结构样式
首先，我们需要创建基本的HTML结构。这个页面将包含一个音频文件、一个音乐按钮、一个滑动容器（使用Swiper库）和几个滑动页面。
音频播放
为了实现音乐的播放和暂停，我们使用了HTML5的标签，并通过JavaScript来控制音频的播放状态。
<audio id="j-bgm" src="./bgm.mp3"></audio>
// 获取音频元素和音乐按钮元素
const audio = document.getElementById('j-bgm');
const musicBtn = document.querySelector('.music-btn');
// 为音乐按钮添加事件监听器
musicBtn.addEventListener('click', function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
})
在js里，我们通过检查audio.paused的属性可以判断音频是否处于暂停状态。如果音频暂停，则调用audio.play()方法播放音频；否则，调用audio.pause()方法暂停音频。
滑动翻页
为了实现页面的滑动翻页效果，我们使用了Swiper插件。Swiper是一个非常强大的滑动插件，可以支持多种滑动方向和效果。它还有一个非常牛的特点就是它能自动适应不同屏幕尺寸，确保代码能在各种设备上运行。我们可以通过 <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">将Swiper 引入
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="view index">
<div class="logo-c"></div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
完整代码
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云音乐年终总结h5</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<link rel="stylesheet" href="./common.css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<audio id="j-bgm" src="./bgm.mp3"></audio>
<div class="next-view-c"></div>
<div class="music-btn off"></div>
<!-- 滑页操作 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="view index">
<div class="logo-c"></div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script>
// dom
const audio = document.getElementById('j-bgm');
// 选择器
const musicBtn = document.querySelector('.music-btn');
musicBtn.addEventListener('click', function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
musicBtn.classList.toggle('off');
})
// 滑屏
new Swiper('.swiper-container', {
direction: 'vertical'
})
</script>
</body>
</html>
css样式
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.music-btn {
z-index: 999;
position: fixed;
top: 25px;
left: 25px;
width: 40px;
height: 40px;
background: url(./assert/close.png) no-repeat center / cover;
}
.music-btn.off {
background-image: url(./assert/music.png);
}
/* 单屏 滑屏h5 效果 */
.swiper-container{
width: 100%;
height: 100%;
}
.swiper-slide {
background-color: green;
}
.swiper-slide:nth-child(odd) {
background-color: pink;
}
.next-view-c {
z-index: 999;
background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/gx.4ae36e08269404412ecdb99e9453ca17.svg);
background-size: 100%;
left: 50%;
bottom: 10px;
width: 13px;
height: 86px;
position: fixed;
transform: translate3d(-50%, 0, 0);
}
.view {
width: 100%;
height: 100%;
overflow: hidden;
}
.view.index {
background: url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/bgg.d78404cec29e5275598b87d1716f0592.png);
position: absolute;
background-position: center;
background-size: cover;
}
.logo-c {
position: absolute;
top: 5.6%;
right: 15%;
width: 186px;
height: 218px;
background:url(http://s5.music.126.net/static_public/5c21db8d4684556c72180904/title@2x.7c87506dfb012b9dfac5fdd39e2ccb06.png) no-repeat;
background-size: 100%;
}
有人可能疑问第42行，最后一个0不是没有用吗，为什么还要多此一举呢，其实这正是网易的细节所在，在CSS中使用translate3d时，浏览器会尝试使用GPU（图形处理单元）来处理这些变换，而不是CPU。这可以显著提高动画的性能，特别是在移动设备上。所以即使z值为0，也可以触发硬件加速。
成品如下：
