加林森 发表于 2022-8-4 17:59

《战鹰巡南海》（学习老黑的“天际”制作）


<style>
#papa { left: -214px; width: 1024px; height: 600px; background: #336699 url('https://s1.ax1x.com/2022/08/04/veOkjA.jpg') no-repeat center/cover; box-shadow: 3px 3px 30px #000; position: relative; overflow: hidden; }
.mpic { position: absolute; width: 124px; height: 221px; right: -124px; bottom: -130px; }
#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(0px, 0px) rotate(-45deg); } to { transform: translate(-1084px, -600px) rotate(-45deg); }}
</style>

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

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

aud.src = 'https://music.163.com/song/media/outer/url?id=449638800.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://s1.ax1x.com/2022/08/04/veXpbq.png';
      ele.alt = '';
      ele.style.animation = 'shot 4s 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-4 17:59

@马黑黑

梦油 发表于 2022-8-4 18:18

这件作品的时效性、新闻性、战斗性极强，是一件正能量的好作品。

加林森 发表于 2022-8-4 18:20

梦油 发表于 2022-8-4 18:18
这件作品的时效性、新闻性、战斗性极强，是一件正能量的好作品。

我就是这样想的，就制作出来了。

梦油 发表于 2022-8-4 18:50

加林森 发表于 2022-8-4 18:20
我就是这样想的，就制作出来了。

好，思维敏捷。

加林森 发表于 2022-8-4 19:16

梦油 发表于 2022-8-4 18:50
好，思维敏捷。

嗯嗯。

红影 发表于 2022-8-4 19:43

队长学得真快，这个做得很霸气{:4_187:}

加林森 发表于 2022-8-4 19:50

红影 发表于 2022-8-4 19:43
队长学得真快，这个做得很霸气

是的。我们的战鹰巡航南海。

马黑黑 发表于 2022-8-4 20:04

加林森 发表于 2022-8-4 18:20
我就是这样想的，就制作出来了。

挺好挺好

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

马黑黑 发表于 2022-8-4 20:04
挺好挺好

这次没有放鹰出来。就放我们的战斗机巡航南海了。

醉美水芙蓉 发表于 2022-8-4 20:12

马黑黑 发表于 2022-8-4 20:12

加林森 发表于 2022-8-4 20:11
这次没有放鹰出来。就放我们的战斗机巡航南海了。

非常好，给力

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

马黑黑 发表于 2022-8-4 20:12
非常好，给力

嗯嗯。谢了！{:4_191:}

加林森 发表于 2022-8-4 20:21

醉美水芙蓉 发表于 2022-8-4 20:12
队长厉害！做得霸气！

水芙蓉晚上好！是得这样才行！

上海朝阳 发表于 2022-8-4 20:40

加林森 发表于 2022-8-4 18:20
我就是这样想的，就制作出来了。

我以为都是导弹火箭炮发射呢

加林森 发表于 2022-8-4 20:47

上海朝阳 发表于 2022-8-4 20:40
我以为都是导弹火箭炮发射呢

战斗机巡航！

小辣椒 发表于 2022-8-4 20:55

队长速度快的，这个是战鹰啊

小辣椒 发表于 2022-8-4 20:57

我还以为是和黑黑差不多的火箭炮{:4_189:}

小辣椒 发表于 2022-8-4 20:58

最近几天都要提高警惕，时刻准备着。。。。

加林森 发表于 2022-8-4 21:06

小辣椒 发表于 2022-8-4 20:55
队长速度快的，这个是战鹰啊

成都产的战斗机！歼20战鹰！
页: [1] 2
查看完整版本: 《战鹰巡南海》（学习老黑的“天际”制作）