文章目录
- 1 频道部分
-
- 2 渐变按钮
-
- 3 左右图片缩小
-
- 4 猜你喜欢区域
-
1 频道部分
下标旋转
.x-header-nav .nav-item:hover .icon-down {transform: rotate(-180deg);
}
频道列表平移
.channel-layer {position: absolute;top: 60px;left: 50%;z-index: -2;width: 1080px;height: 120px;padding: 10px;margin-left: -540px;color: background-color: border: 1px solid 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 渐变按钮
搜索放大镜
/* 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: border-top-right-radius: 20px;border-bottom-right-radius: 20px;background-image: linear-gradient(to right,rgba(255, 255, 255, 0.3),);
}
登录按钮
/* TODO 7. 渐变按钮 */
.card .card-info .login {padding: 3px 34px;color: background-color: 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),);
}
径向渐变
/* TODO 8. 径向渐变 */
.download .dl .dl-btn {width: 68px;height: 34px;line-height: 34px;color: text-align: center;border-radius: 4px;background-image: radial-gradient(50px at 10px 10px,rgba(255, 255, 255, 0.5),transparent);
}
3 左右图片缩小
左边
/* TODO 4. 摆放图片 */
.banner .banner-list .banner-item.left {z-index: 0;transform: translate(-160px) scale(0.8);transform-origin: left center;
}
右边
.banner .banner-list .banner-item.right {z-index: 0;transform: translate(160px) scale(0.8);transform-origin: right center;
}
4 猜你喜欢区域
播放按钮和遮罩
/* 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;
}
图片缩放
/* TODO 6. 图片缩放 */
.album-item .album-item-box:hover img {transform: scale(1.1);
}
