做捕鱼网站,雄安做网站优化,公司官网制作方案,网站图片动态换名文章目录 1 频道部分下标旋转频道列表平移 2 渐变按钮搜索放大镜登录按钮径向渐变 3 左右图片缩小左边右边 4 猜你喜欢区域播放按钮和遮罩图片缩放 1 频道部分
下标旋转
.x-header-nav .nav-item:hover .icon-down {transform: rotate(-180deg);
}频道列表平移
.channel-lay… 文章目录 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: #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 渐变按钮
搜索放大镜
/* 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);
}登录按钮
/* 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);
}径向渐变
/* 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 左右图片缩小
左边
/* 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);
}
