小辣椒 发表于 2022-8-16 21:36

科技强国 筑梦未来

<style>
#papa { left:-400px; width: 1384px; height: 799px;top: 150px;background: #336699 url('https://pic.imgdb.cn/item/62f9c31716f2c2beb1b33cf4.gif') no-repeat center/cover; box-shadow: 3px 3px 30px #000; position: relative; overflow: hidden; }
.mpic { position: absolute; width: 200px; height: 104px; right: -124px; bottom: -500px; }


#disc { position: absolute; width: 60px; height: 60px; right: 890px; bottom: 50px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); border-radius: 50%; mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); animation: rot 2s linear infinite; cursor: pointer; z-index: 100; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes shot { from {transform: translate(900px, 0px) rotate(-45deg); } to { transform: translate(-1280px, -1000px) rotate(-45deg); }}
</style>

<div id="papa"><span id="disc"></div>

<div style="position: absolute; right:800px; top: 1080px; width:161px;">
                <img alt="" src="https://wx.ttt.dj/data/nfs/img/hq.gif"/> </div>

<div style="position: absolute; right:460px; top: 1120px; width:100px;">
                <img alt="" src="https://pic.imgdb.cn/item/62f9c36316f2c2beb1b3ff19.png"/> </div>

<div style="position: absolute; right:600px; top: 1100px; width:150px;">
                <img alt="" src="https://pic.imgdb.cn/item/62f9c39a16f2c2beb1b4817e.png"/>

</div>

<script>
let arr = , aud = new Audio();

aud.src = 'https://wx.ttt.dj/updir/62dad3a1cabf4.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';

for(x of arr) {
        let ele = document.createElement('img');
        ele.className = 'mpic';
        ele.src = 'https://pic.imgdb.cn/item/62f926bf16f2c2beb1aa5918.png ';
        ele.alt = '';
        ele.style.animation = 'shot 7s linear ' + x * .6 + 's infinite';
        papa.appendChild(ele);
}

disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-16 21:37

重新加工了一下。谢谢岁月的粒子效果@走过岁月
我把原来飞的红飞机去了，重新加了黑黑的代码分享加了六架歼击机上去

小辣椒 发表于 2022-8-16 21:38

黑黑，我加了六架歼击机{:4_170:}打败那些台独分子

@马黑黑

红影 发表于 2022-8-16 21:46

这个威武，一下子起飞这么多战斗机，太霸气了{:4_199:}

马黑黑 发表于 2022-8-16 22:35

小辣椒 发表于 2022-8-16 21:38
黑黑，我加了六架歼击机打败那些台独分子

@马黑黑

嗯嗯，这是没问题的，定

走过岁月 发表于 2022-8-16 22:49

小辣椒 发表于 2022-8-16 21:37
重新加工了一下。谢谢岁月的粒子效果@走过岁月
我把原来飞的红飞机去了，重新加了黑黑的代码分享加了六架 ...

来了欣赏了

走过岁月 发表于 2022-8-16 22:49

真漂亮

走过岁月 发表于 2022-8-16 22:50

小辣椒这个可是加强版的，小辣椒厉害

走过岁月 发表于 2022-8-16 22:51

向太空进军，中国梦威武

小辣椒 发表于 2022-8-16 22:52

走过岁月 发表于 2022-8-16 22:49
来了欣赏了

岁月来了{:4_187:}

小辣椒 发表于 2022-8-16 22:53

马黑黑 发表于 2022-8-16 22:35
嗯嗯，这是没问题的，定

狠狠打击一下，这些叛国台独分子

小辣椒 发表于 2022-8-16 22:53

红影 发表于 2022-8-16 21:46
这个威武，一下子起飞这么多战斗机，太霸气了

亲爱的，这些歼击机厉害{:4_189:}

走过岁月 发表于 2022-8-16 22:54

小辣椒 发表于 2022-8-16 22:52
岁月来了

来了

小辣椒 发表于 2022-8-16 22:54

走过岁月 发表于 2022-8-16 22:50
小辣椒这个可是加强版的，小辣椒厉害

我不厉害的，其实我想用星星的那个效果。结果发现短了一点，原来的找不到了

小辣椒 发表于 2022-8-16 22:55

走过岁月 发表于 2022-8-16 22:51
向太空进军，中国梦威武

其实我特别喜欢这个小号演奏

小辣椒 发表于 2022-8-16 22:56

走过岁月 发表于 2022-8-16 22:54
来了

最近很忙吧，都没有看见你的

走过岁月 发表于 2022-8-16 22:57

小辣椒 发表于 2022-8-16 22:54
我不厉害的，其实我想用星星的那个效果。结果发现短了一点，原来的找不到了

没事，好看就好

走过岁月 发表于 2022-8-16 22:57

小辣椒 发表于 2022-8-16 22:55
其实我特别喜欢这个小号演奏

嗯，我也喜欢小号

走过岁月 发表于 2022-8-16 22:57

小辣椒 发表于 2022-8-16 22:56
最近很忙吧，都没有看见你的

还行

小辣椒 发表于 2022-8-16 22:58

走过岁月 发表于 2022-8-16 22:57
没事，好看就好

去看了那个星星效果，也是很漂亮的
页: [1] 2
查看完整版本: 科技强国 筑梦未来