小辣椒 发表于 2024-11-20 23:34

只谈风生不谈情


<style>
#mama { margin: 130px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jpg') no-repeat center/ 200px 200px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: '学习时间机器效果'; background: #eee;top: 150px;border-radius: 0 12px 12px 0; left: 0; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; top: calc(53% - 100px); width: 150px; height: 150px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 1%, red); pointer-events: none; }
#prog { position: absolute; bottom: 230px; width: 200px; left: 42.5%; height: 4px; 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: red; }

#plane1{position: absolute;left: 0px;top: 0;width: 32px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T1200 10");animation: move 8s linear infinite;}
   #plane2 {position: absolute;left: 10px;top: 0;width: 32px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 8s linear infinite;}
   #dt1{ position: absolute; width: 32px; height: 32px; top: 45px; left: 690px; }
   #dt2{ position: absolute; width: 32px; height: 32px; top: 550px; left: 710px; z-index: 1;}
   #dt3{ position: absolute; width: 75px; height: 125px; top: 450px; left: 1010px; z-index: 1;}
   #dt4{ position: absolute; width: 75px; height: 125px; top: 450px; left: 110px; z-index: 1;}
   #dt5{ position: absolute; width: 600px; height: 100px; top: 580px; left: 300px; z-index: 1;}

      @keyframes move { to { offset-distance: 100%;} }
      @keyframes rot { to { transform: rotate(-360deg); } }
</style>

<div id="mama">
<img id="plane1" alt="" src="https://365.tf/disk/tf/1667322044.jpg" />
<img id="plane2" alt="" src="https://365.tf/disk/tf/1667322044.jpg" />   
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt=""/>
<img id="dt1" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt2" src="https://365.tf/disk/tf/1667322044.jpg" alt="" />
   <img id="dt3" src="https://file.uhsea.com/2411/0268010966f043fef90c222b1f1a759208.gif" alt="" />
   <img id="dt4" src="https://file.uhsea.com/2411/0268010966f043fef90c222b1f1a759208.gif" alt="" />
   <img id="dt5" src="https://file.uhsea.com/2411/deddbb511ece1c9800db029511b1d830DF.png" alt="" />

        <audio id="aud" src="https://file.uhsea.com/2410/79064c879b5a5f31ad0bb892aa6577143H.m4a"></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e51180a3f5a8bb36831a87d9ae331269_preview.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?v=01';

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 = 75, r = 70, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M75 75';
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)} Q75 75,${x2.toFixed(2)} ${y2.toFixed(2)} L75 75`;
}
dr.marker('m1', 2.5, 2.5, 1.25, 1.25);
dr.circle(1.25,1.25,1.25,'red').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-20 23:36

视频背景，你们手机帮忙看看播放器有没有出来

liumang 发表于 2024-11-20 23:38

这么就只谈风生不谈情{:6_181:}

liumang 发表于 2024-11-20 23:40

我手机可以看见{:5_158:}

liumang 发表于 2024-11-20 23:40

二个小美人儿漂亮

小辣椒 发表于 2024-11-20 23:41

liumang 发表于 2024-11-20 23:40
二个小美人儿漂亮

哦，可以看见啊，那就好，我可以去发那边了

liumang 发表于 2024-11-20 23:42

小辣椒 发表于 2024-11-20 23:41
哦，可以看见啊，那就好，我可以去发那边了

你发了我在过去看看

小辣椒 发表于 2024-11-20 23:52

liumang 发表于 2024-11-20 23:42
你发了我在过去看看

你现在去看看

liumang 发表于 2024-11-20 23:54

小辣椒 发表于 2024-11-20 23:52
你现在去看看

看了，完好无损{:5_150:}

小辣椒 发表于 2024-11-20 23:54

liumang 发表于 2024-11-20 23:54
看了，完好无损

谢谢，我准备下了，晚安
页: [1] 2
查看完整版本: 只谈风生不谈情