网易云首页同款动效制作

网易云首页同款动效制作

1、滚动条样式修改

1.1、如何让滚动条出现

在css样式中给盒子设置如何下面即可出现滚动条

overflow: auto;

原版的样式如下，并不美观：

1.2、设置滚动条(CSS)

官方的滚动条样式如下：

对滚动条的样式进行修改需要使用伪类选择器

::-webkit-scrollbar //滚动条整体部分

::-webkit-scrollbar-button //滚动条两端的按钮

::-webkit-scrollbar-track // 外层轨道

::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个

::-webkit-scrollbar-corner //边角

::-webkit-resizer ///定义右下角拖动块的样式

写法和伪类选择器一致

/* 身体左侧 */
.main .left {
  border-right: 2px solid #E0E0E0;
  width: 200px;
  overflow: auto;
}

/* 身体右侧 */
.main .right {
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
}

/* 身体左右两侧滚动条 */
.main .left::-webkit-scrollbar,
.main .right::-webkit-scrollbar {
  width: 6px;
}

.main .left::-webkit-scrollbar-thumb,
.main .right::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #E0E0E0;
}

.main .left::-webkit-scrollbar-track,
.main .right::-webkit-scrollbar-track {
  border-radius: 5px;
  width: 8px;
}

设置后的样式如下，和网易云音乐的滚动条一致：

---

2、鼠标悬停到推荐歌单上的动画效果

2.1、使用的动画效果类型

官方每日推荐动画效果如下：

wyysp01

可以看到上方的文字框是滑入滑出动画效果，右下角的播放图标是淡入淡出动画效果

鼠标移入时：先播放右下角的淡入动画，再播放上方的滑入动画

鼠标移出时：先播放右下角的淡出动画，再播放上方的画出动画

2.2、制作动画效果(jQuery)

在播放当前动画前，用jQuery的.stop()方法停止上一个动画效果

淡入：.fadeIn(毫秒)

淡出：.fadeOut(毫秒)

滑入：.slideDown(毫秒)

滑出：.slideUp(毫秒)

停止：.stop()

延时：.delay(毫秒)

// 身体右侧推荐歌单列表 顶部悬浮窗 滑入滑出动画
// 身体右侧推荐歌单列表 右下角播放图标 淡入淡出动画
{
  let liEle = $(".main .right .recommend li");

  liEle.mouseenter(function () { 
    //右下角播放图标 淡入动画
    $(this).children("div .bottom").stop().fadeIn(500)
    // 顶部悬浮窗 滑入动画
    $(this).children("div .top").stop().delay(500).slideDown(500)
  });
  liEle.mouseleave(function () { 
    // 右下角播放图标 淡出动画
    $(this).children("div .bottom").stop().fadeOut(500)
    // 顶部悬浮窗 滑出动画
    $(this).children("div .top").stop().delay(500).slideUp(500)
  });
}

代码效果展示：

wyysp02

---

3、歌曲名字水平循环滚动效果

3.1、使用marquee标签

使用marquee标签，marquee标签的作用是创建一个滚动的文本字幕。

<marquee onMouseOver="this.start()">
	<span id="song_name">着魔</span>
	<span id="song_name2">(网游《恶魔法则》主题曲)</span>
</marquee>

代码效果展示：

wyysp03