论坛 › 音乐分享 › 【Control】- John De Sohn / VENIOR 30 秒收藏

池鹤 发表于 2026-8-3 19:41:35

【Control】- John De Sohn / VENIOR 30 秒收藏

本帖最后由 池鹤 于 2026-8-3 19:45 编辑 <br /><br /><!-- DZ论坛音乐卡片｜歌词【按粘贴原始分行展示】版本 -->
<style>
/* ==========【全局可调参数区｜全部配置在这里修改】========== */
.music-card-wrap{
    /* 主卡片背景颜色 */
    --card-bg: #19191f;
    /* 主标题文字颜色（歌曲名） */
    --text-color: #f0f0f0;
    /* 次要文字颜色（歌手名） */
    --text-sub-color: #aaaaaa;
    /* 卡片边框颜色 */
    --border-color: #333338;
    /* 卡片圆角 */
    --card-radius: 30px;

    /* 卡片整体尺寸 */
    --card-width: 500px;
    --cover-size: 350px;
    --vinyl-border-width: 30px;
    --vinyl-opacity: 0.35;

    /* 大图弹窗参数 */
    --img-max-width: 85%;
    --img-max-height: 85vh;
    --img-border-radius: 6px;

    /* 播放器参数 */
    --player-radius: 10px;
    --player-height: 1px;

    /* ======【【歌词区域可调参数】】====== */
    --lyric-width: 94%;         /* 歌词内容宽度 */
    --lyric-height: 120px;         /* 歌词可视区域高度 */
    --lyric-text-color: #dddddd;/* 歌词文字颜色 */
    --lyric-fontsize: 13px;      /* 歌词字号 */
    --lyric-lineheight: 24px;   /* 歌词行高 */
    --lyric-speed: 120s;            /* ⭐滚动速度，数值越大越慢 */
    --lyric-margin: 14px auto;    /* 歌词区域上下外边距 */
    --lyric-text-align: center;    /* 对齐方式 center / left */
    /* ======================================== */

    /* 折叠面板 */
    --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: 8s;
    --modal-transition-time: 0.3s;
    --hover-move-time: 0.25s;
    --hover-move-height: -8px;

    --font-family: "Microsoft Yahei",sans-serif;

    width: var(--card-width);
    margin: 15px 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;
}
/* ✅兼容attachimg自动输出的图片标签，保留全部黑胶样式 */
.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: pointer;
    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;
}

/* 封面放大弹窗 */
.img-modal{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:19999;
    opacity:0;
    transition: opacity var(--modal-transition-time) ease;
}
.img-modal.show{
    display:flex;
    opacity:1;
}
.img-modal img{
    max-width:var(--img-max-width);
    max-height:var(--img-max-height);
    border-radius:var(--img-border-radius);
}
</style>

<div class="music-card-wrap">
    <!-- 封面区域【已改为Discuz上传附件图片】 -->
    <div class="vinyl-cover-box">
      <div class="vinyl-ring"></div>

    </div>

    <!-- 播放器iframe -->
    <div class="music-player-box">
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=426291255&auto=1&height=32"></iframe>
    </div>

    <div class="song-name">Control</div>
    <div class="song-author">歌手：John De Sohn / VENIOR</div>

    <!-- =========【歌词区｜直接粘贴歌词，回车自动识别分行！】========= -->
    <div class="lyric-wrap">
      <div class="lyric-scroll">
            <div class="lyric-content">

Miller music

Don't want you sober
不想你如此冷静
I want you mad
你就不能生我气一下
And when it's over
当一切结束的时候
Remember that
别忘了
I want you so bad
我如此渴望你
Here from the start
重新开始
You lit a spark
你的火花
Blew it at my heart
吹进我心扉
Need somebody who can be
我想有个为我
A treater ain't mean to me
永远不欺我
Need someone to make me feel
我想有个人让我觉得
Something I can't control
自己不受控制
Need somebody who can be
我想有个为我
A treater ain't mean to me
永远只为我唯一
Need someone to make me feel
让我感觉
Something I can't control
情非得已
Oh, something I can't control
我没办法控制自己
I can't control
我控制不了
Oh, something I can't control
总有些事情我控制不了
I can't control
我控制不了
Something I can't control, oh
那些控制不了的事
Oh, something I can't control
我没办法控制自己
I can't control
我控制不了
Something I can't control
有些事我没办法控制自己
Don't say you're sorry
别说你对不起
No need for that
我不需要
Don't wanna hear ya, apologize
不想听你说抱歉
I like the way that
我喜欢你
You're standing there
就站在这
Like you don't care
说你不在乎
No don't you dare
说你不害怕
Need somebody who can be
想要一个
A treater Ain't mean to me
欺骗世界却不欺骗我的人
Need someone to make me feel
让我感觉
Something I can't control
情非得已
Need somebody who can be
找到的那个人
A treater ain't mean to me
永不弃我
Need someone to make me feel
让我感觉
Something I can't control
情非得已
Oh, Something I can't control
有些事我控制不了
I can't control
我控制不了
Oh, Something I can't control
有些情我不能控制自己
I can't control
我控制不了
Something I can't control, oh
那些事我控制不了
Something I can't control, oh
那些事我控制不了
Something I can't control
那些事我控制不了
I can't control
我控制不了
Something I can't control
那些事我控制不了
Who am I to obey
当我顺从
Want you to not behave
你别得意
Throw a punch at me oh babe
浇我冷水
Go stand in my way
我只会我行我素
Just like a falling dream
就像正在破碎的梦
Falling right at me
在我面前崩塌
Need somebody who can be
需要那个
A treater ain't mean to me
欺骗世界却不欺我的人
Need someone to make me feel
想要觉得
Something I can't control
情感不受控制
Need somebody who can be
需要那个
A treater ain't mean to me
欺骗世界却不欺我的人
Need someone to make me feel
想要觉得
Something I can't control
情非得已
Oh, something I can't control
情非得已
Oh, something I can't control
控制不了
I can't control
我控制不了
Something I can't control, oh
情非得已
            </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>

<!-- 图片放大弹窗 -->
<div class="img-modal">
    <img id="modalImg">
</div>

<script>
document.addEventListener('DOMContentLoaded',function(){
    const coverImg = document.querySelector('.vinyl-cover-box img');
    const modal = document.querySelector('.img-modal');
    const modalImg = document.getElementById('modalImg');
    const foldTitle = document.querySelector('.fold-title');
    const foldContent = document.querySelector('.fold-content');
    const arrow = foldTitle.querySelector('.arrow');

    // 默认开启旋转
    coverImg.classList.add('rotate-active');

    // 点击封面弹出大图
    coverImg.addEventListener('click',function(){
      modalImg.src = this.src;
      modal.classList.add('show');
    });
    // 双击启停黑胶旋转
    coverImg.addEventListener('dblclick',function(e){
      e.preventDefault();
      this.classList.toggle('rotate-active');
    });
    // 点击遮罩关闭图片
    modal.addEventListener('click',function(){
      modal.classList.remove('show');
    });
    // 折叠切换
    foldTitle.addEventListener('click',function(){
      foldContent.classList.toggle('open');
      arrow.style.transform = foldContent.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
    });
});
</script>

潮二犬 发表于 2026-8-3 19:44:29

一直找这首歌，终于等到

伤心结疤 发表于 2026-8-3 19:56:05

收获好听音乐，再次感谢楼主

June欣 发表于 2026-8-3 20:08:18

曲风很棒，感谢楼主分享！

Mmmmmmm. 发表于 2026-8-3 20:17:33

亲爱的 谁是你今夜的猎物

三口一个月亮 发表于 2026-8-3 20:33:53

第一次听，直接爱上，谢谢

Ken 发表于 2026-8-3 20:47:45

静下心聆听，很治愈，谢谢

苘叟 发表于 2026-8-3 20:52:16

收藏慢慢听，谢谢楼主

荒山居野 发表于 2026-8-3 20:56:51

舒服节奏，秒控我三分钟

朱小懒 发表于 2026-8-3 21:01:47

感谢分享，歌单音乐+1

查看完整版本: 【Control】- John De Sohn / VENIOR 30 秒收藏