喜马拉雅项目调整

文章目录

- [1 频道部分](#1 频道部分)
- - 下标旋转
  - 频道列表平移
- [2 渐变按钮](#2 渐变按钮)
- [3 左右图片缩小](#3 左右图片缩小)
- - 左边
  - 右边
- [4 猜你喜欢区域](#4 猜你喜欢区域)
- - 播放按钮和遮罩
  - 图片缩放

1 频道部分

下标旋转

python 复制代码

.x-header-nav .nav-item:hover .icon-down {
  transform: rotate(-180deg);
}

频道列表平移

python 复制代码

.channel-layer {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: -2;
  width: 1080px;
  height: 120px;
  padding: 10px;
  margin-left: -540px;
  color: #72727b;
  background-color: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-top: none;
  transition: all 0.5s;
  transform: translateY(-120px);
}

/* TODO 2. 弹窗频道 */
.x-header-nav .nav-item:hover .channel-layer {
  transform: translateY(0);
}

transform: translateY(-120px); 将元素向上移动 120 像素。
transform: translateY(0); 将元素移动回到原始位置。

2 渐变按钮

搜索放大镜

python 复制代码

/* TODO 3. 渐变按钮 */
.x-header-search form .btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f86442;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3),
    #f86442
  );
}

登录按钮

python 复制代码

/* TODO 7. 渐变按钮 */
.card .card-info .login {
  padding: 3px 34px;
  color: #fff;
  background-color: #ff7251;
  border-radius: 30px;
  box-shadow: 0 4px 8px 0 rgb(252 88 50 / 50%);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2),
    #ff7251
  );
}

径向渐变

python 复制代码

/* TODO 8. 径向渐变 */
.download .dl .dl-btn {
  width: 68px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  background-image: radial-gradient(
    50px at 10px 10px,
    rgba(255, 255, 255, 0.5),
    transparent
  );
}

3 左右图片缩小

左边

python 复制代码

/* TODO 4. 摆放图片 */
.banner .banner-list .banner-item.left {
  z-index: 0;
  transform: translate(-160px) scale(0.8);
  transform-origin: left center;
}

右边

python 复制代码

.banner .banner-list .banner-item.right {
  z-index: 0;
  transform: translate(160px) scale(0.8);
  transform-origin: right center;
}

4 猜你喜欢区域

播放按钮和遮罩

python 复制代码

/* TODO 5. 播放按钮和遮罩 */
.album-item .album-item-box::after {
  position: absolute;
  left: 0;
  top: 0;
  /*伪元素搭配使用*/
  content: '';
  width: 100%;
  height: 100%;
  /*既有背景图又有阴影*/
  background: rgba(0,0,0,.5) url(../assets/play.png) no-repeat center / 20px;
  opacity: 0;
  transition: all .5s;
}

.album-item .album-item-box:hover::after {
  opacity: 1;
  /*把背景图方法到50px*/
  background-size: 50px;
}

图片缩放

python 复制代码

/* TODO 6. 图片缩放 */
.album-item .album-item-box:hover img {
  transform: scale(1.1);
}