学习贴《列车开往春天》
本帖最后由 醉美水芙蓉 于 2024-11-5 20:47 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 720px); width: 1283px; height: 640px; background: url('https://pic.imgdb.cn/item/6728d0b0d29ded1a8ce6a1e7.png') no-repeat center/cover; box-shadow: 4px 4px 8px gray; overflow: hidden; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; transition: .6s; animation: rot 8s linear infinite var(--state); }
#msvg:hover { filter: invert(100%) drop-shadow(0 0 60px white); }
#pic1 { position: absolute; bottom: 130px; left: 562px; width: 280px; height: 280px; transform-origin: 50%100%; opacity: 0.8; animation: ren 1.9s linear infinite alternate var(--state); }
#vid { position: absolute; top: -35%; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#fsbtn { position: absolute; left: 48%; bottom: 20px; color: snow; background: #333333ac; 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://music.163.com/song/media/outer/url?id=2165736345" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp4" autoplay loop muted></video>
<img id="pic1" src="https://pic.imgdb.cn/item/66a794add9c307b7e93230ac.gif" alt="" />
<svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = _dr('msvg');
var total = 12;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i, color = '#' + Math.random().toString(16).substring(2,8) + 'ec';
dr.polygon('0 -80, -10 -60, 0 0, 10 -60', color).transform(`rotate(${deg}) translate(0 -6)`);
}
dr.circle(0, 0, 6, 'yellow');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
fscreen.fs('mydiv', 'fsbtn');
</script> @马黑黑 老师不知道哪里错了，不会控制跳舞的人！ 醉美水芙蓉 发表于 2024-11-4 22:57
@马黑黑 老师不知道哪里错了，不会控制跳舞的人！
舞者是gif图片，它不在被管控之列，只要使用，它原来怎么动就怎么动，知道关闭页面 漂亮，欣赏水芙蓉美女好帖。 马黑黑 发表于 2024-11-4 23:09
舞者是gif图片，它不在被管控之列，只要使用，它原来怎么动就怎么动，知道关闭页面
喔！原来是这样！ 红影 发表于 2024-11-4 23:22
漂亮，欣赏水芙蓉美女好帖。
谢谢红影美女鼓励！ 醉美水芙蓉 发表于 2024-11-4 23:51
喔！原来是这样！
{:4_190:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif
起个网名好难 发表于 2024-11-5 05:48
谢谢老师光临！ 欣赏老师美帖。早上好！{:4_199:} 听了歌曲，仿佛听到了行进的动车声音。 梦江南 发表于 2024-11-5 07:22
欣赏老师美帖。早上好！
谢谢老师支持！ 梦油 发表于 2024-11-5 09:51
听了歌曲，仿佛听到了行进的动车声音。
谢谢梦油老师光临点评！ 醉美水芙蓉 发表于 2024-11-5 11:38
谢谢梦油老师光临点评！
芙蓉朋友别客气。
页:
[1]