天际
<style>#papa { left: -214px; width: 1024px; height: 600px; background: #336699 url('https://638183.freep.cn/638183/Pic/81/7036.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=1428166708.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://638183.freep.cn/638183/Pic/81/tj.gif';
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>
代码分享：
<style>
#papa { left: -214px; width: 1024px; height: 600px; background: #336699 url('https://638183.freep.cn/638183/Pic/81/7036.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=1428166708.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://638183.freep.cn/638183/Pic/81/tj.gif';
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>
好有创意。真漂亮。{:4_199:} 加林森 发表于 2022-8-4 13:37
好有创意。真漂亮。
关键是，代码不多。你也可以让你的鹰这么飞，不过要改个方向，你试试 派老鹰出动也是这个效果吧。 马黑黑 发表于 2022-8-4 13:39
关键是，代码不多。你也可以让你的鹰这么飞，不过要改个方向，你试试
我准备试一下。 乘坐黑黑飞船遨游太空啦！绝妙的创意，完美的设计。————棒！ ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
这句的含义不明白。
制作很漂亮，这个图图和动图都好清晰，特别养眼{:4_187:} 马氏空天无敌战舰！ 上来看看的，果然黒黑有新分享，看看很复杂一样，手机不能自己电脑预览效果，晚上看看，早回家就套用一个{:4_189:} 音乐很动感 黒黑今天火箭出来了，配合前线打击分裂国家的台独分子 电脑上来了，看看黑黑威武的火箭炮{:4_178:} 谢谢黑黑分享，现在去套用一个试试
小辣椒 发表于 2022-8-4 19:37
谢谢黑黑分享，现在去套用一个试试
挺好挺好 加林森 发表于 2022-8-4 13:40
派老鹰出动也是这个效果吧。
可以比这个效果好 小辣椒 发表于 2022-8-4 19:37
电脑上来了，看看黑黑威武的火箭炮
解气吧 梦油 发表于 2022-8-4 14:35
乘坐黑黑飞船遨游太空啦！绝妙的创意，完美的设计。————棒！
喝茶{:4_180:} 马黑黑 发表于 2022-8-4 20:05
可以比这个效果好
嗯嗯。我已经制作了一个出来。 红影 发表于 2022-8-4 15:40
ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
这句的含义不明白。
这句，
ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
是通过JS来写CSS：调用动画 shot，4秒运行周期，匀速，x * 0.6 的延时（这样可以不同是出发），循环往复。
页:
[1]
2