小辣椒 发表于 2024-10-25 20:30

英雄航天人 （学习套用黑黑 Truck 播放器效果）


<style>
#pa { margin: 140px 0 30px calc(50% - 781px); width: 1402px; height: 811px; background: url('https://wj.zp68.com/lxx/yunhua/2022/10/10/GIF.gif') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.myball { offset-path: path('M0 700 Q500 180, 720 160 T1430 50'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); }
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
@keyframes move { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }

#dt2{ position: absolute; width:32px; height: 32px; top: 120px; left: 300px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 50px; left: 920px; }
#dt4{ position: absolute; width: 200px; height: 104px; top: 110px; left: 150px; }
#dt5{ position: absolute; width: 161px; height: 68px; top: 710px; left: 1110px; }

</style>

<div id="pa">

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2022/10/10/jjj.png " alt="" />
<img id="dt5" src="https://file.uhsea.com/2410/900bcc3244382edce05b3a1bad231ae8C6.png" alt="" />

        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/10/10/htrzg.mp3" autoplay loop></audio>
        <svg id="msvg" width="100%" height="100%"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);

sc.onload = () => {
        var dr = _dr(msvg);
        dr.defs('defs'); //创建defs标签
        //小球
        dr.g('g1').addTo('defs');
        dr.circle(0,0,6,'Khaki').addTo('g1');
        for(i = 0; i < 20; i ++) {
                let delay = -0.5 * i + 's';
                dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
        }
        //渐变
        var stop = `
          <stop offset="0%" stop-color="darkred"/>
          <stop offset="50%" stop-color="Gold"/>
          <stop offset="100" stop-color="red"/>
        `;
        var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};
        dr.gradient('linearGradient', attr, stop);
        //小播 : path 添加到 player
        dr.g('player').addTo('defs');
        for(var i = 0, tt = 10; i < tt; i++) {
                dr.path('M40 40 Q-60 45, 25 5', 'transparent', 'url(#lgd)', 4, 'round').transform(`rotate(${360/tt*i} 40 40)`).addTo('player');
        }
        dr.use('#player', 685, 250); //实例化小播
        aud.onplaying = aud.onpause = () => mState();
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
        mState = () => {
                pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        };
};
</script>

小辣椒 发表于 2024-10-25 20:31

@马黑黑

谢谢黑黑源码分享，小辣椒学习套用玩一个

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

这个漂亮，修改了粒子的路径和小播的大小，和背景效果十分相符。
背景也漂亮，歌颂了航天人的辉煌成就。{:4_199:}

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

欣赏亲爱的好帖{:4_187:}

梦油 发表于 2024-10-25 21:13

小辣椒的这件作品展现了我们伟大祖国的骄傲。{:5_116:}

花飞飞 发表于 2024-10-25 21:32

这个小播也太漂亮了，色彩调得真美。。{:4_208:}

花飞飞 发表于 2024-10-25 21:32

支持小辣椒~~{:4_191:}

马黑黑 发表于 2024-10-25 22:56

小辣椒 发表于 2024-10-25 20:31
@马黑黑

谢谢黑黑源码分享，小辣椒学习套用玩一个

漂亮。路径设计的好

起个网名好难 发表于 2024-10-26 06:19

https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp

非常开心 发表于 2024-10-26 06:42

非常像星链卫星&#128752;&#128752;

愤怒的葡萄 发表于 2024-10-26 08:13

最近几年中国的航天事业硕果累累，交出了漂亮的答卷。

梦江南 发表于 2024-10-26 08:49

太棒了！展示了祖国航天事业的强大！{:4_187:}

梦江南 发表于 2024-10-26 08:50

有气势！

老谟深虑 发表于 2024-10-26 09:35

          制作的精彩，很有气势！

醉美水芙蓉 发表于 2024-10-26 16:47

小辣椒 发表于 2024-10-26 20:54

红影 发表于 2024-10-25 21:08
这个漂亮，修改了粒子的路径和小播的大小，和背景效果十分相符。
背景也漂亮，歌颂了航天人的辉煌成就。{: ...

亲爱的，套用黑黑代码玩一个

小辣椒 发表于 2024-10-26 20:56

红影 发表于 2024-10-25 21:08
欣赏亲爱的好帖

也是旧图图速度做一个，后面旧图图没有了就麻烦了

小辣椒 发表于 2024-10-26 20:56

梦油 发表于 2024-10-25 21:13
小辣椒的这件作品展现了我们伟大祖国的骄傲。

梦油晚上好，祖国强大，是我们最大的骄傲

小辣椒 发表于 2024-10-26 20:57

花飞飞 发表于 2024-10-25 21:32
这个小播也太漂亮了，色彩调得真美。。

问好飞飞，谢谢欣赏{:4_171:}

小辣椒 发表于 2024-10-26 20:58

花飞飞 发表于 2024-10-25 21:32
支持小辣椒~~

谢谢支持{:4_171:}

飞飞的制作漂亮多了
页: [1] 2 3
查看完整版本: 英雄航天人 （学习套用黑黑 Truck 播放器效果）