js+css实现拖动月亮挡住太阳带音效日食效果代码
代码语言:html
所属分类:拖放
代码描述:js+css实现拖动月亮挡住太阳带音效日食效果代码
代码标签: js css 拖动 月亮 挡住 太阳 音效 日食
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <!--The prettiest HTML you ever did see--> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <style> body { margin: 0; height: 100vh; background: hsl(194, 66%, 49%); overflow: hidden; font-family: Inconsolata,sans-serif; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .circle { position: absolute; width: 150px; height: 150px; margin: -75px; background: red; top: 50%; left: 50%; border-radius: 50%; } #sun { background: #ffff77; box-shadow: 0 0 50px #ffff77; } #moon { background: #222; left: 50%; } #perc { position: absolute; width: 100%; text-align: center; top: 50%; margin-top: 110px; color: white; pointer-events: none; } </style> </head> <body> <audio id="audio" autoplay loop> <source src="//repo.bfw.wiki/bfwrepo/sound/5d7ca90ac076d.mp3" type="audio/mpeg"></source> Fuck, you can't play audio. </audio> <div class="circle" id="sun"></div> <div class="circle" id="moon"></div> <div id="perc">10%</div> <script id="rendered-js" > //Another contribution to the great Eclipse/Volume circlejerk var moon = document.getElementById("moon"), parc = document.getElementById("perc"), audio = document.getElementById("audio"), dragging = false, radius = 75, area = Math.PI * radius * radius, offs = [0, 0]; function init() { moon.addEventListener("mousedown", selectMoon); moon.addEventListener("touchstart", selectMoon); document.body.addEventListener("mousemove", moveMoon); document.body.addEventListener("tou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0