HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利 今晚吃鸡

本文主要是介绍HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利 今晚吃鸡，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利 今晚吃鸡

css部分

		*{margin: 0;padding:0;}body{min-height:100vh;overflow: hidden;}section{position:relative;width: 100%;height: 100vh;background: url("../images/8.jpg");background-size: cover;background-position: center;cursor: url("../images/9.png"),pointer;}span{position: absolute;width: 40px;height: 38px;background: url("../images/10.png");pointer-events: none;transform: translate(20px,20px);}

HTML部分

	<section><audio src="../images/98k.mp3" id="audio" autostart='false'></audio></section>

JS部分

	<script>document.addEventListener('click', (e) =>{let body=document.querySelector('body')let bullet=document.createElement('span')let x=e.offsetXlet y=e.offsetYbullet.style.left=x +'px'bullet.style.top=y +'px'body.appendChild(bullet)let audio=document.getElementById('audio')audio.play()})</script>

直接干货分享 为了方便大家下面是链接图片音效资源网址⬇⬇⬇⬇⬇⬇

背景图（建议选大一点分辨率的）
鼠标瞄准镜
弹孔
枪声音效（这里小编用PR简单处理了一下音效时间 尽可能的缩短）

这篇关于HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利 今晚吃鸡的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---