论坛 › 欢乐水吧 › 红尘无爱红尘无情

醉美水芙蓉 发表于 2024-2-15 21:31

红尘无爱红尘无情

本帖最后由 醉美水芙蓉 于 2024-2-16 19:05 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 742px); position: relative; width: 1324px; height: 740px; background: lightblue url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/d8945383ec06fd368beb3e2ef4d4858e.mp4.jpg') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 8px ridge lightgreen; overflow: hidden; }
#vid { position: absolute; top: -70px;left: 260px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; transform: scale(-1,1); }
#mplayer { position: absolute; right: 160px; bottom: 100px; width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(3px 3px 8px darkgreen); cursor: pointer; transform: scale(var(--size)) rotate(0); animation: rotating 8s linear infinite var(--state); --size: 1.2; }
#mplayer::before { position: absolute; content: ''; inset: 22px; border-radius: 50%; background: radial-gradient(yellow, transparent); box-shadow: 0 0 2px red, inset 0 0 160px lightblue; }
ye-zi { position: absolute; transform: rotate(60deg); offset-path: path('M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100'); offset-distance: 50%; }
ye-zi::before, ye-zi::after { position: absolute; content: ''; width: 10px; height: 50px; border-radius: 10% 70%; background: linear-gradient(lightgreen, green, lightgreen); transform-origin: 50% 100%; }
ye-zi::after { transform: rotate(45deg); }
@keyframes rotating { to { transform: scale(var(--size)) rotate(-360deg); } }
#dt3{ position: absolute; width:499px; height: 750px; top: 10px; left:-26px; }
</style>

<div id="papa">
<img id="dt3" src="https://pic.imgdb.cn/item/65ce12cf9f345e8d03f9c935.png" alt="" />       
<audio id="aud" src="https://mp3.t57.cn:7087/kwlink_d.php?id=337647018" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/79/5b4a079dd190a.mp4" loop muted></video>
        <div id="mplayer"></div>
</div>
<script>
var all = 12;
Array.from({length: all}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `offset-distance: ${100 * key / all}%;`;
        mplayer.prepend(item);
});

var mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '#mplayer',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(        178,34,34,.65)); color: #fff;',
        });
};
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);

[...new Array(9).keys()].forEach(key => {
    var item = document.createElement('div');
    item.className = 'doll';
    var deg = key % 2 == 0 ? -360 : 360;
    item.style.cssText += `
      width: ${size}px;
      height: ${size}px;
      background-color: transparent;
      --duration: ${Math.random() * 10 + 10}s;
      --delay: ${Math.random() *-2}s;
      --deg: ${deg}deg;
    `;
    mplayer.appendChild(item);
    size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
    aud.paused
      ? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
      : (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}

</script>

红影 发表于 2024-2-15 22:00

漂亮，欣赏水芙蓉美女好帖{:4_199:}

红影 发表于 2024-2-15 22:01

也是留着黑黑的视频呢。那个美女最好是另外贴图，就不会受视频影响了呢{:4_187:}

醉美水芙蓉 发表于 2024-2-15 22:06

红影 发表于 2024-2-15 22:01
也是留着黑黑的视频呢。那个美女最好是另外贴图，就不会受视频影响了呢

嗯！黑黑老师的原创不能丢！

红影 发表于 2024-2-15 22:28

醉美水芙蓉 发表于 2024-2-15 22:06
嗯！黑黑老师的原创不能丢！

是呢，黑黑的很多创作极美呢{:4_204:}

亦是金 发表于 2024-2-15 22:49

欣赏水芙蓉美帖！{:4_187:}

起个网名好难 发表于 2024-2-16 07:04

https://img1.baidu.com/it/u=1755061579,2451021852&fm=253&fmt=auto&app=138&f=GIF

起个网名好难 发表于 2024-2-16 07:06

似乎控制不了启停

醉美水芙蓉 发表于 2024-2-16 08:20

亦是金 发表于 2024-2-15 22:49
欣赏水芙蓉美帖！

问候亦是金老师，谢谢老师光临！

醉美水芙蓉 发表于 2024-2-16 08:21

起个网名好难 发表于 2024-2-16 07:06
似乎控制不了启停

老师说得对，瞎整了一个！

醉美水芙蓉 发表于 2024-2-16 08:22

起个网名好难 发表于 2024-2-16 07:06
似乎控制不了启停

不知道要如何控制，请老师指导！

樵歌 发表于 2024-2-16 09:38

各展风采。欣赏水芙蓉精美音画！{:4_187:}

起个网名好难 发表于 2024-2-16 10:42

本帖最后由 起个网名好难 于 2024-2-16 11:44 编辑 <br /><br />醉美水芙蓉 发表于 2024-2-16 08:22
不知道要如何控制，请老师指导！
把代码里的变量 player 和 mplayer 统一起来，改为player 或 改为 mplayer
<script>
var mplayer = player;
</script>

醉美水芙蓉 发表于 2024-2-16 11:30

樵歌 发表于 2024-2-16 09:38
各展风采。欣赏水芙蓉精美音画！

谢谢樵歌鼓励！

醉美水芙蓉 发表于 2024-2-16 11:31

起个网名好难 发表于 2024-2-16 10:42
把代码里的变量 player 和 mplayer 统一起来，改为player 或 改为 mplayer

谢谢老师指导，我有空试一下！

小辣椒 发表于 2024-2-16 12:39

欣赏水芙蓉的精彩制作，播放器不能停止，昨天这个我做了就是歌词同步不理想，去了的

老谟深虑 发表于 2024-2-16 15:25

          欣赏老师的精美音画，点赞！

三月的阳光 发表于 2024-2-16 16:36

水芙蓉美女制作的好漂亮~~{:4_187:}

醉美水芙蓉 发表于 2024-2-16 18:44

小辣椒 发表于 2024-2-16 12:39
欣赏水芙蓉的精彩制作，播放器不能停止，昨天这个我做了就是歌词同步不理想，去了的

谢谢小辣椒光临！

醉美水芙蓉 发表于 2024-2-16 18:44

老谟深虑 发表于 2024-2-16 15:25
欣赏老师的精美音画，点赞！

谢谢老师光临！

查看完整版本: 红尘无爱红尘无情