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

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

news 2026/3/30 0:54:22

效果

在这里插入图片描述

源码

<!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

实时数据流处理实战：从滑动窗口算法到Docker部署

用 Python 造一个轻量级流处理引擎&#xff0c;顺便把 Git、Docker、CI/CD 全串起来 前言 你是否有过这样的需求&#xff1a;统计过去 5 秒内 API 的请求次数、监控传感器数据的突变、或者对直播间的弹幕进行限流&#xff1f;这些场景都离不开实时数据流处理。而流处理的核心&…...

编程新知 2026/3/30 0:37:44

化学信息学避坑指南：RDKit分子数据解析的7个常见错误与解决方案

RDKit分子数据处理实战&#xff1a;7个高频错误排查与性能优化指南 在药物研发和材料科学领域&#xff0c;RDKit作为化学信息学的瑞士军刀&#xff0c;每天处理着数以百万计的分子结构数据。但当你在凌晨三点调试代码时&#xff0c;一个不起眼的PDB文件编码错误可能让整个分析流…...

编程新知 2026/3/30 0:31:43

想实现SpringCloud的负载均衡，需要实现哪些接口和规范

前几天有个大兄弟问了我一个问题&#xff0c;注册中心要集成SpringCloud&#xff0c;想实现SpringCloud的负载均衡&#xff0c;需要实现哪些接口和规范。既然这个兄弟问到我了&#xff0c;而我又刚好知道&#xff0c;这不得好好写一篇文章来回答这个问题&#xff0c;虽然在后面…...

编程新知 2026/3/30 0:19:34

别只当补全工具用！深度挖掘Tabnine在Python/JS项目中的隐藏技巧

别只当补全工具用&#xff01;深度挖掘Tabnine在Python/JS项目中的隐藏技巧 在Python数据分析或JavaScript前端项目中&#xff0c;你是否遇到过这样的场景&#xff1a;Tabnine的补全建议时而精准得像读懂了你的思维&#xff0c;时而又显得格格不入&#xff1f;这背后其实隐藏着…...

编程新知 2026/3/30 0:05:25

STM32用KEIL调试总进不了main？可能是printf重定向惹的祸（附完整解决方案）

STM32调试卡在SystemInit&#xff1f;深入解析printf重定向与半主机模式陷阱 调试STM32时遇到程序卡在SystemInit函数而无法进入main函数的情况&#xff0c;往往会让开发者陷入长时间的排查困境。这种现象背后可能隐藏着多种原因&#xff0c;但其中最容易被忽视却又频繁出现的&…...

编程新知 2026/3/29 23:55:23

数字电路设计小技巧：从HDLBits例题看SOP与POS的Verilog实现

数字电路设计实战&#xff1a;从真值表到Verilog的SOP与POS高效实现 在数字电路设计中&#xff0c;掌握逻辑表达式的最简化方法是一项基础但至关重要的技能。今天我们就以HDLBits平台上的经典例题ECE241 2013 Q2为例&#xff0c;手把手教你如何从真值表出发&#xff0c;通过卡…...

编程新知 2026/3/29 22:22:43

Mellanox ASAP2技术揭秘：如何通过硬件卸载提升OVS性能？

1. 为什么我们需要硬件卸载OVS&#xff1f; 在虚拟化环境中&#xff0c;Open vSwitch&#xff08;OVS&#xff09;就像是一个交通警察&#xff0c;负责指挥虚拟机之间的网络流量。但问题在于&#xff0c;这个"警察"一直靠软件在CPU上干活。想象一下&#xff0c;早高…...

编程新知 2026/3/29 22:22:43

从数据到洞察：如何利用2024版建筑高度SHP数据，5步完成城市热岛效应初步分析

从数据到洞察&#xff1a;如何利用2024版建筑高度SHP数据&#xff0c;5步完成城市热岛效应初步分析 城市热岛效应是城市化进程中普遍存在的环境问题&#xff0c;表现为城市中心区域温度明显高于周边郊区的现象。这种现象不仅影响居民的生活质量&#xff0c;还会加剧能源消耗和空…...

编程新知 2026/3/29 20:14:05

突破硬件限制的跨显卡AI增强方案：OptiScaler游戏画质优化全解析

突破硬件限制的跨显卡AI增强方案&#xff1a;OptiScaler游戏画质优化全解析 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler OptiSc…...

编程新知 2026/3/29 19:33:40

如何快速掌握Sionna：下一代无线通信仿真的终极指南

如何快速掌握Sionna&#xff1a;下一代无线通信仿真的终极指南 【免费下载链接】sionna Sionna: An Open-Source Library for Next-Generation Physical Layer Research 项目地址: https://gitcode.com/gh_mirrors/si/sionna Sionna是一个基于TensorFlow的开源Python库&…...

编程新知 2026/3/29 17:57:11