朵拉 发表于 2024-11-21 11:06

无情画（学习马黑黑时间机器效果）

<style>
#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jp') no-repeat center/ 400px 400px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: 'Time Machine'; background: #eee; border-radius: 0 12px 12px 0; left: 0; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; top: calc(50% - 155px); width: 300px; height: 300px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#prog { position: absolute; bottom: 150px; width: 300px; height: 2px; background: #eee; display: grid; place-items: center; cursor: pointer; --prog: 0%; }
#prog::before { position: absolute; content: attr(data-tt); left: -50px; right: -50px; text-align:justify; text-align-last: justify; font-size: 14px; color: white; }
#prog::after { position: absolute; content: ''; left: calc(var(--prog) - 6px); width: 12px; height: 12px; border-radius: 50%; background: yellow; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2077549055"></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/05/24/17/38/51/video646ddb2b96d05.mp4" autoplay loop muted></video>
        <svg id="msvg"></svg>
        <div id="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--run' };

var audio = new Aud(mDatas);
audio.play();

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
        var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
                y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
        pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'yellow').addTo('m1');
dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {
        attributeName: 'stroke-dashoffset',
        to: 300,
        dur: '4s',
        repeatCount: 'indefinite'
});
</script>

朵拉 发表于 2024-11-21 11:07

@马黑黑
老师好，学生交作业，纯依葫芦画瓢哈~~{:4_190:}

梦江南 发表于 2024-11-21 11:38

问好朵拉老师，欣赏点赞！{:4_199:}

红影 发表于 2024-11-21 15:02

没看懂，视频和效果都是黑黑的，朵宝是重新发一遍？{:4_204:}

冬天的雨 发表于 2024-11-21 16:31

欣赏朵拉的美美作业{:4_187:}

朵拉 发表于 2024-11-21 17:22

红影 发表于 2024-11-21 15:02
没看懂，视频和效果都是黑黑的，朵宝是重新发一遍？

问好影宝，去了底图，换了音乐，就这样哈~~

朵拉 发表于 2024-11-21 17:23

冬天的雨 发表于 2024-11-21 16:31
欣赏朵拉的美美作业

冬雨版 好久不见，问好 祝冬安{:4_190:}

朵拉 发表于 2024-11-21 17:28

梦江南 发表于 2024-11-21 11:38
问好朵拉老师，欣赏点赞！

梦江南老师的制作精彩，向您学习{:4_204:}

梦江南 发表于 2024-11-21 17:38

朵拉 发表于 2024-11-21 17:28
梦江南老师的制作精彩，向您学习

朵拉老师客气了，我们互相学习。{:4_187:}

红影 发表于 2024-11-21 23:05

朵拉 发表于 2024-11-21 17:22
问好影宝，去了底图，换了音乐，就这样哈~~

嗯嗯，知道了{:4_204:}
页: [1]
查看完整版本: 无情画（学习马黑黑时间机器效果）