冬天的雨 发表于 2024-11-10 12:36

倔强的骨头 (Live合唱版) -- 小梁的

<style>
        #mydiv { margin: 130px 0 30px calc(50% - 801px); width: 1440px; height: 778px; background: url('https://i.mp3.wf/219960532.jpg ') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover polyline { transition: 1s; fill: darkred; stroke: hotpink; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 75%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; background: Cornislk; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://i.mp3.wf/219960843.mp3 " autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/11/10/15/34/31/video5faa42876fc28.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
var tt = 15;
for(var i = 0; i < tt; i ++) {
        dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', 'darkred', 'darkred', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}
msvg.onclick = () => {
        msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
        aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

冬天的雨 发表于 2024-11-10 12:38

@马黑黑

马老师完成一个三辆马车的播放器效果，视频上有字，没有办法，加大了渐变效果，鸟现在出来只有2头了{:4_170:}

冬天的雨 发表于 2024-11-10 12:39

昨天太迟了，今天完成一个，这个休息天还空，有时候也是没有休息的，{:4_189:}

冬天的雨 发表于 2024-11-10 12:42

其实这个帖是想送我父母的，我也是把链接发他们看了，很敬佩我的父母，特别我的老妈 ，大气，稳重，办事从来就不急不躁。。。。。{:4_179:}

冬天的雨 发表于 2024-11-10 12:44

有点事只能先下了

冬天的雨 发表于 2024-11-10 12:48

马老师我答应的三个帖完成了{:4_205:}

红影 发表于 2024-11-10 13:48

冬小雨一下做了这么多，厉害。
这歌还是头一次听呢，对父母的歌颂，很令人感动的歌曲{:4_187:}

红影 发表于 2024-11-10 13:50

冬天的雨 发表于 2024-11-10 12:38
@马黑黑

马老师完成一个三辆马车的播放器效果，视频上有字，没有办法，加大了渐变效果，鸟现在出来只有 ...
冬小雨可以把透明和有色的位置换换啊，这个不是中间有字，是旁边有字{:4_173:}
不过雁少点也挺好看的呢。

红影 发表于 2024-11-10 13:50

这背景图的制作和歌曲很相符，给冬小雨点赞{:4_199:}

梦江南 发表于 2024-11-10 14:13

老师真是个孝顺儿子啊！为老师点赞！{:4_199:}

梦油 发表于 2024-11-10 14:38

看着这一对老夫妻真幸福。

起个网名好难 发表于 2024-11-10 15:34

冬天的雨 发表于 2024-11-10 12:38
@马黑黑

马老师完成一个三辆马车的播放器效果，视频上有字，没有办法，加大了渐变效果，鸟现在出来只有 ...

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

马黑黑 发表于 2024-11-10 16:13

红影 发表于 2024-11-10 13:50
冬小雨可以把透明和有色的位置换换啊，这个不是中间有字，是旁边有字
不过雁少点也挺好看的呢 ...

若隐若现效果也不错

朵拉 发表于 2024-11-10 18:42

问好冬雨老师，还有这歌，欣赏下哈{:4_190:}

红影 发表于 2024-11-10 21:08

马黑黑 发表于 2024-11-10 16:13
若隐若现效果也不错

是啊，这个效果也挺奇妙的呢{:4_187:}

马黑黑 发表于 2024-11-10 21:55

红影 发表于 2024-11-10 21:08
是啊，这个效果也挺奇妙的呢

是的

红影 发表于 2024-11-10 23:16

马黑黑 发表于 2024-11-10 21:55
是的

很多时候一些无意的设计，会得到意想不到的效果呢{:4_187:}

马黑黑 发表于 2024-11-10 23:17

红影 发表于 2024-11-10 23:16
很多时候一些无意的设计，会得到意想不到的效果呢

这个自然

红影 发表于 2024-11-10 23:28

马黑黑 发表于 2024-11-10 23:17
这个自然

错有错着，也很不错{:4_173:}

冬天的雨 发表于 2024-11-12 18:46

红影 发表于 2024-11-10 13:48
冬小雨一下做了这么多，厉害。
这歌还是头一次听呢，对父母的歌颂，很令人感动的歌曲

很喜欢这首歌的{:4_208:}
页: [1] 2
查看完整版本: 倔强的骨头 (Live合唱版) -- 小梁的