Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
SELF- DESTRUCT
DEVICE SELF-DESTRUCTION
9
ABORT
DETONATE
css
/*** debugg in progress ***/ body { margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #151515; } .base { background: #cacaca; width: 20vmin; border-radius: 27vmin; box-shadow: 0 6vmin 0.15vmin 0vmin #777, 0 4vmin 0.15vmin 0vmin #777, 0 2vmin 0.15vmin 0vmin #777; padding: 0vmin 2vmin 2vmin 2vmin; z-index: 1; transform: rotateX(60deg) rotateZ(0deg); margin-top: -4.5vmin; height: 22vmin; } button#activate { background: #d60505; border: 0; width: 20vmin; height: 19vmin; border-radius: 100%; position: relative; cursor: pointer; outline: none; z-index: 2; box-shadow: 0 4vmin 0.15vmin 0vmin #af0000, 0 2vmin 0.15vmin 0vmin #af0000; top: -2.5vmin; border: 0.5vmin solid #af0000a1; transition: all 0.25s ease 0s; } button#activate:hover { box-shadow: 0 3vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; top: -1.5vmin; transition: all 0.5s ease 0s; } button#activate:active, button#activate.pushed { box-shadow: 0 1vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; top: 0.5vmin; transition: all 0.25s ease 0s; } button#activate.pushed { box-shadow: 0 0 20px 10px #ff3c3c, 0 0 100px 50px #ff2828; background: #ff0000; border-bottom: 3px solid #00000020; } .box { transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); transform-origin: center top; transform-style: preserve-3d; width: 45vmin; position: absolute; z-index: 5; margin-top: 27vmin; transition: transform 1s ease 0s; cursor: pointer; height: 45vmin; margin-left: -32vmin; } .box.opened { transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 180deg); } .box div { position: absolute; width: 45vmin; height: 45vmin; background: #00bcd47d; opacity: 0.5; border: 3px solid #00a4b9; border-radius: 3px; box-sizing: border-box; box-shadow: 0 0 3px 0 #00bcd48a; } .box > div:nth-child(1) { opacity: 0; } .box > div:nth-child(2) { transform: rotateX(90deg) translate3d(0px, 5vmin, 5vmin); height: 10vmin; } .box > div:nth-child(3) { transform: rotateX(0deg) translate3d(0, 0, 10vmin); } .box > div:nth-child(4) { transform: rotateX(270deg) translate3d(0px, -5vmin, 40vmin); height: 10vmin; } .box > div:nth-child(5) { transform: rotateY(90deg) translate3d(-5vmin, 0, 40vmin); width: 10vmin; } .box > div:nth-child(6) { transform: rotateY(-90deg) translate3d(5vmin, 0vmin, 5vmin); width: 10vmin; } .grid { background:repeating-linear-gradient(150deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ), repeating-linear-gradient(30deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ); position: fixed; width: 200vw; height: 150vh; } .warning { position: absolute; z-index: 0; width: 45vmin; height: 45vmin; background: repeating-linear-gradient(-45deg, black, black 3vmin, yellow 3vmin, yellow 6vmin); transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); box-shadow: 0 0 0 3vmin #af0000; } .warning:before { content: ""; width: 80%; height: 80%; background: linear-gradient(45deg, #000000 0%, #414141 74%); float: left; margin-top: 10%; margin-left: 10%; border: 1vmin solid yellow; border-radius: 1vmin; box-sizing: border-box; } .warning:after { content: "WARNING:\2009 DANGER"; color: white; transform: rotate(90deg); float: left; background: #af0000; position: absolute; bottom: 18.5vmin; left: -35vmin; font-size: 5vmin; font-family: Arial, Helvetica, serif; width: 49vmin; text-align: center; padding: 1vmin; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; } .hinges { position: absolute; z-index: 3; transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); } .hinges:before, .hinges:after { content: ""; background: #2b2b2b; width: 5vmin; height: 1.5vmin; position: absolute; margin-top: -24.5vmin; z-index: 5; border: 2px solid #00000010; border-radius: 5px 5px 0 0; box-sizing: border-box; margin-left: -16.25vmin; } .hinges:after { margin-left: 13.75vmin; margin-top: -24.5vmin; } .box > span:before, .box > span:after { content: ""; width: 5vmin; height: 1.5vmin; background: #103e4480; position: absolute; margin-left: 6vmin; border-radius: 0 0 5px 5px; } .box > span:after { margin-left: 36vmin; } .box > span { transform: rotateX(89deg) translate(0.3vmin, 0.3vmin); position: absolute; } .text { position: absolute; margin-top: 55vmin; color: white; font-family: Arial, Helvetica, serif; font-size: 5vmin; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; perspective-origin: left; background: #af0000; padding: 1vmin; transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg) translate(33.5vmin, -2vmin); text-align: center; width: 49vmin; } div#panel:before { content: "WARNING"; top: 3vmin; position: relative; font-size: 10vmin; width: 100vw; left: 0; z-index: 6; text-shadow: 0 0 1px #fff, 0 0 3px #fff; border-bottom: 1vmin dotted #fff; } #panel { position: absolute; background: #ff0000d0; color: #ffffff; font-family: Arial, Helvetica, serif; width: 90vmin; box-sizing: border-box; font-size: 3.25vmin; padding: 1vmin 2vmin; height: 60vmin; box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; z-index: 5; display: none; text-align: center; text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff; animation: warning-ligth 1s 0s infinite; } #panel.show { display: block !important; } #msg { margin-top: 5vmin; text-shadow: 0 0 2px #fff; } #time { font-size: 10vmin; background: #00000080; max-width: 35vmin; margin: 6vmin auto 5vmin !important; position: relative; border-radius: 0.25vmin; text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000; padding: 1vmin 0; } #time:before { content: "00:0";: } #abort { background: #ffffffb8; color: #d30303; cursor: pointer; padding: 1vmin 2.75vmin; font-size: 6vmin; border-radius: 0.25vmin; font-weight: bold; animation: highlight 1s 0s infinite; } #abort:hover { background: #ffffff; box-shadow: 0 0 15px 5px #fff; } @keyframes highlight { 50% { box-shadow: 0 0 15px 5px #fff;} } div#turn-off { position: fixed; background: #ffffff80; left: 0; width: 100vw; height: 0vh; z-index: 7; } div#turn-off:before, div#turn-off:after { content: ""; position: fixed; left: 0; top: 0; height: 0vh; background: #000; width: 100vw; transition: height 0.5s ease 0s; } div#turn-off:after { top: inherit; bottom: 0; } div#turn-off.close { height: 100vh; } div#turn-off.close:before, div#turn-off.close:after { transition: height 0.1s ease 0.1s; height: 49.75vh; } #time.crono { background: #ffffffba; transition: background 0.5s ease 0s; color: #ff0000; text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff; } #detonate { display: none; color: #fff; z-index: 5; font-size: 8vmin; font-family: Arial, Helvetica, serif; text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; } #detonate.show { display: block; animation: blink 0.25s 0s infinite; } #abort.hide { display: none; } @keyframes blink { 50% { opacity: 0;} } #closing { width: 100vw; height: 100vh; left: 0; position: absolute; } div#closing:before, div#closing:after { content: ""; width: 50vw; height: 1.5vh; left: -50vw; top: 49vh; position: absolute; background: #000000; z-index: 7; transition: left 0.2s ease 0s; } div#closing:after { right: -50vw; transition: right 0.2s ease 0s; left: initial; } div#closing.close:before { left: 0; transition: left 0.2s ease 0.2s; } div#closing.close:after { right: 0; transition: right 0.2s ease 0.2s; } #restart { position: absolute; z-index: 8; display: none; } #reload { position: absolute; z-index: 8; width: 10vmin; height: 10vmin; border-radius: 100%; border: 0; margin-top: -5vmin; margin-left: -2.5vmin; opacity: 0; cursor: pointer; transform: rotate(0deg); transition: transform 0.5s ease 0s; outline: none; } #reload:hover { background: #ef0000; transform: rotate(360deg); transition: transform 0.5s ease 0s; } #restart.show { display: block; } #restart.show #reload { animation: refresh 3.5s 0s 1; opacity:1; } @keyframes refresh { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } button#reload:before { content: ""; width: 6vmin; height: 6vmin; position: absolute; left: 2vmin; top: 2vmin; border-radius: 100%; border: 1vmin solid #000; box-sizing: border-box; border-bottom-color: transparent; } button#reload:after { content: ""; border: 1.25vmin solid transparent; border-top: 2vmin solid black; position: absolute; transform: rotate(40deg) translate(0.5vmin, 1.25vmin); } @keyframes warning-ligth { 0% { box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; } 50% { box-shadow: 0 0 0 100vmin #ff000020, 0 0 0 5vmin #ff000020; } } #mute { position: absolute; bottom: 1vmin; right: 1vmin; background: #8bc34a80; width: 6vmin; height: 6vmin; cursor: pointer; border: 0.5vmin solid #151515; } #mute.muted { background: #ff000080; } #mute:before { content: ""; border: 0.75vmin solid transparent; height: 2vmin; border-right: 2vmin solid #151515; position: absolute; border-left-width: 0; top: 1.25vmin; right: 1.25vmin; } #mute:after { content: ""; border: 0vmin solid transparent; height: 2vmin; border-right: 1.5vmin solid #151515; position: absolute; top: 2vmin; right: 3.5vmin; }
JavaScript
/*** debugg in progress ***/ var theCount; var alarm = document.getElementById("alarm"); var panel = document.getElementById("panel"); var turnOff = document.getElementById("turn-off"); var turnOffHor = document.getElementById("closing"); var detonate = document.getElementById("detonate"); var time = document.getElementById("time"); function showCountDown() { time.innerText = time.innerText - 1; if (time.innerText == 0) { clearInterval(theCount); time.classList.add("crono"); abort.classList.add("hide"); detonate.classList.add("show"); setTimeout(function () { turnOff.classList.add("close"); turnOffHor.classList.add("close"); reload.classList.add("show"); alarm.pause(); }, 1500); } } var cover = document.getElementById("cover"); cover.addEventListener("click", function () { if (this.className == "box") this.classList.add("opened"); else this.classList.remove("opened"); }); var btn = document.getElementById("activate"); activate.addEventListener("click", function () { this.classList.add("pushed"); alarm.load(); alarm.currentTime = 10.1; alarm.play(); setTimeout(function () { panel.classList.add("show"); theCount = setInterval(showCountDown, 1000); alarm.load(); alarm.play(); }, 500); }); var abort = document.getElementById("abort"); abort.addEventListener("click", function () { btn.classList.remove("pushed"); panel.classList.remove("show"); clearInterval(theCount); time.innerText = 9; alarm.pause(); alarm.currentTime = 10; alarm.play(); }); var reload = document.getElementById("restart"); reload.addEventListener("click", function () { panel.classList.remove("show"); turnOff.classList.remove("close"); turnOffHor.classList.remove("close"); abort.classList.remove("hide"); detonate.classList.remove("show"); cover.classList.remove("opened"); btn.classList.remove("pushed"); this.classList.remove("show"); time.classList.remove("crono"); time.innerText = 9; }); setTimeout(function () { cover.classList.remove("opened"); }, 100); var mute = document.getElementById("mute"); mute.addEventListener("click", function () { if (this.className == "muted") { alarm.muted = false; this.classList.remove("muted"); } else { alarm.muted = true; this.classList.add("muted"); } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>自毁按钮特效-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号