喜马拉雅项目调整

ops/2024/9/23 11:16:41/

文章目录

    • 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.ppmy.cn/ops/50698.html

相关文章

information_schema.innodb_trx

information_schema.innodb_trx 是 MySQL 中的一个系统表,它提供了关于当前正在进行的 InnoDB 事务的信息。这个表在 information_schema 数据库中,这个数据库包含了关于 MySQL 服务器状态、数据库元数据和其它内部信息的表和视图。 information_schema…

awtk界面实现下拉屏功能

单页面下拉屏 1.src/common/下创建slidescreen.h slidescreen.c slidescreen.h #ifndef SLIDESCREEN_H #define SLIDESCREEN_H#include "awtk.h" #include "../common/navigator.h"BEGIN_C_DECLS#define false 0 #define true 1//滑屏动作值 #define SL…

第九章 Three.js 高级材质与着色器 (一)

材质和着色器在Three.js中扮演着至关重要的角色,它们决定了物体的外观和视觉效果。在本章中,我们将深入学习Three.js中的高级材质和自定义着色器,以创建复杂和精美的视觉效果。 9.1 基本材质回顾 在开始深入探讨高级材质之前,回…

服务器新硬盘分区、格式化和挂载

文章目录 参考文献查看了一下起点现状分区(base) ~ sudo parted /dev/sdcmklabel gpt(设置分区类型)增加分区 格式化需要先退出quit(可以)(base) / sudo mkfs.xfs /dev/sdc/sdc1(失败)sudo mkfs.xfs /dev/s…

el-select filterable模糊搜索在iOS手机上无法弹出软键盘,解决方案

前提: el-select filterable模糊搜索在iOS手机上无法弹出软键盘,在手机上使用时,iOS手机,该组件无法唤起软键盘,导致没法进行模糊搜素。 于是。开始去找原因,发现主要是因为 组件中,input上有一…

【Python】一文向您详细解析内置装饰器 @lru_cache

【Python】一文向您详细解析内置装饰器 lru_cache 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地!🎇 🎓 博主简介:985高校的普通本硕&a…

java设计模式和面向对象编程思想

Java设计模式和面向对象编程思想是软件开发中的核心概念,对于构建可维护、可扩展的软件系统至关重要。下面是对这两个主题的知识点总结: 面向对象编程(OOP)思想 封装:将数据(属性)和操作这些数据…

Go 基础丨字符串 string

1. 底层 runtime/string.go type stringStruct struct {str unsafe.Pointer // 指向底层 Byte 数组len int // String 所占字节数 }reflect/value.go type StringHeader struct {Data uintptrLen int }2. 测试 s_en : "hedonwang"s_cn : "王小佳"…