音乐播放卡片 | 重写样式
编辑
140
2024-03-03
⭐️ 原生 Audio 样式简直丑到爆!重写!
> 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放卡片</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abcdefg..." crossorigin="anonymous">
<style>
/* 样式开始 */
.card {
background-color: #282828; /* 卡片背景色 */
border-radius: 10px; /* 边框圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
overflow: hidden;
width: 200px; /* 卡片宽度 */
height: 200px; /* 卡片高度 */
margin: 20px auto; /* 外边距,使卡片居中 */
position: relative;
}
.album-cover img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片填充方式 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%; /* 覆盖层高度 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* 渐变遮罩层 */
z-index: 1; /* 叠放顺序 */
pointer-events: none; /* 不接受鼠标事件 */
}
.controls {
position: absolute;
bottom: 3px; /* 按钮距底部距离 */
right: 10px; /* 按钮距右侧距离 */
z-index: 2; /* 叠放顺序 */
}
button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 20px;
color: #fff;
transition: color 0.3s ease;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
button:hover {
color: #ff4a4a;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.song-details {
position: absolute;
bottom: 13px; /* 文本距底部距离 */
left: -20px; /* 文本距左侧距离 */
right: 60px; /* 文本距右侧距离 */
text-align: center;
color: #fff; /* 文本颜色 */
/* 添加文本阴影效果 */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.song-details p {
width: 200px;
margin: 0; /* 段落标签的边距 */
}
/* 样式结束 */
</style>
</head>
<body>
<div class="card">
<div class="album-cover">
<img src=" 图片地址 " alt="Album Cover">
</div>
<div class="overlay"></div>
<div class="controls">
<!-- 使用 Font Awesome 的播放图标 -->
<button id="playPauseButton" class="fas fa-play"></button>
</div>
<div class="song-details">
<p> 标题信息填写 </p>
</div>
</div>
<script>
// JavaScript代码开始
let audio = new Audio(' 导入链接 ');
let isPlaying = false;
const playPauseButton = document.getElementById('playPauseButton');
playPauseButton.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
playPauseButton.classList.remove('fa-pause');
playPauseButton.classList.add('fa-play');
} else {
audio.play();
playPauseButton.classList.remove('fa-play');
playPauseButton.classList.add('fa-pause');
}
isPlaying = !isPlaying; // 更新播放状态
});
audio.addEventListener('ended', () => {
isPlaying = false;
playPauseButton.classList.remove('fa-pause');
playPauseButton.classList.add('fa-play');
});
// JavaScript代码结束
</script>
</body>
</html>
> 样式
无寄 By:無.Flac
> 提示
网易云音乐外链:https://music.163.com/song/media/outer/url?id=xxxxxx.mp3
- 6
-
分享