论坛 › 音乐沙龙 › 从心所欲TO梦油

绿叶清舟 发表于 2024-3-8 12:12

从心所欲TO梦油

<style>
    #papa { margin: 0 0 0 calc(50% - 633px); width: 1100px; height: 700px; background:url('https://pic.imgdb.cn/item/65ea86f59f345e8d0315caa0.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; transition: filter 1s; position: relative; z-index: 1; }
    #papa:hover { filter: brightness(1.2); }
    #player { position: absolute; left: 620px; top: 540px; width: 100px; border-radius: 50%; transition: 4s; cursor: pointer; animation: rot .5s infinite alternate var(--state); opacity: .3}
    #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-burn; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }
    @keyframes rot { to { transform: scale(.8); } }
</style>

<div id="papa">
    <img id="player" src="https://638183.freep.cn/638183/web/svg/heart.svg"alt="" />
    <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/93/5ef801a860796.mp4" loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1888658174" autoplay loop></audio>
</div>

<script>
(function() {
    let sF = document.createElement('script');
    sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    sF.charset = 'utf-8';
    document.querySelector('body').appendChild(sF);
    sF.onload = () => FS({papa: '#papa'});
    let getOffsetPos = (ele) => {
      let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
      while(pa != null) {
            x += pa.offsetLeft;
            y += pa.offsetTop;
            pa = pa.offsetParent;
      }
      return {x, y};
    };
    let mState = () => aud.paused
      ? (papa.style.setProperty('--state','paused'), vid.pause())
      : (papa.style.setProperty('--state','running'), vid.play());
    aud.onpause = () => mState();
    aud.onplaying = () => mState();
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
    let movTimer = null,
      paWidth = papa.clientWidth,
      paHeight = papa.clientHeight,
      sonSize = player.clientWidth,
      bodyWidth = document.body.clientWidth,
      bodyHeight = document.body.clientHeight,
      paOffset = {x: getOffsetPos(papa).x, y: getOffsetPos(papa).y};
    document.onmousemove = function(e) {
      clearTimeout(movTimer);
      movTimer = setTimeout(function() {
            if(e.target.id === "player") return;
            if(document.fullscreenElement === null) {
                let x = e.pageX, y = e.pageY;
                if(x < paOffset.x) x = paOffset.x;
                if(y < paOffset.y) y = paOffset.y;
                x = x - paOffset.x;
                y = y - paOffset.y;
                if(x + sonSize >= paWidth) x = paWidth - sonSize;
                if(y + sonSize >= paHeight) y = paHeight - sonSize;
                player.style.cssText += `left: ${x}px; top: ${y}px`;
            } else {
                let xx = e.offsetX || e.layerX, yy = e.offsetY || e.layerY;
                if(xx + sonSize > bodyWidth) xx -= sonSize;
                if(yy + sonSize > bodyHeight) yy -= sonSize;
                player.style.cssText += `left: ${xx}px; top: ${yy}px`;
            }
      }, 400);
    };
})();
</script>

马黑黑 发表于 2024-3-8 13:15

多心{:4_170:}

小辣椒 发表于 2024-3-8 13:38

清舟这个制作漂亮的，大神悠哉悠哉的，这个礼物送梦油非常合适太好了{:4_178:}

小辣椒 发表于 2024-3-8 13:38

梦油收礼开心@梦油

小辣椒 发表于 2024-3-8 13:39

欣赏清舟的精彩制作，佩服清舟，速度一流{:4_199:}

红影 发表于 2024-3-8 15:07

又是个漂亮的画面制作，像是带着纹理的背景，古韵悠悠。
心形按钮很漂亮，背景里还那么多隐形的心形呢。乐曲也特别好，很适合梦油的性格呢。
欣赏清好帖，梦油收礼开心{:4_199:}

小文 发表于 2024-3-8 15:17

油兄好自在，脚心也放心，没有蚊子叮。再来点小酒，就更好了。{:4_191:}

樵歌 发表于 2024-3-8 16:15

果然从心所欲哈，休管尘世纷扰，醉在山水间。这意境也是绝了！当得音画大师也{:4_195:}

梦油 发表于 2024-3-8 16:37

本帖最后由 梦油 于 2024-3-8 16:46 编辑

谢谢清舟朋友。你最懂我。孔子说“七十而从心所欲，不逾矩”。自己已经活过七十岁了，可以随心行事了，只要不去逾越规矩罢了。我坚持顺其自然，不抱怨，不在乎。对物质没有过高的要求，只要有吃有住就行；对过往不执着，不追究，只要过得去就行；对自己感兴趣的事就去做，也不必顾忌别人的看法；对生老病死的轮回，能敢于直面。
清舟朋友送来的美帖正对俺的心思。谢谢你清舟朋友。
                                             https://img.zcool.cn/community/013f415dfadfa7a801216518f7b375.gif

梦油 发表于 2024-3-8 16:46

马黑黑 发表于 2024-3-8 13:15
多心

黑黑先生下午好！谢谢你来助兴。

梦油 发表于 2024-3-8 16:49

本帖最后由 梦油 于 2024-3-8 17:19 编辑

小辣椒 发表于 2024-3-8 13:38
清舟这个制作漂亮的，大神悠哉悠哉的，这个礼物送梦油非常合适太好了
是的，小辣椒朋友。这件礼物正合我心。我认为只有所欲从心，才能真正地体会和享受人生的美好。

梦油 发表于 2024-3-8 16:49

小辣椒 发表于 2024-3-8 13:38
梦油收礼开心@梦油

谢谢小辣椒朋友助兴。

梦油 发表于 2024-3-8 16:51

小辣椒 发表于 2024-3-8 13:39
欣赏清舟的精彩制作，佩服清舟，速度一流

是的，清舟朋友的制作内涵丰富、精益求精。太好了。谢谢清舟朋友。

梦油 发表于 2024-3-8 16:54

红影 发表于 2024-3-8 15:07
又是个漂亮的画面制作，像是带着纹理的背景，古韵悠悠。
心形按钮很漂亮，背景里还那么多隐形的心形呢。乐 ...

是的，影子朋友。你说得极是：“很适合梦油的性格”。也许我的年纪大了，我的生活态度十分从心所欲，总是能够找到生活中的乐趣。谢谢你来助兴。

梦油 发表于 2024-3-8 16:55

小文 发表于 2024-3-8 15:17
油兄好自在，脚心也放心，没有蚊子叮。再来点小酒，就更好了。

谢谢小文朋友。正如我在签名里的信念：随遇而安、顺其自然、与世无争、处之晏然、自娱自乐、安度晚年。

梦油 发表于 2024-3-8 17:00

樵歌 发表于 2024-3-8 16:15
果然从心所欲哈，休管尘世纷扰，醉在山水间。这意境也是绝了！当得音画大师也

樵歌朋友下午好！是的。从心所欲，为吾今生今世之所求。随心而行，随着心的指引去做自己想做的事，现在，我每天在花潮打打油就能收获快乐和幸福。谢谢你前来助兴。

马黑黑 发表于 2024-3-8 17:13

梦油 发表于 2024-3-8 16:46
黑黑先生下午好！谢谢你来助兴。

{:4_191:}

樵歌 发表于 2024-3-8 20:38

梦油 发表于 2024-3-8 17:00
樵歌朋友下午好！是的。从心所欲，为吾今生今世之所求。随心而行，随着心的指引去做自己想做的事，现在， ...

能得让老哥开心，我们也是很欣慰呢{:4_190:}

红影 发表于 2024-3-8 20:41

梦油 发表于 2024-3-8 16:54
是的，影子朋友。你说得极是：“很适合梦油的性格”。也许我的年纪大了，我的生活态度十分从心所欲，总是 ...

所以这个帖子送你真的太合适了啊{:4_187:}

梦油 发表于 2024-3-8 21:02

樵歌 发表于 2024-3-8 20:38
能得让老哥开心，我们也是很欣慰呢

谢谢樵歌朋友。我来到花潮一直得到你们的关注和帮助，我很开心。谢谢你们！

查看完整版本: 从心所欲TO梦油