HTML&CSS：音乐播放器卡片

前端Hardy2025-04-09 17:49

这个页面通过 CSS 动画和 Flexbox 布局，创建了一个现代化的音乐播放器界面，具有良好的视觉效果和用户交互体验。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!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">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .main {
            background-color: white;
            padding: 1em;
            padding-bottom: 1.1em;
            border-radius: 15px;
            margin: 1em;
        }

        .loader {
            display: flex;
            flex-direction: row;
            height: 4em;
            padding-left: 1em;
            padding-right: 1em;
            transform: rotate(180deg);
            justify-content: right;
            border-radius: 10px;
            transition: .4s ease-in-out;
        }

        .loader:hover {
            cursor: pointer;
            background-color: lightgray;
        }

        .currentplaying {
            display: flex;
            margin: 1em;
        }

        .spotify {
            width: 50px;
            height: 50px;
            margin-right: 0.6em;
        }

        .heading {
            color: black;
            font-size: 1.1em;
            font-weight: bold;
            align-self: center;
        }

        .loading {
            display: flex;
            margin-top: 1em;
            margin-left: 0.3em;
        }

        .load {
            width: 2px;
            height: 33px;
            background-color: limegreen;
            animation: 1s move6 infinite;
            border-radius: 5px;
            margin: 0.1em;
        }

        .load:nth-child(1) {
            animation-delay: 0.2s;
        }

        .load:nth-child(2) {
            animation-delay: 0.4s;
        }

        .load:nth-child(3) {
            animation-delay: 0.6s;
        }

        .play {
            position: relative;
            left: 0.35em;
            height: 1.6em;
            width: 1.6em;
            clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);
            background-color: black;
            transform: rotate(-90deg);
            align-self: center;
            margin-top: 0.7em;
            justify-self: center;
        }

        .albumcover {
            position: relative;
            margin-right: 1em;
            height: 40px;
            width: 40px;
            background-color: rgb(233, 232, 232);
            align-self: center;
            border-radius: 5px;
        }

        .song {
            position: relative;
            transform: rotate(180deg);
            margin-right: 1em;
            color: black;
            align-self: center;
        }

        .artist {
            font-size: 0.6em;
        }

        @keyframes move6 {
            0% {
                height: 0.2em;
            }

            25% {
                height: 0.7em;
            }

            50% {
                height: 1.5em;
            }

            100% {
                height: 0.2em;
            }
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="currentplaying">
            <svg height="50px" width="50px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="spotify">
                <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" r="43.888"
                    cy="572.064" cx="33.34" id="ipdIa4~cOclR8yt_ClW93a">
                    <stop stop-color="#f4e9c3" offset="0"></stop>
                    <stop stop-color="#f8eecd" offset=".219"></stop>
                    <stop stop-color="#fdf4dc" offset=".644"></stop>
                    <stop stop-color="#fff6e1" offset="1"></stop>
                </radialGradient>
                <path
                    d="M51.03,37.34c0.16,0.98,1.08,1.66,2.08,1.66h5.39c2.63,0,4.75,2.28,4.48,4.96	C62.74,46.3,60.64,48,58.29,48H49c-1.22,0-2.18,1.08-1.97,2.34c0.16,0.98,1.08,1.66,2.08,1.66h8.39c1.24,0,2.37,0.5,3.18,1.32	C61.5,54.13,62,55.26,62,56.5c0,2.49-2.01,4.5-4.5,4.5h-49c-1.52,0-2.9-0.62-3.89-1.61C3.62,58.4,3,57.02,3,55.5	C3,52.46,5.46,50,8.5,50H14c1.22,0,2.18-1.08,1.97-2.34C15.81,46.68,14.89,44,13.89,44H5.5c-2.63,0-4.75-2.28-4.48-4.96	C1.26,36.7,3.36,35,5.71,35H8c1.71,0,3.09-1.43,3-3.16C10.91,30.22,9.45,29,7.83,29H4.5c-2.63,0-4.75-2.28-4.48-4.96	C0.26,21.7,2.37,20,4.71,20H20c0.83,0,1.58-0.34,2.12-0.88C22.66,18.58,23,17.83,23,17c0-1.66-1.34-3-3-3h-1.18	c-0.62-0.09-1.43,0-2.32,0h-9c-1.52,0-2.9-0.62-3.89-1.61S2,10.02,2,8.5C2,5.46,4.46,3,7.5,3h49c3.21,0,5.8,2.79,5.47,6.06	C61.68,11.92,60.11,14,57.24,14H52c-2.76,0-5,2.24-5,5c0,1.38,0.56,2.63,1.46,3.54C49.37,23.44,50.62,24,52,24h6.5	c3.21,0,5.8,2.79,5.47,6.06C63.68,32.92,61.11,35,58.24,35H53C51.78,35,50.82,36.08,51.03,37.34z"
                    fill="url(#ipdIa4~cOclR8yt_ClW93a)"></path>
                <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -534)" y2="590.253"
                    y1="530.096" x2="32" x1="32" id="ipdIa4~cOclR8yt_ClW93b">
                    <stop stop-color="#42d778" offset="0"></stop>
                    <stop stop-color="#3dca76" offset=".428"></stop>
                    <stop stop-color="#34b171" offset="1"></stop>
                </linearGradient>
                <path
                    d="M57,32c0,12.837-9.663,23.404-22.115,24.837C33.942,56.942,32.971,57,32,57	c-1.644,0-3.25-0.163-4.808-0.471C15.683,54.298,7,44.163,7,32C7,18.192,18.192,7,32,7S57,18.192,57,32z"
                    fill="url(#ipdIa4~cOclR8yt_ClW93b)"></path>
                <path
                    d="M41.683,44.394c-0.365,0-0.731-0.181-1.096-0.365c-3.471-2.009-7.674-3.105-12.24-3.105	c-2.559,0-5.116,0.364-7.491,0.912c-0.365,0-0.914,0.183-1.096,0.183c-0.914,0-1.461-0.732-1.461-1.462	c0-0.913,0.547-1.463,1.279-1.643c2.923-0.732,5.846-1.096,8.951-1.096c5.116,0,9.866,1.276,13.885,3.655	c0.548,0.364,0.914,0.73,0.914,1.642C43.145,43.847,42.414,44.394,41.683,44.394z M44.241,38.181c-0.547,0-0.912-0.18-1.279-0.364	c-3.835-2.375-9.135-3.839-15.163-3.839c-2.924,0-5.664,0.366-7.674,0.916c-0.549,0.18-0.731,0.18-1.096,0.18	c-1.096,0-1.827-0.912-1.827-1.826c0-1.096,0.549-1.645,1.461-2.009c2.74-0.73,5.481-1.279,9.317-1.279	c6.213,0,12.241,1.463,16.991,4.384c0.73,0.364,1.096,1.096,1.096,1.826C46.069,37.269,45.337,38.181,44.241,38.181z M47.165,30.876	c-0.548,0-0.731-0.182-1.279-0.364c-4.385-2.559-10.961-4.021-17.356-4.021c-3.289,0-6.577,0.366-9.5,1.096	c-0.366,0-0.731,0.182-1.279,0.182c-1.279,0.183-2.193-0.912-2.193-2.192c0-1.279,0.731-2.009,1.644-2.192	c3.471-1.096,7.125-1.462,11.327-1.462c6.943,0,14.25,1.462,19.731,4.567c0.73,0.366,1.278,1.096,1.278,2.193	C49.357,29.961,48.442,30.876,47.165,30.876z"
                    fill="#fff"></path>
            </svg>
            <p class="heading">Currently Playing</p>
        </div>
        <div class="loader">
            <div class="song">
                <p class="name">Time in a Bottle</p>
                <p class="artist">Jim Corce</p>
            </div>
            <div class="albumcover"></div>
            <div class="loading">
                <div class="load"></div>
                <div class="load"></div>
                <div class="load"></div>
                <div class="load"></div>
            </div>
        </div>
        <div class="loader">
            <div class="song">
                <p class="name">My Way</p>
                <p class="artist">Frank Sinatra</p>
            </div>
            <div class="albumcover"></div>
            <div class="play"></div>
        </div>
        <div class="loader">
            <div class="song">
                <p class="name">Lemon Tree</p>
                <p class="artist">Fools Garden</p>
            </div>
            <div class="albumcover"></div>
            <div class="play"></div>
        </div>
    </div>
</body>

</html>

HTML 结构

  • main：是整个页面的主容器，内部包含了一个当前播放的歌曲信息和多个加载动画。
  • currentplaying：显示当前正在播放的歌曲信息，包括一个 SVG 图标和文本。
  • loader：每个元素都包含歌曲名称、艺术家名称、专辑封面和加载条，用于显示歌曲的加载状态。

CSS 样式

  • body 设置为 Flexbox 布局，居中显示内容，设置高度为视口高度。
  • .main 定义了页面的主容器样式，包括背景颜色、内边距和圆角。
  • .loader 定义了加载动画的样式，包括布局、旋转效果和悬停效果。
  • .currentplaying 定义了当前播放歌曲信息的样式，包括布局和内边距。
  • .spotify 定义了 SVG 图标的样式，包括尺寸和背景颜色。
  • .heading 定义了标题的样式，包括颜色、字体大小和加粗效果。
  • .loading 定义了加载条的容器样式，.load 定义了单个加载条的样式，包括尺寸、背景颜色和动画效果。
  • .albumcover 定义了专辑封面的样式，包括尺寸、背景颜色和圆角。
  • .play 定义了播放按钮的样式，包括位置、尺寸和剪裁路径。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
im_AMBER20 分钟前
React 17
前端·javascript·笔记·学习·react.js·前端框架
一雨方知深秋28 分钟前
2.fs模块对计算机硬盘进行读写操作(Promise进行封装)
javascript·node.js·promise·v8·cpython
一晌小贪欢1 小时前
【Html模板】电商运营可视化大屏模板 Excel存储 + 一键导出（已上线-可预览）
前端·数据分析·html·excel·数据看板·电商大屏·大屏看板
街尾杂货店&3 小时前
css - 实现三角形 div 容器，用css画一个三角形（提供示例源码）简单粗暴几行代码搞定！
前端·css
顺凡3 小时前
删一个却少俩：Antd Tag 多节点同时消失的原因
前端·javascript·面试
小白路过3 小时前
CSS transform矩阵变换全面解析
前端·css·矩阵
前端大卫3 小时前
动态监听DOM元素高度变化
前端·javascript
Cxiaomu3 小时前
React Native App 图表绘制完整实现指南
javascript·react native·react.js
qq. 28040339844 小时前
vue介绍
前端·javascript·vue.js
Mr.Jessy4 小时前
Web APIs 学习第五天：日期对象与DOM节点
开发语言·前端·javascript·学习·html
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08jdk21下载、安装（Windows、Linux、macOS）09PyCharm 社区版全平台安装指南10npm使用国内淘宝镜像的方法