当前位置: 首页 > news >正文

喜马拉雅项目调整

文章目录

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

相关文章:

喜马拉雅项目调整

文章目录 1 频道部分下标旋转频道列表平移 2 渐变按钮搜索放大镜登录按钮径向渐变 3 左右图片缩小左边右边 4 猜你喜欢区域播放按钮和遮罩图片缩放 1 频道部分 下标旋转 .x-header-nav .nav-item:hover .icon-down {transform: rotate(-180deg); }频道列表平移 .channel-lay…...

【C++】基础知识--inline(内联)关键字以及与宏的区别

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…...

opencv的RGB 颜色表

RGB(255,23,140)是光的三原色,也即是红绿蓝Red,Green,Blue,它们的最大值是255,相当于100%。 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:rgb(255,0,0) …...

__autoload 函数和sql_autoload_register函数

目录 __autoload定义 __autoload使用 sql_autoload_registe定义 sql_autoload_registe使用 __autoload定义 __autoload 函数在 PHP 5.1.0 版本中引入,用于在尝试使用尚未被定义的类时自动加载该类。 当 PHP 解释器遇到一个未定义的类时,如果存在 __…...

Python 中国象棋游戏【含Python源码 MX_011期】

简介: 中国象棋是一种古老而深受喜爱的策略棋类游戏,也被称为中国的国粹之一。它在中国有着悠久的历史,起源可以追溯到几个世纪以前。Python 中国象棋游戏是一个用Python编程语言编写的软件程序,旨在模拟和提供中国象棋的游戏体验…...

wps要会员才能把pdf分开,这不纯属智商税吗

我有一个文档 然后 我给你们写好了一个代码 from PyPDF2 import PdfReader, PdfWriterdef split_pdf(file_path, ranges, output_names):# Open the input PDF filewith open(file_path, rb) as pdf_file:reader PdfReader(pdf_file)total_pages len(reader.pages)if len(r…...

springBoot+mongoDB项目中,使用MongoFactory、MongoTemplate分页条件查询,增删查改

MongoDB:CRUD 添加删除修改条件查询分页条件查询 只展示实现类代码 添加 Autowiredprivate MongoTemplate mongoTemplate;Autowiredprivate MongoFactory mongoFactory;Overridepublic boolean saveEntity(entityForm form) {try {实体类 en new 实体类();en.setName(form.ge…...

Leetcode236 二叉树两节点的最近公共祖先

问题描述: 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x,满足 x 是 p、q 的祖先且 x 的深度尽可能大(一个…...

Web的UI自动化基础知识

目录 1 Web自动化入门基础1.1 自动化知识以及工具1.2 主流web自动化测试工具1.3 入门案例 2 使用工具的API2.1 元素定位2.1.1 id选择器2.1.2 name2.1.3 class_name选择器2.1.4 tag_name选择器2.1.5 link_text选择器2.1.6 partial_link_text选择器2.1.7 xpath选择器2.1.8 CSS选择…...

【我是产品经理_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞 …...

Java智慧工地源码 5G智慧工地系统源码 使用SAAS部署 三维可视化管理,与一线生产过程相融合,集成数据后台,统一前端入口,呈现多方项目信息;

Java智慧工地源码 5G智慧工地系统源码 使用SAAS部署 三维可视化管理,与一线生产过程相融合,集成数据后台,统一前端入口,呈现多方项目信息; 智慧工地是指运用信息化手段,通过三维设计平台对工程项目进行精确设计和施工…...

lock_wait_timeout

lock_wait_timeout 是 MySQL 中的一个重要参数,它用于控制当一个 MySQL 会话在等待锁时的等待时间。以下是关于 lock_wait_timeout 的详细解释: 定义与功能 定义:lock_wait_timeout 是一个会话或线程级别的参数,用于指定 MySQL …...

【可控图像生成系列论文(二)】MimicBrush 港大、阿里、蚂蚁集团合作论文解读2

【可控图像生成系列论文(一)】简要介绍了论文的整体流程和方法,本文则将就整体方法、模型结构、训练数据和纹理迁移进行详细介绍。 1.整体方法 MimicBrush 的整体框架如下图所示。为了实现模仿编辑,作者设计了一种具有双扩散模型…...

Linux时间子系统6:NTP原理和Linux NTP校时机制

一、前言 上篇介绍了时间同步的基本概念和常见的时间同步协议NTP、PTP,本篇将详细介绍NTP的原理以及NTP在Linux上如何实现校时。 二、NTP原理介绍 1. 什么是NTP 网络时间协议(英语:Network Time Protocol,缩写:NTP&a…...

边缘微型AI的宿主?—— RISC-V芯片

一、RISC-V技术 RISC-V(发音为 "risk-five")是一种基于精简指令集计算(RISC)原则的开放源代码指令集架构(ISA)。它由加州大学伯克利分校在2010年首次发布,并迅速获得了全球学术界和工…...

MySQL—navicat创建数据库表

-- 创建学生表(列,字段) 使用SQL创建 -- 学号int 登录密码varchar(20) 姓名,性别varchar(2),出生日期(datetime),家庭住址,email -- 注意点:使用英文括号(),表的名称 …...

html做一个画柱形图的软件

你可以使用 HTML、CSS 和 JavaScript 创建一个简单的柱形图绘制软件。为了方便起见,我们可以使用一个流行的 JavaScript 图表库,比如 Chart.js,它能够简化创建和操作图表的过程。 以下是一个完整的示例,展示如何使用 HTML 和 Cha…...

Pyshark——安装、解析pcap文件

1、简介 PyShark是一个用于网络数据包捕获和分析的Python库,基于著名的网络协议分析工具Wireshark和其背后的libpcap/tshark库。它提供了一种便捷的方式来处理网络流量,适用于需要进行网络监控、调试和研究的场景。以下是PyShark的一些关键特性和使用方…...

java中的Random

Random 是 Java 中的一个内置类,它位于 java.util 包中,主要用于生成伪随机数。伪随机数是指通过一定算法生成的、看似随机的数,但实际上这些数是由确定的算法生成的,因此不是真正的随机数。然而,由于这些数在统计上具…...

PyMuPDF 操作手册 - 01 从PDF中提取文本

文章目录 一、打开文件二、从 PDF 中提取文本2.1 文本基础操作2.2 文本进阶操作2.2.1 从任何文档中提取文本2.2.2 如何将文本提取为 Markdown2.2.3 如何从页面中提取键值对2.2.4 如何从矩形中提取文本2.2.5 如何以自然阅读顺序提取文本2.2.6 如何从文档中提取表格内容2.2.6.1 提…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...