歌单推荐模块
HTML
<!-- 歌单推荐 -->
<div class="recommend">
<div class="wrapper">
<div class="index-hd">
<h1>歌 单 推 荐</h1>
</div>
<div class="index-nav">
<ul>
<li><a href="#" class="active">为你推荐</a></li>
<li><a href="#">网络歌曲</a></li>
<li><a href="#">短视频热歌</a></li>
<li><a href="#">九月推荐</a></li>
<li><a href="#">官方歌单</a></li>
<li><a href="#">情歌</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="wrapper">
<ul class="carousel">
<li class="carousel-item">
<div class="recommend-list">
<a href="#" class="pic-cover">
<!-- 遮罩层 -->
<div class="mask"></div>
<img src="./uploads/pic1.webp" alt="pic">
</a>
<div class="text">
<h4><a href="#">纪念方大同：我们耳机里特别的人</a></h4>
<p>播放量：805.8万</p>
</div>
</div>
</li>
<li></li> *24
......
</ul>
<!-- 圆点 -->
<div class="switch">
<ol class="dots">
<li><a href="#" class="default-click"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
</div>
</div>
<!-- 箭头 -->
<a href="#" class="prev">
<em class="iconfont icon-arrow-left-bold"></em>
</a>
<a href="#" class="next">
<em class="iconfont icon-arrow-right-bold"></em>
</a>
</div>
</div>
CSS
/* 歌单推荐 */
.main .index-hd h1 {
height: (109 / @vw);
padding-top: (43 / @vw);
text-align: center;
line-height: (40 / @vw);
font-weight: 700;
font-size: (32 / @vw);
}
.main .index-nav {
width: 100%;
/* 改为百分比 */
max-width: (1122 / @vw);
/* 如果需要限制最大宽度 */
margin: 0 auto;
/* 居中 */
height: (50 / @vw);
}
.main .index-nav ul {
display: flex;
justify-content: center;
align-items: center;
}
.main .index-nav ul li a {
margin: 0 (24 / @vw);
font-size: (15 / @vw);
}
.banner {
width: 100%;
font-weight: normal;
background-color: #fafafa;
}
.banner .wrapper {
width: (1122 / @vw);
overflow: hidden;
}
.banner ul {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: (10 / @vw);
}
.banner ul.carousel {
width: calc(100% * 5);
flex-wrap: nowrap;
justify-content: flex-start;
margin-bottom: (10 / @vw);
animation: slide 21s infinite;
}
.banner ul.carousel li.carousel-item {
width: (224.4 / @vw);
}
.banner ul.carousel .recommend-list {
width: 100%;
height: (290 / @vw);
}
.banner ul li .pic-cover {
display: block;
position: relative;
overflow: hidden;
}
.banner ul.carousel li.carousel-item .pic-cover {
width: (208 / @vw);
height: auto;
}
.banner ul li .pic-cover img {
width: (208 / @vw);
height: auto;
/* object-fit: cover; */
transition: all 0.3s ease;
}
@keyframes slide {
0%,
16% {
transform: translateX(0);
}
20%,
36% {
transform: translateX(-20%);
}
40%,
56% {
transform: translateX(-40%);
}
60%,
76% {
transform: translateX(-60%);
}
80%,
96% {
transform: translateX(-80%);
}
100% {
transform: translateX(0);
}
}
.banner ul li .pic-cover:hover img {
transform: scale(1.1);
}
.banner ul li .pic-cover .mask {
/* 初始状态为透明，元素存在于布局中 */
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, .3) url(../images/cover_play.56974e6f.png) no-repeat center;
background-size: 20%;
transform-origin: 50% 50%;
transition: all 0.3s ease;
}
.banner ul li .pic-cover:hover .mask {
opacity: 1;
transform: scale(1.7);
}
.banner ul li .text {
width: (208 / @vw);
height: (60 / @vw);
}
.banner ul li .text h4 {
margin-top: (12 / @vw);
}
.banner ul li .text p {
height: (20 / @vw);
color: #999;
}
总体总结
1、导航栏：不同分类的歌单标签
<ul> 使用 Flex 布局实现水平排列
justify-content：center 实现水平居中排列
margin: 0 (24 / @vw)： 控制间距
2、轮播图：自动滚动的歌单推荐列表，鼠标悬停缩放图片并显示遮罩层
@keyframes slide ：动画效果，每 21 秒循环一次
transform: translateX() ：依次切换页面（每次移动 20% 的宽度，对应 5 页内容）
transform: scale(1.1) ：悬停时图片放大
遮罩层 .mask ：从透明（opacity: 0）变为不透明（opacity: 1）
