绿叶清舟 发表于 2022-8-11 11:59

流星

本帖最后由 绿叶清舟 于 2022-8-11 12:02 编辑 <br /><br /><style>
#papa { left: -250px; width: 1100px; height: 700px; background: #336699 url('https://pic.imgdb.cn/item/62f47c3116f2c2beb1e04ba0.jpg') no-repeat center/cover; box-shadow: 3px 3px 30px #000; position: relative; overflow: hidden; }
.mpic { position: absolute; width: 124px; height: 221px; right: -124px; top: -700px; }
#disc { position: absolute; width: 60px; height: 60px; right: 20px; bottom: 20px; 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(1100px, 0px) rotate(45deg); } to { transform: translate(-1100px, 800px) rotate(45deg); }}
</style>

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

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

aud.src = 'http://music.163.com/song/media/outer/url?id=300210.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/62f47c8316f2c2beb1e11b4b.gif';
      ele.alt = '';
      ele.style.animation = 'shot 6s 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>

加林森 发表于 2022-8-11 12:19

清舟这个制作真漂亮。好看好听！{:4_199:}

马黑黑 发表于 2022-8-11 12:45

设计精巧，实现方法干脆利落

红影 发表于 2022-8-11 14:57

清舟好漂亮的制作{:4_187:}

红影 发表于 2022-8-11 14:58

看到这些无尽倾泻的流星，咋想到了导弹，一股脑砸过去，看台独还敢搞事情{:4_173:}

青青子衿 发表于 2022-8-11 15:59

清舟友友。。。。流星战队，威武洒脱。。。。幽蓝，配色也棒。。。赞一个~！

绿叶清舟 发表于 2022-8-11 19:05

加林森 发表于 2022-8-11 12:19
清舟这个制作真漂亮。好看好听！

谢谢队长，真巧搜到这歌的了

绿叶清舟 发表于 2022-8-11 19:06

青青子衿 发表于 2022-8-11 15:59
清舟友友。。。。流星战队，威武洒脱。。。。幽蓝，配色也棒。。。赞一个~！

青青好啊，几天没见了

绿叶清舟 发表于 2022-8-11 19:07

红影 发表于 2022-8-11 14:58
看到这些无尽倾泻的流星，咋想到了导弹，一股脑砸过去，看台独还敢搞事情

还真想过整个弹的，不过得有个目标啊，怕太敏感了{:4_189:}

绿叶清舟 发表于 2022-8-11 19:09

马黑黑 发表于 2022-8-11 12:45
设计精巧，实现方法干脆利落

这个数字设置也得考虑图片的大小的吧

加林森 发表于 2022-8-11 19:35

绿叶清舟 发表于 2022-8-11 19:05
谢谢队长，真巧搜到这歌的了

不错吧。

马黑黑 发表于 2022-8-11 19:44

绿叶清舟 发表于 2022-8-11 19:09
这个数字设置也得考虑图片的大小的吧

慢慢体会就好

绿叶清舟 发表于 2022-8-11 19:55

加林森 发表于 2022-8-11 19:35
不错吧。

是啊，发完贴才发现活动那边今天是个回字的{:4_189:}

加林森 发表于 2022-8-11 20:20

绿叶清舟 发表于 2022-8-11 19:55
是啊，发完贴才发现活动那边今天是个回字的

就是。今天我也发了最后一天的出来。脑壳都热得短路了。{:4_189:}

小辣椒 发表于 2022-8-11 20:43

清舟这个图图漂亮。效果也是漂亮{:4_178:}

绿叶清舟 发表于 2022-8-11 21:10

加林森 发表于 2022-8-11 20:20
就是。今天我也发了最后一天的出来。脑壳都热得短路了。

都热糊啦，俺这今天也是超过四十度的了

加林森 发表于 2022-8-11 21:13

绿叶清舟 发表于 2022-8-11 21:10
都热糊啦，俺这今天也是超过四十度的了

彼此彼此，恭喜恭喜。。。。。{:4_172:}

绿叶清舟 发表于 2022-8-11 21:30

小辣椒 发表于 2022-8-11 20:43
清舟这个图图漂亮。效果也是漂亮

辣椒好，俺太败家啦一个活动贴就这么灌没了{:4_189:}

绿叶清舟 发表于 2022-8-11 21:33

加林森 发表于 2022-8-11 21:13
彼此彼此，恭喜恭喜。。。。。

一起躺冰箱里去了{:4_189:}

加林森 发表于 2022-8-11 21:52

绿叶清舟 发表于 2022-8-11 21:33
一起躺冰箱里去了

{:4_172:}
页: [1] 2
查看完整版本: 流星