【Trip Around The World】- Alexz Johnson
<!-- DZ音乐卡片｜屏蔽附件悬浮弹窗+点击放大弹窗｜黑胶旋转 -->
<style>
/* ==========【全局可调参数区｜全部配置在这里修改】========== */
.music-card-wrap{
--card-bg: #19191f;
--text-color: #f0f0f0;
--text-sub-color: #aaaaaa;
--border-color: #333338;
--card-radius: 30px;
--card-margin-top: 60px;
--card-margin-bottom: 60px;
--card-width: 500px;
--cover-size: 350px;
--vinyl-border-width: 30px;
--vinyl-opacity: 0.35;
--player-radius: 10px;
--player-height: 1px;
--lyric-width: 94%;
--lyric-height: 120px;
--lyric-text-color: #dddddd;
--lyric-fontsize: 13px;
--lyric-lineheight: 24px;
--lyric-speed: 70s;
--lyric-margin: 14px auto;
--lyric-text-align: center;
--fold-title-fontsize: 14px;
--fold-content-fontsize: 14px;
--fold-bg: #26262c;
--fold-border-color: #444448;
--fold-title-color: #eeeeee;
--fold-content-color: #cccccc;
--rotate-duration: 20s;
--hover-move-time: 0.25s;
--hover-move-height: -8px;
--font-family: "Microsoft Yahei",sans-serif;
width: var(--card-width);
margin: var(--card-margin-top) auto var(--card-margin-bottom) auto;
background: var(--card-bg);
border-radius: var(--card-radius);
padding: 20px;
color: var(--text-color);
font-family: var(--font-family);
border: 1px solid var(--border-color);
box-shadow: 0 4px 18px rgba(0,0,0,0.35);
box-sizing: border-box;
transition: transform var(--hover-move-time) ease, box-shadow var(--hover-move-time) ease;
}
.music-card-wrap:hover{
transform: translateY(var(--hover-move-height));
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.vinyl-cover-box{
width: var(--cover-size);
height: var(--cover-size);
margin: 0 auto 16px auto;
position: relative;
}
.vinyl-ring{
width: 100%;
height: 100%;
border-radius: 50%;
background: #000;
opacity: var(--vinyl-opacity);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* 1.拦截DZ自动生成的zoom放大链接，禁止点击弹窗 */
.vinyl-cover-box a.zoom{
pointer-events: none !important;
text-decoration: none !important;
display: block !important;
}
/* 2.屏蔽附件hover弹出的「下载附件/保存相册」悬浮提示框 */
.vinyl-cover-box .attachinfo,
.vinyl-cover-box .tip,
.vinyl-cover-box .attachment_pop,
.vinyl-cover-box {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.vinyl-cover-box img{
width: calc(100% - var(--vinyl-border-width)*2);
height: calc(100% - var(--vinyl-border-width)*2);
border-radius: 50%;
object-fit: cover;
position: absolute;
top: var(--vinyl-border-width);
left: var(--vinyl-border-width);
z-index: 2;
cursor: default;
display:block;
}
@keyframes rotateDisc {
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.rotate-active{
animation: rotateDisc var(--rotate-duration) linear infinite;
}
.music-player-box{
width: 100%;
height: var(--player-height);
margin-bottom: 1px;
border-radius: var(--player-radius);
overflow: hidden;
background: transparent !important;
}
.music-player-box iframe{
width: 100%;
height: 100%;
border: 0;
margin:0;
padding:0;
display:block;
}
.song-name{
font-size: 16px;
font-weight: bold;
text-align: center;
margin:6px 0;
color: var(--text-color);
}
.song-author{
font-size:14px;
color: var(--text-sub-color);
text-align: center;
margin-bottom:16px;
}
.lyric-wrap{
position: relative;
height: var(--lyric-height);
overflow: hidden;
margin: var(--lyric-margin);
}
.lyric-wrap::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
background:linear-gradient(to bottom, var(--card-bg) 0%, transparent 20%, transparent 80%, var(--card-bg) 100%);
}
.lyric-scroll{
width: var(--lyric-width);
margin:0 auto;
}
.lyric-content{
width:100%;
font-size: var(--lyric-fontsize);
color: var(--lyric-text-color);
line-height: var(--lyric-lineheight);
text-align: var(--lyric-text-align);
white-space: pre-line !important;
animation: scrollLyricVertical var(--lyric-speed) linear infinite;
}
@keyframes scrollLyricVertical{
from{transform: translateY(0);}
to{transform: translateY(-50%);}
}
.fold-panel{
border: 1px solid var(--fold-border-color);
border-radius: 12px;
overflow: hidden;
background:var(--fold-bg);
}
.fold-title{
padding:18px 22px;
cursor: pointer;
font-size: var(--fold-title-fontsize);
display:flex;
justify-content: space-between;
align-items:center;
user-select:none;
color:var(--fold-title-color);
}
.fold-title .arrow{
font-size: var(--fold-title-fontsize);
transition: transform 0.25s ease;
}
.fold-content{
padding:0 22px;
font-size: var(--fold-content-fontsize);
line-height:1.6;
max-height:0;
overflow:hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
color:var(--fold-content-color);
}
.fold-content.open{
max-height:600px;
padding:0 22px 18px 22px;
}
</style>
<div class="music-card-wrap">
<div class="vinyl-cover-box">
<div class="vinyl-ring"></div>
<!-- =========替换引号内为图片真实直链========= -->
</div>
<div class="music-player-box">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=1 src="//music.163.com/outchain/player?type=2&id=2180111&auto=1&height=66"></iframe>
</div>
<div class="song-name">Trip Around The World</div>
<div class="song-author">歌手：Alexz Johnson</div>
<div class="lyric-wrap">
<div class="lyric-scroll">
<div class="lyric-content">
Miller music
Let's take a Trip Around The World today
让我们今天来一趟环游世界
In the back seat rolling down shady lane
在后座顺着林荫道
Let's take a Trip Around The World today
让我们今天环游世界吧
The money, the money is getting in the way
钱，钱是在路上
Anyway you look at it it's looking at your face
不管怎样，你看着它，看着你的脸
Standing in line on a windy day
在一个有风的日子里站着
You're pushing it along
你正在推动它
It's pushing you away
它将你推开
I won't regret anything I say
我不会后悔我说的一切
Why do people care what I think anyway
为什么人们关心我的想法
We could forget about the trouble and the pain
我们可以忘记烦恼和痛苦
And leave it in the water let it water down the drain
把它放在水里，把它放在水里
Let's take a Trip Around The World today
让我们今天来一趟环游世界
</div>
</div>
</div>
<div class="fold-panel">
<div class="fold-title">
<span>点击展开查看音乐地址内容</span>
<span class="arrow">▼</span>
</div>
<div class="fold-content">
**** Hidden Message *****
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
const coverImg = document.querySelector('.vinyl-cover-box img');
const foldTitle = document.querySelector('.fold-title');
const foldContent = document.querySelector('.fold-content');
const arrow = foldTitle.querySelector('.arrow');
if(coverImg){
coverImg.classList.add('rotate-active');
}
// 兜底拦截点击放大弹窗
const zoomLink = document.querySelector('.vinyl-cover-box a.zoom');
if(zoomLink){
zoomLink.onclick = function(e){
e.preventDefault();
return false;
}
}
foldTitle.addEventListener('click',function(){
foldContent.classList.toggle('open');
arrow.style.transform = foldContent.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
});
});
</script>
第一次听，直接爱上，谢谢 感谢楼主分享，爱来爱了 整个论坛就爱你的分享，亲亲~ 整个论坛就爱你的分享，亲亲~ 前奏很喜欢，感谢分享~ 前奏很喜欢，感谢分享~ 前奏很喜欢，感谢分享~ 亲爱的 谁是你今夜的猎物 曲风戳我，感谢楼主推荐