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

英雄航天人

<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-26 20:39

{:5_142:}{:5_142:}{:5_142:}

小辣椒 发表于 2024-10-26 21:24

加了路径效果

liumang 发表于 2024-10-27 22:27

小辣椒 发表于 2024-10-26 21:24
加了路径效果

漂亮的{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-10-27 22:29

{:5_149:}{:5_149:}{:5_149:}
页: [1]
查看完整版本: 英雄航天人