《娶了手机嫁了寂寞》米灵

焱鑫磊

廖若晨星 发表于 2022-10-27 06:39
欣赏焱鑫磊老友音画歌曲: 《娶了手机嫁了寂寞》早上好

问候老师好！

焱鑫磊

沧海笑 发表于 2022-10-27 07:20
欣赏老师佳作!

问候老师好！

焱鑫磊

会走路的鱼 发表于 2022-10-27 10:39
欣赏焱老师佳作!上午好

问候老师好！

焱鑫磊

蒲公英 发表于 2022-10-27 11:01
欣赏音画佳作!

问候老师好！

焱鑫磊

沪上人 发表于 2022-10-27 21:43
欣赏学习！欣赏分享！

问候老师好！

老谟深虑

     欣赏老师的精美音画，点赞！这个我克隆成功了，可惜发到论坛上，我找不到往左移动的代码。

焱鑫磊

老谟深虑 发表于 2022-10-28 18:14
欣赏老师的精美音画，点赞！这个我克隆成功了，可惜发到论坛上，我找不到往左移动的代码。

MARGIN-TOP: 10px;MARGIN-LEFT:-212px;  （TOP：正数加大向下，负数加大向上；LEFT正数加大向右，负数加大向左）

老梦缘

欣赏老师的精彩分享，问好老师！

焱鑫磊

老梦缘 发表于 2022-10-28 21:03
欣赏老师的精彩分享，问好老师！

问候老师好！

老谟深虑

焱鑫磊 发表于 2022-10-28 18:36
MARGIN-TOP: 10px;MARGIN-LEFT:-212px;  （TOP：正数加大向下，负数加大向上；LEFT正数加大向右，负数加 ...

     谢谢老师的指导，我是用“框架源代码”制作的，那上面找不到MARGIN-LEFT:-212px。不知道改那个能行？
    <style>
#papa { margin: 30px; width: 1024px; height: 600px; background: #000000 url('https://') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; position: relative;z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: end start; }
.pMid { grid-area: mid; place-items: end center;bottom: 180px; }
.pFoot { grid-area: foot; place-items: center;bottom: 40px; }
#mplayer { position: absolute; width: 400px; height: 60px; font: normal 14px sans-serif; z-index: 9; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: -80px; bottom: 0px; width: 60px; height: 60px; border-radius: 0%;background: url('http://pan.yinhuabbs.cn/view.php/2da9f8fb707ddc142381963a5d71f8ca.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 4s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}
#prog { --posX: 0px; position: absolute; bottom: 20px; width: 100%; height: 1px; background: #eee; cursor: pointer; z-index: 2;}
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 5px); width: 3px; height: 10px; background: silver; z-index: 2;}
#tit { position: absolute; bottom: 20px; right: 30px;font: bold 3em sans-serif;  text-shadow: 2px 2px 3px #212121; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute;right: 250px; transform:perspective(300px)rotateY(40deg);font:bold 40px/1.8 georgia,sans-serif;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.5));
         color:#800000 ; -webkit-background-clip: text; filter: drop-shadow(0px 0px 10px #FFF000)drop-shadow(0px 0px 10px #FF0000)drop-shadow(0px 0px 10px #00FFFF); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: linear-gradient(23deg, #FA0000 0%,#73FF00 100%); filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px  0)hue-rotate(0deg)contrast(120%)brightness(200%); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot {
50% { transform: rotateX(0deg) rotateY(180deg) rotate(0deg)scale(1);filter: hue-rotate(360deg)}  }


#mpic {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rote 80s linear infinite;
        cursor: pointer;
        opacity: 1;
}


@keyframes rote {
        from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }


        to {
                background-position: -1600px 300px;
        }
}


#mpic1 {
        position: absolute;
        transform: rotateY(0deg);
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 600px;
        animation: rotet 100s linear infinite;
        cursor: pointer;
        opacity: 1;
}


@keyframes rotet {
        from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }


        to {
                background-position: 0px -1600px;
        }
}
#items
{position: absolute;
        width: 100%;
        height: 100%;
top: 0px;
        left: 0px;opacity: 1;
animation: slider 0.1s linear infinite;
}


@keyframes slider
{
        from
        {
                opacity: 1;
                filter: hue-rotate(360deg)contrast(120%)brightness(100%);
        }


        to
        {
                opacity: 1;
                filter: hue-rotate(0deg)contrast(140%)brightness(100%);
        }
}


</style>


<div id="papa">


        <div  id="items"><div class="pTop"  style="mix-blend-mode: multiply;background:  url('https://pic1.imgdb.cn/item/63579e0616f2c2beb180dc34.jpg') no-repeat center/cover;width: 1024px; height: 600px;" /></div></div>
<img  id="mpic"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/50% 70%" >
<img  id="mpic1"style="width: 100%; height: 100%;background: url('http://pan.yinhuabbs.cn/view.php/f87d2b5dfe272eb91ddc45e6e9436478.png')0 0/30% 40%" >
        <div class="pMid"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
       <div class="pFoot">
                <div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
        </div>
</div>


<script>
(function() {
        let mKey = 0, mFlag = true, aud = new Audio();
        aud.src = 'https://link.hhtjim.com/kw/36875883.mp3';
        aud.autoplay = true;
        aud.loop = true;
let lrcAr = [
        [0.00,"寂寞黄昏 - 王紫菲",11.9],
        [11.88,"词：赵真",11.9],
        [23.76,"曲：赵真",11.9],
        [35.64,"走在了夕阳映照的黄昏",8.5],
        [44.13,"沙滩留下孤单脚印",6.1],
        [50.19,"晚风拂我面如丝丝细吻",5.4],
        [55.56,"想起远方我最爱的人",6.0],
        [61.53,"思念的愁绪敲打我心门",5.5],
        [66.99,"年年不忘有你的黄昏",6.1],
        [73.08,"等你的诺言等你温存",4.7],
        [77.73,"盼望有你返航的渡轮",6.7],
        [84.45,"这是一个寂寞的黄昏",5.4],
        [89.88,"浪花安稳我寂寞的心",6.1],
        [95.94,"也是一个想你的黄昏",5.2],
        [101.13,"夕阳目送夜归人",6.2],
        [107.28,"这是一个寂寞的黄昏",5.4],
        [112.68,"浪花陪伴我寂寞的心",6.1],
        [118.80,"愿撑一叶轻轻小舟",5.3],
        [124.11,"不等那海风停",5.8],
        [129.90,"孤单起航把你寻",31.7],
        [161.58,"思念的愁绪敲打我心门",5.4],
        [166.98,"年年不忘有你的黄昏",6.1],
        [173.07,"等你的诺言等你温存",4.7],
        [177.72,"盼望有你返航的渡轮",6.7],
        [184.44,"这是一个寂寞的黄昏",5.4],
        [189.87,"浪花安稳我寂寞的心",6.0],
        [195.90,"也是一个想你的黄昏",5.2],
        [201.12,"夕阳目送夜归人",6.2],
        [207.27,"这是一个寂寞的黄昏",5.5],
        [212.76,"浪花陪伴我寂寞的心",6.0],
        [218.79,"愿撑一叶轻轻小舟",5.3],
        [224.10,"不等那海风停",5.8],
        [229.89,"孤单起航把你寻",6.1],
        [235.95,"这是一个寂寞的黄昏",5.4],
        [241.32,"浪花安稳我寂寞的心",6.0],
        [247.35,"也是一个想你的黄昏",5.2],
        [252.54,"夕阳目送夜归人",6.2],
        [258.72,"这是一个寂寞的黄昏",5.5],
        [264.18,"浪花陪伴我寂寞的心",6.1],
        [270.24,"愿撑一叶轻轻小舟",5.3],
        [275.55,"不等那海风停",5.8],
        [281.34,"孤单起航把你寻",5.7],
        [287.07,"孤单起航把你寻",6]
];
mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');


items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => items.style.animationPlayState = 'running');
aud.addEventListener('pause', () => items.style.animationPlayState = 'paused');




mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');
        if (aud.paused) btnplay.style.animationPlayState = 'paused';
        btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
        mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
        mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
        let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
        let toMin = (val) => { if (!val) return '00:00'; val = Math.floor(val); let min = parseInt(val / 60), sec = parseFloat(val % 60); if (min < 10) min = '0' + min; if (sec < 10) sec = '0' + sec; return min + ':' + sec; };
        papa.oncontextmenu = () => false;
})();
</script>