喜马拉雅项目调整

文章目录

    • 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);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

生育是家庭和个人的重要的选择

生育是个人和家庭的重要选择,而国家对于生育政策的制定应该综合考虑多种因素,包括人口结构、经济发展和社会稳定等。同时,我们也应该认识到,男女不应该成为决定一个人是否能够生育的因素。男女在生育中扮演着不同的角色&#xff0…

程序员必须知道!Serverless超强打造国产BAAS

在当今快节奏的软件开发领域,懒人开发者和独立开发者们一直在寻找能够简化开发流程、提高效率的利器。而今,MemFire Cloud以其强大的功能和简便的操作,成为了解决方案中的明星。无需搭建服务,无需开发API接口,你甚至可…

Python画箱线图展示数据分布情况

箱线图(Boxplot)是一种常用的统计图表,用于展示数据的分布情况。 它由五个统计量组成:最小值、第一四分位数(Q1)、中位数(Q2)、第三四分位数(Q3)和最大值。 …

【PHP】使用$this->request->filter() 方法对请求数据进行过滤处理

在ThinkPHP5(TP5)框架中,$this->request->filter() 方法用于对请求数据进行过滤处理,以确保数据的安全性和一致性。过滤规则可以是PHP内置的函数、自定义函数,或是ThinkPHP提供的过滤器。下面列举了一些常用的过…

【c语言】字符串函数和内存函数

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:C语言 目录 前言 一、字符串函数 1.strlen的使用和模拟实现 2.strcpy的使用和模拟实现 3.strcat的使用和模拟实现 4.strcmp的使用和模拟实现 5.strstr的使…

springboot3多模块实践

先帖下目录结构&#xff0c;直接在idea里面新建就行&#xff0c;删掉多余的文件 子模块的新建 根目录pom文件&#xff0c;注意modules、packaging&#xff0c;dependencyManagement统一管理依赖&#xff0c;子模块添加依赖的时候就不用加版本号 <?xml version"1.0…

SAP_FICO模块-获利能力段新增特征字段

业务背景&#xff1a; 公司有启用获利能力分析功能&#xff0c;有一个销售订单接口&#xff0c;是通过第三方销售订单管理平台推送数据到SAP的&#xff0c;用户希望对接新增一个编号ID到销售订单上&#xff0c;并且可以用KE24/KE30报表查看显示&#xff1b; 对于我这么一个后勤…

python3获取显示器信息并计算出各个显示器是多少寸

1、将宽度和高度从毫米转换为英寸(1英寸 = 25.4毫米)。 2、使用勾股定理计算对角线长度。 运行这个脚本后,将会得到每个显示器的对角线尺寸(以英寸为单位),从而确定显示器的尺寸。 pip install screeninfofrom screeninfo import get_monitors import mathdef get_displ…

高通Android13 WIFI配置国家码

不同国家&#xff0c;WIFI使用的信道是不同的&#xff0c;2.4G一共有14个信道&#xff0c;中国使用1-13信道&#xff0c;美国则使用1-11信道。因此&#xff0c;我们需要指定WIFI的国家码&#xff0c;来确定WIFI在扫描和连接过程中&#xff0c;可以在哪些信道上进行。 设置国家…

Java面试八股之简述JVM内存结构

简述JVM内存结构 Java虚拟机&#xff08;JVM&#xff09;内存结构主要分为线程私有区域和线程共享区域两大部分&#xff0c;具体组成部分如下&#xff1a; 线程私有区域 程序计数器&#xff08;Program Counter Register&#xff09;&#xff1a; 记录当前线程执行的字节码行…

逻辑整理(光伏发电预测算法部署用的)

def main():while True:if is_true_month(): # 检查是否为每年的1月份、4月份、7月份、10月份的凌晨1&#xff1a;00&#xff0c;判断到minget_new_history_data # 获取最新的3个月左右的历史数据train model # 进行模型训练save model # 保存模型 在之前模型保存的位置直接覆…

三角形法恢复空间点深度

三角形法恢复空间点深度 如下图&#xff0c;以图 I 1 I_1 I1​为参考&#xff0c;图 I 2 I_2 I2​的变换矩阵为 T T T。相机光心为 O 1 O_1 O1​和 O 2 O_2 O2​。在图 I 1 I_1 I1​中有特征点 p 1 p_1 p1​&#xff0c;对应图 I 2 I_2 I2​中有特征点 p 2 p_2 p2​。理论上直…

战略网络优化:网络可观测性的综合方法

在网络成为运营支柱的时代&#xff0c;了解和优化网络性能至关重要。网络可观测性是了解网络性能的关键&#xff0c;它以一种全面、主动的方式超越了传统监控。本文说明了网络可观测性的变革力量&#xff0c;详细介绍了其优势、差异化因素及其在现代网络管理中的关键作用。 什…

vue学习(三)

14.监视属性watch 当被监视的属性发生变化时&#xff0c;回调函数立即调用&#xff0c;进行操作 监视的两种写法&#xff1a;直接配置或者通过vm添加 watch:{isHot:{immediate:true, //首次用到执行handler(newValue,oldValue){console.log("isHot 被修改了",newV…

python如何做报表系统

首先我们安装的python和PyQt5要保持一致&#xff0c;要么都是32位或者都是64位。 下载安装&#xff0c;安装完成之后我们记得要设置环境变量。 一路选择“下一步”就可以了。 安装完成之后我们需要验证是否成功。 pyqt5的安装直接安装就可以的&#xff0c;主要更改环境变量~~\p…

日语 11 12

11. 若者の意識 わかもの  いしき 新作 新作 新作 新作 新作 しんさく 公開 公開 公開 公開 公開 こうかい 映像 映像 映像 映像 映像 えいぞう 人気 人気 人気 人気 人気 にんき 来週 来週 来週 来週 来週 らいしゅう 外国 外国 外国 外国 外…

数据结构之B数

目录 1.概述 2.特点 3.诞生 4.优缺点 4.1.优点 4.2.缺点 5.应用场景 6.C语言中的B树实现例子 7.总结 1.概述 B树&#xff08;B-tree&#xff09;是一种自平衡的树数据结构&#xff0c;广泛应用于数据库和文件系统中&#xff0c;以便高效地进行顺序读取、写入以及查找…

桥式起重机司机精选试题(附答案)

1、【多选题】凡能引起可燃物质燃烧的热能称为着火源&#xff0c;着火源类型有:( )。( ABCD ) A、明火 B、电气火 C、雷电产生的火花 D、化学反应热 2、【多选题】制动器失效的主要原因是:( )。(BCD) A、制动带间隙过小 B、制动带磨损 C、弹簧失效 D、带上有油 3、【多…

vue3.0(十四)内置组件KeepAlive

文章目录 一、KeepAlive是什么1.KeepAlive的props属性2.KeepAlive的生命周期 二、使用场景三、源码四、缓存后如何获取数据 一、KeepAlive是什么 keep-alive是vue中的内置组件&#xff0c;能在组件切换过程中将状态保留在内存中&#xff0c;防止重复渲染DOM keep-alive 包裹动…

短剧app对接广告联盟流量变现开发 搭建

短剧APP对接广告联盟以实现流量变现的开发和搭建是一个综合性的过程&#xff0c;涉及多个关键步骤和要素。以下是一个大致的指南&#xff1a; 确定目标与定位&#xff1a; 明确短剧APP的目标受众是谁&#xff0c;以及其主要定位是什么&#xff0c;例如是提供原创短剧内容&#…