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

css实现音乐播放器页面 · 笔记

news 2026/2/8 17:58:51

效果

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><title>音乐播放器</title><style>body {padding: 0;margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background-image: url("http://p2.music.126.net/VGf3MMmpQpjppLrKPinepw==/109951164207181002.jpg");background-repeat: no-repeat;background-size: 100% 100%;}.blurBG {position: absolute;left: 0;top: 0;width: 100%;height: 100%;backdrop-filter: blur(50px);transition: all 0.8s;z-index: -2;}.player {position: relative;box-sizing: border-box;}/* 后代选择器 */.player .playerOpe {height: 80px;width: 360px;border-radius: 15px;background-color: #fff;display: flex;justify-content: center;z-index: 1;}.control i {width: 40px;height: 40px;font-size: 25px;color: #666;cursor: pointer;text-align: center;line-height: 40px;margin-top: 20px;transition: all 0.3s;}i:hover {border-radius: 30%;background-color: #ccc;/* 背景变灰色 */color: #eee;/* 元素变白色 */}.cover {width: 100px;height: 100px;border-radius: 100%;padding: 6px;background-color: #fff;margin-top: -50px;background-size: cover;animation: rotate1 5s infinite linear;animation-play-state: running;position: relative;z-index: 2;}.cover img {width: 100%;border-radius: 100%;}.cover::before {/* 伪类元素 */content: "";display: inline-block;width: 20px;height: 20px;background-color: #fff;border-radius: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}@keyframes rotate1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.player .playerInf {width: 90%;height: 120%;position: absolute;top: -100%; /* 需要调整！！！ */transform: translate(5%);border-radius: 10px;backdrop-filter: blur(80px);background: #fff;display: flex;z-index: -1;/* 毛玻璃效果 */background: rgba( 255, 255, 255, 0.4 );backdrop-filter: blur( 4px );-webkit-backdrop-filter: blur( 4px );border-radius: 10px;border: 1px solid rgba( 255, 255, 255, 0.18 );}.playerInf .inf {position: absolute;left: 45%;top: 8%;width: 53%;}.inf .name {font-size: 17px;font-weight: 700;}.inf .singer_album {font-size: 10px;color: #555;line-height: 15px;}.inf .progress {width: 100%;}.progress .time {font-size: 10px;display: flex;justify-content: space-between;color: #f2709b;line-height: 22px;}.progress .progress_bar {width: 100%;height: 3px;background-color: #fff;position: relative;border-radius: 3px;}.progress_bar .progress_line {width: 32%; /* 需要变化！！！ */height: 3px;position: absolute;left: 0;background-color: #f2709b;border-radius: 3px;}.maskBG {position: absolute;left: 0;top: 0;width: 73%;height: 100%;background-color: rgba(0,0,0,0.5);transition: all 0.8s;z-index: 5;display: none;}.menu {position: absolute;top: 0;right: 0;width: 27%;height: 100%;background-color: #fff;}.menu .title {width: 90%;height: 6%;margin: auto;display: flex;justify-content: space-between;font-size: 25px;padding: 2%;}.title .close {color: #666;cursor: pointer;transition: all 0.1s;}.close:hover {transform: scale(1.1);}.menu .songs_list {width: 90%;height: calc(720px);margin: auto;padding: 0 2px;overflow-y: auto;overflow-x: hidden;}       .songs_list .list {width: 100%;list-style: none;padding-inline-start: 0px;}.list li {padding: 10px 0; border-bottom: 1px solid rgba(100,100,100,1);justify-content: space-between;display: flex;}li .choose {font-size: 23px;color: #f2709b;cursor: pointer;transition: all 0.1s;}.choose:hover {transform: scale(1.1);}</style>
</head>
<body><div class="player"><!-- 操作界面 --><div class="playerOpe"><!-- 歌曲封面 --><div class="cover"><img src="http://p2.music.126.net/VGf3MMmpQpjppLrKPinepw==/109951164207181002.jpg" alt="封面"></div><!-- 控制标识 --><div class="control"><i class="fa fa-step-backward Backward"></i><i class="fa fa-play Play"></i><!--  <i class="fa fa-pause Plause"></i> --><i class="fa fa-step-forward Forward"></i><i class="fa fa-bars Bars"></i></div></div><!-- 信息界面 --><div class="playerInf"><!-- 歌曲信息 --><div class="inf"><div class="name">都是夜归人</div><div class="singer_album">阿云嘎、郑云龙</div><!-- 进度 --><div class="progress"><!-- 时间 --><div class="time"><span class="current_time">0:00</span><span class="total_time">4:56</span></div><!-- 进度条 --><div class="progress_bar"><div class="progress_line"></div></div></div></div></div></div><div class="blurBG"></div><div class="maskBG"></div><div class="menu"><div class="title"><span class="title_name">音乐列表</span><span class="fa fa-close close"></span></div><div class="songs_list"><ul class="list"><li><span>01. 都是夜归人 - 阿云嘎、郑云龙</span><span class="fa fa-play-circle choose"></span></li></ul></div></div>
</body>
</html>

笔记

  1. vh和vw

    1vw = 1/100视口宽度

    1vh = 1/100视口高度

  2. Font Awesome 图标不显示

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

  3. ::before

    css中“::before”的意思是“在…之前”，是一个伪类元素，用于创建一个伪元素，并将其设置为选中元素的第一个子元素，插入到元素的其他内容之前，语法为“element::before{样式代码}”。

  4. transform

    (变形) 支持旋转、扭曲、缩放、移动等

    • 基点：所有操作的默认基点都在中心位置
    • transform-origin：(x,y)改变元素基点。

    a)rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D) 旋转，正数为顺时针

    b)translate(x,y) ，translateX(x) ，translateY(y)平移

    c)scale(x,y)，scaleX(x,1)， scaleY(1,Y) 缩放基数为1，大于1放大，小于1缩小

    d)skew(x,y)， skewX(x)， skewY(y) 扭曲

  5. cursor: pointer;鼠标移动到元素上会有变化

  6. :hover

    在鼠标移到元素上时添加的特殊样式。

  7. overflow-x指定是否要剪辑的左/右边缘的内容.

    overflow-y指定是否要剪辑的顶部/底部边缘的内容

  8. justify-content: space-between;

    元素向两边对齐。注意，必须开启弹性盒子模型。

  9. padding-inline-start: 0px;

    去掉ul li开头前的空白。（会自带40px的空余）

  10. overflow-y: auto;

    设置y方向滚动轴，如果内容一处则滚动轴生效。(overflow)

    注意：当父容器设定为百分比时，该属性会失效。必须设定父容器为固定宽高

相关文章：

css实现音乐播放器页面 · 笔记

效果 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …...

编程日记 2023/5/28 18:20:25

buu [NPUCTF2020]这是什么觅 1

题目描述&#xff1a; 就一个这种文件&#xff0c;用记事本打开后&#xff1a; 题目分析&#xff1a; 打开后就一串看不懂的东西&#xff0c;想想这个东西曾经在 010editor 或 winhex中出现过&#xff08;右端&#xff09;既然如此那么我们就用它打开&#xff0c;得到&#…...

编程日记 2023/5/28 22:53:48

Restful API 设计规范

1. 简介 目前 "互联网软件"从用客户端/服务端模式&#xff0c;建立在分布式体系上&#xff0c;通过互联网通讯&#xff0c;具有高延时、高开发等特点。但是软件开发和网络是两个不同的领域&#xff0c;交集很少。要使得两个融合&#xff0c;就要考虑如何在互联网环境…...

编程日记 2023/5/28 22:53:46

sigwaittest测试超标的调试过程

1&#xff0c;问题描述硬件环境&#xff1a;飞腾S2500&#xff08;64核&#xff09;OS&#xff1a;kylinOS, linux preempt rt&#xff0c; 4.19.90测试命令&#xff1a;sigwaittest -p 90 -i 1000 -a 1测试结果&#xff1a;信号混洗值最大超过了80us&#xff0c;与飞腾其他CPU…...

编程日记 2023/5/28 22:53:44

Python进阶-----面对对象4.0（面对对象三大特征之--继承）

目录 前言&#xff1a; Python的继承简介 1.什么是继承 2.继承的好处 3.object类 继承的相关用法 1.继承的定义与法则 2.对继承的重写 3.&#xff08;单继承&#xff09;多层继承 4.多继承 5.多继承重写时调用父类方法 前言&#xff1a; 在讲之前&#xff0c;我想说说中…...

编程日记 2023/5/28 22:53:42

九龙证券|利好政策密集发布，机构扎堆看好的高增长公司曝光

新能源轿车销量和保有量快速增长&#xff0c;带来了充电桩商场的微弱需求。 日前&#xff0c;商务部部长王文涛表明&#xff0c;本年将在落实好方针的一起&#xff0c;活跃出台新方针办法&#xff0c;比方辅导当地展开新能源轿车下乡活动&#xff0c;优化充电等使用环境&#x…...

编程日记 2023/5/28 22:53:40

stm32CubeIDE FMC 驱动LCD（8080）

一&#xff0c;TFT屏硬件接口16位&#xff0c;80并口。二&#xff0c;FMC介绍。FSMC&#xff08;Flexible Static Memory Controller&#xff09;&#xff0c;译为灵活的静态存储控制器。STM32F1 系列芯片使用 FSMC 外设来管理扩展的存储器&#xff0c;它可以用于驱动包括 SRAM…...

编程日记 2023/5/28 22:53:38

Java 数据类型

数据类型用于对数据归类&#xff0c;以便开发者理解和操作。 基本数据类型 Java 确定了每种基本数据类型所占存储空间的大小&#xff0c;不会像其它语言那样随机器硬件架构的变化而变化&#xff0c;这使 Java 程序更具可移植性。 Java 中定义了如下的基本数据类型。 byte …...

编程日记 2023/5/28 22:53:36

Prometheus 监控云Mysql和自建Mysql(多实例)

本文您将了解到 Prometheus如何配置才能监控云Mysql(包括阿里云、腾讯云、华为云)和自建Mysql。 Prometheus 提供了很多种Exporter&#xff0c;用于监控第三方系统指标&#xff0c;如果没有提供也可以根据Exporter规范自定义Exporter。 本文将通过MySQL server exporter 来监控…...

编程日记 2023/5/28 22:53:34

Vue3中的h函数

文章目录简介简单使用参数使用计数器进阶使用函数组件插槽专栏目录请点击 简介 众所周知&#xff0c;vue内部构建的其实是虚拟DOM&#xff0c;而虚拟DOM是由虚拟节点生成的&#xff0c;实质上虚拟节点也就是一个js对象事实上&#xff0c;我们在vue中写的template,最终也是经过…...

编程日记 2023/5/28 22:53:32

阿尔法开发板 IMX6ULL 说明

一. IMX6ULL开发板 IMX6ULL开发板即正点原子的阿尔法(ALPHA)开发板&#xff0c;采用恩智浦芯片&#xff0c;cortex-A7架构的。 二. IM6ULL开发板说明 1. IO说明 对于IMX6ULL芯片&#xff0c;一个IO对应两个寄存器&#xff0c;第一个寄存器负责配置其复用功能&#xff0c;…...

编程日记 2023/5/28 22:53:30

Altium Designer19 #学习笔记# | 基础应用技巧汇总

全文目录一.元件符号库二.元件封装库1.AD09 集成元件库/封装库三.电路原理图1. 巧用查找"相似对象功能"1.1 查找相同元件1.2. 查找相同文本1.3. 查找相同网络 &#xff1a;E - S - C四.PCB原理图【AD PCB模式下的常用快捷键】PCB视图放大/缩小PCB视图左/右移动PCB切换…...

编程日记 2023/5/28 22:53:27

Python 元类编程实现一个简单的 ORM

概述 什么是ORM?　　　 ORM全称“Object Relational Mapping”&#xff0c;即对象-关系映射&#xff0c;就是把关系数据库的一行映射为一个对象&#xff0c;也就是一个类对应一个表&#xff0c;这样&#xff0c;写代码更简单&#xff0c;不用直接操作SQL语句。 现在我们就要实…...

编程日记 2023/5/28 22:53:26

《C++ Primer Plus》第18章：探讨 C++ 新标准（7）

C11 新增的其他功能 C11 增加了很多功能&#xff0c;本书无法全面介绍&#xff1b;另外&#xff0c;本书编写期间&#xff0c;其中很多功能还未得到广泛实现。然而&#xff0c;有些功能有必要简要地介绍一下。 并行编程 当前&#xff0c;为提高计算机性能&#xff0c;增加处…...

编程日记 2023/5/28 22:53:23

Redis学习（二）：Redis安装测试

概述 Redis是什么 Redis, Remote Dictionary Server, 即远程字典服务。免费开源的数据库。 由C语言编写&#xff0c;支持网络&#xff0c;可基于内存亦可持久化的日志型、KV数据库&#xff0c;并提供所种语言的API。 Redis能干嘛 用于内存存储&#xff0c;持久化。rdb、ao…...

编程日记 2023/5/28 22:53:21

Vector - CAPL - 简介及数据结构

对于想进入车载行业或者已经在车载行业工作的朋友对于CAPL这个词都会相当的熟悉&#xff0c;都知道他是做车载网络测试脚本的语言&#xff0c;并且跟C有点类似&#xff0c;但是它到底是什么呢&#xff1f;CAPL全称&#xff08;Communication Access Programming Language&#…...

编程日记 2023/5/28 22:53:20

20230304英语学习

What Would Happen if the Moon Disappeared Tomorrow? 如果明天月球消失了会怎样&#xff1f; The closest object to our planet, the Moon, may seem like Earth’s little sibling.Since its birth, the satellite has mostly just hung around, playing gravitational t…...

编程日记 2023/5/28 22:53:17

【基础算法】单链表的OJ练习(3) # 移除链表元素 # 相交链表 #

文章目录前言移除链表元素相交链表写在最后前言 本章的OJ练习也是相对简单的&#xff0c;只要能够理解解题的思路&#xff0c;并且依照这个思路能够快速的写出代码&#xff0c;我相信&#xff0c;你的链表水平已经足够了。 对于OJ练习&#xff08;2&#xff09; : ->传送门…...

编程日记 2023/5/28 22:53:15

【自用】SpringBoot项目通用类整理

文章目录全局Json序列化Controller日志切面全局异常拦截GlobalExceptionHandlerApiResultBusinessExceptionResponseEntityUtil全局返回体包装MP自动填充接口文档配置类自定义Async异步线程池本文主要整理各类项目中通用的配置类、工具类&#xff0c;便于复查自用。 全局Json序…...

编程日记 2023/5/28 22:53:13

动态规划法(总述)多阶段决策最优化问题

动态规划: 研究最优控制问题提出的 该问题有n个输入&#xff0c;问题的解由这n个输入组成&#xff0c;这个子集必须满足事先给定的条件&#xff0c;这些条件称为约束条件&#xff0c;满足约束条件的可行解可能不只有一个为了衡量可行解的优劣&#xff0c;通常以一些函数的形式&…...

编程日记 2023/5/28 22:53:11

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

2023赣州旅游投资集团

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

编程新知 2025/11/8 16:42:13

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29