《机械战警》（套用黑黑 strike效果）
<style>#papa {
position: relative;
margin: 0 0 0 calc(50% - 681px);
width: 1199px;
height: 622px;
border-radius: 8px;
background: radial-gradient(circle,transparent var(--radius), rgba(25,25,112,.4) calc(var(--radius) + 30%), rgba(25,25,112,.4) 0), url('https://pic.imgdb.cn/item/65b11a11871b83018a633d01.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
cursor: pointer;
z-index: 1;
--radius: 0%;
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1874509414" autoplay loop></audio>
<script>
(function (){
var step = 10, rad = 0, raf = null;
var render = () => {
rad += step;
if(rad <= 0 || rad >= 100) step = -step;
papa.style.setProperty('--radius', rad + '%');
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
};
var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
aud.loop = false;
aud.addEventListener('pause', mState, false);
aud.addEventListener('playing', mState, false);
aud.addEventListener('ended', () => { cancelAnimationFrame(raf); aud.play(); }, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 看到黑黑说鼓励套用，那我就套用个玩玩{:4_173:} 红影 发表于 2024-1-24 22:17
看到黑黑说鼓励套用，那我就套用个玩玩
这个很真用不着抽一包烟的工夫 马黑黑 发表于 2024-1-24 22:18
这个很真用不着抽一包烟的工夫
是啊，回完帖子，随手找个图图找个音乐，直接就成了{:4_173:} 马黑黑 发表于 2024-1-24 22:18
这个很真用不着抽一包烟的工夫
我还是把黑色的闪烁改成了蓝色，这样更像警灯一点。嗯，还算是做了点修改{:4_173:} 红影 发表于 2024-1-24 22:21
是啊，回完帖子，随手找个图图找个音乐，直接就成了
还有绿色、橙色等，都可以用 红影 发表于 2024-1-24 22:21
是啊，回完帖子，随手找个图图找个音乐，直接就成了
这个是个单一效果，它确实很简单。不过呢，有一个问题：如果一直让它播放着，动画会越来越快。我站里的已经修正，要改动几个地方，这里就不改了。 马黑黑 发表于 2024-1-24 22:29
这个是个单一效果，它确实很简单。不过呢，有一个问题：如果一直让它播放着，动画会越来越快。我站里的已 ...
哦，等空了我去看看，今天肯定不行了，一会就准备下了。 马黑黑 发表于 2024-1-24 22:27
还有绿色、橙色等，都可以用
好像蓝色更适合勇猛的主体啊。 红影 发表于 2024-1-24 22:34
好像蓝色更适合勇猛的主体啊。
那要看背景图片的怎样的 红影 发表于 2024-1-24 22:34
哦，等空了我去看看，今天肯定不行了，一会就准备下了。
88 动感十足。 你配的音乐真好听。 马黑黑 发表于 2024-1-24 23:36
那要看背景图片的怎样的
这个背景应该比较适合呢。 马黑黑 发表于 2024-1-24 23:36
88
今天都没时间，也没来得及修改这个，等明天了。 庶民 发表于 2024-1-25 05:07
动感十足。
谢谢庶民，我套用的代码呢{:4_187:} 梦油 发表于 2024-1-25 09:42
你配的音乐真好听。
去搜了一下，发现真有这个音乐{:4_173:} 红影 发表于 2024-1-25 22:40
今天都没时间，也没来得及修改这个，等明天了。
{:4_190:} 红影 发表于 2024-1-25 22:40
这个背景应该比较适合呢。
是的 红影 发表于 2024-1-25 22:41
去搜了一下，发现真有这个音乐
你对网络的应用真发挥到极致了。{:5_116:}