Combination Lock

Developer

Size

7,587 Kb

Views

50,600

Combination Lock Previews
Combination Lock HTML Codes
Combination Lock CSS Codes
Combination Lock JS Codes

How do I make an combination lock?

Tug on that browser window: right, left (pass once), right. Get to crackin! p.s. It helps to start with a smallish browser width. Numbers are approximate, I'm werrrkin on it!. What is a combination lock? How do you make a combination lock? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Combination Lock Previews

Combination Lock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Combination Lock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
body { background: #ddd; color: #333; font-weight: 300; font-family: "Roboto Slab", sans-serif;
}
body:after { content: attr(data-content); position: absolute; top: 0.2em; left: 0.2em; font-size: 0.7em;
}
body:before { content: "[37][3][7]"; text-align: center; display: block; font-size: 3em; width: 100%; top: 2em; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; position: absolute; z-index: -1;
}
.lock { position: relative; /* [1] */ width: 11em; height: 11em; padding: 0; border-radius: 50%; list-style: none; /* [2] */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; /* [3] */ width: 10em; height: 10em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; margin: 0 auto; position: relative; background: rgba(0, 0, 0, 0.8); border: 2.5em solid rgba(0, 0, 0, 0.9); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; -webkit-transition: -webkit-transform 1s; transition: transform 1s; top: 2em; z-index: 100;
}
.lock > * { /* [4] */ display: block; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em; text-align: center; font-size: 0.8em; color: rgba(255, 255, 255, 0.9);
}
.lock > *:nth-of-type(1) { -moz-transform: rotate(270deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(270deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(270deg) translate(5.5em) rotate(90deg); transform: rotate(270deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(2) { -moz-transform: rotate(279deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(279deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(279deg) translate(5.5em) rotate(90deg); transform: rotate(279deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(3) { -moz-transform: rotate(288deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(288deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(288deg) translate(5.5em) rotate(90deg); transform: rotate(288deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(4) { -moz-transform: rotate(297deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(297deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(297deg) translate(5.5em) rotate(90deg); transform: rotate(297deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(5) { -moz-transform: rotate(306deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(306deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(306deg) translate(5.5em) rotate(90deg); transform: rotate(306deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(6) { -moz-transform: rotate(315deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(315deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(315deg) translate(5.5em) rotate(90deg); transform: rotate(315deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(7) { -moz-transform: rotate(324deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(324deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(324deg) translate(5.5em) rotate(90deg); transform: rotate(324deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(8) { -moz-transform: rotate(333deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(333deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(333deg) translate(5.5em) rotate(90deg); transform: rotate(333deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(9) { -moz-transform: rotate(342deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(342deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(342deg) translate(5.5em) rotate(90deg); transform: rotate(342deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(10) { -moz-transform: rotate(351deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(351deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(351deg) translate(5.5em) rotate(90deg); transform: rotate(351deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(11) { -moz-transform: rotate(360deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(360deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(360deg) translate(5.5em) rotate(90deg); transform: rotate(360deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(12) { -moz-transform: rotate(369deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(369deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(369deg) translate(5.5em) rotate(90deg); transform: rotate(369deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(13) { -moz-transform: rotate(378deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(378deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(378deg) translate(5.5em) rotate(90deg); transform: rotate(378deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(14) { -moz-transform: rotate(387deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(387deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(387deg) translate(5.5em) rotate(90deg); transform: rotate(387deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(15) { -moz-transform: rotate(396deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(396deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(396deg) translate(5.5em) rotate(90deg); transform: rotate(396deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(16) { -moz-transform: rotate(405deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(405deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(405deg) translate(5.5em) rotate(90deg); transform: rotate(405deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(17) { -moz-transform: rotate(414deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(414deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(414deg) translate(5.5em) rotate(90deg); transform: rotate(414deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(18) { -moz-transform: rotate(423deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(423deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(423deg) translate(5.5em) rotate(90deg); transform: rotate(423deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(19) { -moz-transform: rotate(432deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(432deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(432deg) translate(5.5em) rotate(90deg); transform: rotate(432deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(20) { -moz-transform: rotate(441deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(441deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(441deg) translate(5.5em) rotate(90deg); transform: rotate(441deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(21) { -moz-transform: rotate(450deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(450deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(450deg) translate(5.5em) rotate(90deg); transform: rotate(450deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(22) { -moz-transform: rotate(459deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(459deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(459deg) translate(5.5em) rotate(90deg); transform: rotate(459deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(23) { -moz-transform: rotate(468deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(468deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(468deg) translate(5.5em) rotate(90deg); transform: rotate(468deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(24) { -moz-transform: rotate(477deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(477deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(477deg) translate(5.5em) rotate(90deg); transform: rotate(477deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(25) { -moz-transform: rotate(486deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(486deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(486deg) translate(5.5em) rotate(90deg); transform: rotate(486deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(26) { -moz-transform: rotate(495deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(495deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(495deg) translate(5.5em) rotate(90deg); transform: rotate(495deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(27) { -moz-transform: rotate(504deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(504deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(504deg) translate(5.5em) rotate(90deg); transform: rotate(504deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(28) { -moz-transform: rotate(513deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(513deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(513deg) translate(5.5em) rotate(90deg); transform: rotate(513deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(29) { -moz-transform: rotate(522deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(522deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(522deg) translate(5.5em) rotate(90deg); transform: rotate(522deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(30) { -moz-transform: rotate(531deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(531deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(531deg) translate(5.5em) rotate(90deg); transform: rotate(531deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(31) { -moz-transform: rotate(540deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(540deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(540deg) translate(5.5em) rotate(90deg); transform: rotate(540deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(32) { -moz-transform: rotate(549deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(549deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(549deg) translate(5.5em) rotate(90deg); transform: rotate(549deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(33) { -moz-transform: rotate(558deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(558deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(558deg) translate(5.5em) rotate(90deg); transform: rotate(558deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(34) { -moz-transform: rotate(567deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(567deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(567deg) translate(5.5em) rotate(90deg); transform: rotate(567deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(35) { -moz-transform: rotate(576deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(576deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(576deg) translate(5.5em) rotate(90deg); transform: rotate(576deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(36) { -moz-transform: rotate(585deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(585deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(585deg) translate(5.5em) rotate(90deg); transform: rotate(585deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(37) { -moz-transform: rotate(594deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(594deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(594deg) translate(5.5em) rotate(90deg); transform: rotate(594deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(38) { -moz-transform: rotate(603deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(603deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(603deg) translate(5.5em) rotate(90deg); transform: rotate(603deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(39) { -moz-transform: rotate(612deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(612deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(612deg) translate(5.5em) rotate(90deg); transform: rotate(612deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(40) { -moz-transform: rotate(621deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(621deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(621deg) translate(5.5em) rotate(90deg); transform: rotate(621deg) translate(5.5em) rotate(90deg);
}
.lock:before { content: "Master"; color: white; position: absolute; top: 1.8em; left: 0.6em; font-weight: 700; font-size: 1.05em; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.1em;
}
.container { width: 13em; height: 13em; background: #d0d0d0; margin: 19em auto 0; position: relative; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5); box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5);
}
.container:after { content: ""; position: absolute; display: block; -moz-border-radius: 100% 100% 0 0; -webkit-border-radius: 100%; border-radius: 100% 100% 0 0; width: 6em; height: 7em; background: transparent; top: -6em; left: 1.5em; z-index: -1; border: 2em solid #d0d0d0; border-bottom: 0; -moz-box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5); box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5);
}
.container:before { content: ""; position: absolute; display: block; width: 0.3em; height: 0.7em; background: #990000; left: 49%; top: 1.5em; z-index: 50; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; -moz-box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white; -webkit-box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white; box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white;
}
.lock li:nth-child(5n+1) { font-weight: 700;
}
.gotFirst:before { content: "[\2713][3][7]";
}
.gotSecond:before { content: "[\2713][\2713][7]";
}
.gotThird:before { content: "Boo yah!"; font-size: 6em;
}
.gotThird .container { top: -100em; -moz-transition: all 5s; -o-transition: all 5s; -webkit-transition: all 5s; transition: all 5s; -moz-transition-delay: 1.25s; -o-transition-delay: 1.25s; -webkit-transition-delay: 1.25s; transition-delay: 1.25s; position: relative;
}
.gotThird .container.container:after { top: -7em; left: 3em; -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='container'> <ul class='lock'> <li> | 0 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 5 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 10 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 15 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 20 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 25 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 30 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> <li> | 35 </li> <li> | </li> <li> | </li> <li> | </li> <li> | </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Combination Lock - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
body { background: #ddd; color: #333; font-weight: 300; font-family: "Roboto Slab", sans-serif;
}
body:after { content: attr(data-content); position: absolute; top: 0.2em; left: 0.2em; font-size: 0.7em;
}
body:before { content: "[37][3][7]"; text-align: center; display: block; font-size: 3em; width: 100%; top: 2em; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; position: absolute; z-index: -1;
}
.lock { position: relative; /* [1] */ width: 11em; height: 11em; padding: 0; border-radius: 50%; list-style: none; /* [2] */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; /* [3] */ width: 10em; height: 10em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; margin: 0 auto; position: relative; background: rgba(0, 0, 0, 0.8); border: 2.5em solid rgba(0, 0, 0, 0.9); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); box-shadow: inset 0 0.17em 0.2em rgba(255, 255, 255, 0.2); -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; -webkit-transition: -webkit-transform 1s; transition: transform 1s; top: 2em; z-index: 100;
}
.lock > * { /* [4] */ display: block; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em; text-align: center; font-size: 0.8em; color: rgba(255, 255, 255, 0.9);
}
.lock > *:nth-of-type(1) { -moz-transform: rotate(270deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(270deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(270deg) translate(5.5em) rotate(90deg); transform: rotate(270deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(2) { -moz-transform: rotate(279deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(279deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(279deg) translate(5.5em) rotate(90deg); transform: rotate(279deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(3) { -moz-transform: rotate(288deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(288deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(288deg) translate(5.5em) rotate(90deg); transform: rotate(288deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(4) { -moz-transform: rotate(297deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(297deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(297deg) translate(5.5em) rotate(90deg); transform: rotate(297deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(5) { -moz-transform: rotate(306deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(306deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(306deg) translate(5.5em) rotate(90deg); transform: rotate(306deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(6) { -moz-transform: rotate(315deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(315deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(315deg) translate(5.5em) rotate(90deg); transform: rotate(315deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(7) { -moz-transform: rotate(324deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(324deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(324deg) translate(5.5em) rotate(90deg); transform: rotate(324deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(8) { -moz-transform: rotate(333deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(333deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(333deg) translate(5.5em) rotate(90deg); transform: rotate(333deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(9) { -moz-transform: rotate(342deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(342deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(342deg) translate(5.5em) rotate(90deg); transform: rotate(342deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(10) { -moz-transform: rotate(351deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(351deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(351deg) translate(5.5em) rotate(90deg); transform: rotate(351deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(11) { -moz-transform: rotate(360deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(360deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(360deg) translate(5.5em) rotate(90deg); transform: rotate(360deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(12) { -moz-transform: rotate(369deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(369deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(369deg) translate(5.5em) rotate(90deg); transform: rotate(369deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(13) { -moz-transform: rotate(378deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(378deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(378deg) translate(5.5em) rotate(90deg); transform: rotate(378deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(14) { -moz-transform: rotate(387deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(387deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(387deg) translate(5.5em) rotate(90deg); transform: rotate(387deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(15) { -moz-transform: rotate(396deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(396deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(396deg) translate(5.5em) rotate(90deg); transform: rotate(396deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(16) { -moz-transform: rotate(405deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(405deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(405deg) translate(5.5em) rotate(90deg); transform: rotate(405deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(17) { -moz-transform: rotate(414deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(414deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(414deg) translate(5.5em) rotate(90deg); transform: rotate(414deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(18) { -moz-transform: rotate(423deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(423deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(423deg) translate(5.5em) rotate(90deg); transform: rotate(423deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(19) { -moz-transform: rotate(432deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(432deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(432deg) translate(5.5em) rotate(90deg); transform: rotate(432deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(20) { -moz-transform: rotate(441deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(441deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(441deg) translate(5.5em) rotate(90deg); transform: rotate(441deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(21) { -moz-transform: rotate(450deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(450deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(450deg) translate(5.5em) rotate(90deg); transform: rotate(450deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(22) { -moz-transform: rotate(459deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(459deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(459deg) translate(5.5em) rotate(90deg); transform: rotate(459deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(23) { -moz-transform: rotate(468deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(468deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(468deg) translate(5.5em) rotate(90deg); transform: rotate(468deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(24) { -moz-transform: rotate(477deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(477deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(477deg) translate(5.5em) rotate(90deg); transform: rotate(477deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(25) { -moz-transform: rotate(486deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(486deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(486deg) translate(5.5em) rotate(90deg); transform: rotate(486deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(26) { -moz-transform: rotate(495deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(495deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(495deg) translate(5.5em) rotate(90deg); transform: rotate(495deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(27) { -moz-transform: rotate(504deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(504deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(504deg) translate(5.5em) rotate(90deg); transform: rotate(504deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(28) { -moz-transform: rotate(513deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(513deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(513deg) translate(5.5em) rotate(90deg); transform: rotate(513deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(29) { -moz-transform: rotate(522deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(522deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(522deg) translate(5.5em) rotate(90deg); transform: rotate(522deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(30) { -moz-transform: rotate(531deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(531deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(531deg) translate(5.5em) rotate(90deg); transform: rotate(531deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(31) { -moz-transform: rotate(540deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(540deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(540deg) translate(5.5em) rotate(90deg); transform: rotate(540deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(32) { -moz-transform: rotate(549deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(549deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(549deg) translate(5.5em) rotate(90deg); transform: rotate(549deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(33) { -moz-transform: rotate(558deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(558deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(558deg) translate(5.5em) rotate(90deg); transform: rotate(558deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(34) { -moz-transform: rotate(567deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(567deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(567deg) translate(5.5em) rotate(90deg); transform: rotate(567deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(35) { -moz-transform: rotate(576deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(576deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(576deg) translate(5.5em) rotate(90deg); transform: rotate(576deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(36) { -moz-transform: rotate(585deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(585deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(585deg) translate(5.5em) rotate(90deg); transform: rotate(585deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(37) { -moz-transform: rotate(594deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(594deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(594deg) translate(5.5em) rotate(90deg); transform: rotate(594deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(38) { -moz-transform: rotate(603deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(603deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(603deg) translate(5.5em) rotate(90deg); transform: rotate(603deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(39) { -moz-transform: rotate(612deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(612deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(612deg) translate(5.5em) rotate(90deg); transform: rotate(612deg) translate(5.5em) rotate(90deg);
}
.lock > *:nth-of-type(40) { -moz-transform: rotate(621deg) translate(5.5em) rotate(90deg); -ms-transform: rotate(621deg) translate(5.5em) rotate(90deg); -webkit-transform: rotate(621deg) translate(5.5em) rotate(90deg); transform: rotate(621deg) translate(5.5em) rotate(90deg);
}
.lock:before { content: "Master"; color: white; position: absolute; top: 1.8em; left: 0.6em; font-weight: 700; font-size: 1.05em; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.1em;
}
.container { width: 13em; height: 13em; background: #d0d0d0; margin: 19em auto 0; position: relative; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5); box-shadow: 0 0.2em 0.75em rgba(0, 0, 0, 0.5);
}
.container:after { content: ""; position: absolute; display: block; -moz-border-radius: 100% 100% 0 0; -webkit-border-radius: 100%; border-radius: 100% 100% 0 0; width: 6em; height: 7em; background: transparent; top: -6em; left: 1.5em; z-index: -1; border: 2em solid #d0d0d0; border-bottom: 0; -moz-box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5); box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5), inset 0 0.2em 0.75em rgba(0, 0, 0, 0.5);
}
.container:before { content: ""; position: absolute; display: block; width: 0.3em; height: 0.7em; background: #990000; left: 49%; top: 1.5em; z-index: 50; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; -moz-box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white; -webkit-box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white; box-shadow: inset 0 0.1em 0.1em black, inset -0.1em -0.1em 0.1em white;
}
.lock li:nth-child(5n+1) { font-weight: 700;
}
.gotFirst:before { content: "[\2713][3][7]";
}
.gotSecond:before { content: "[\2713][\2713][7]";
}
.gotThird:before { content: "Boo yah!"; font-size: 6em;
}
.gotThird .container { top: -100em; -moz-transition: all 5s; -o-transition: all 5s; -webkit-transition: all 5s; transition: all 5s; -moz-transition-delay: 1.25s; -o-transition-delay: 1.25s; -webkit-transition-delay: 1.25s; transition-delay: 1.25s; position: relative;
}
.gotThird .container.container:after { top: -7em; left: 3em; -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
}

Combination Lock - Script Codes JS Codes

var min = $(".lock").width();
var max = $(window).width();
$(window).resize(function () { var sizeNow = $(this).width(); var num1 = 37; var num2 = 3; var num3 = 7; var calc = ((sizeNow - min) / (max - min) * 360) - 360; // last number is for fine tuning var c1 = Math.round( (((num1 * 9) * max) / 360)) + 6; var c2 = Math.round( (((num2 * 9) * max) / 360) + (((max - min) * 2) + min)) - 5; var c3 = Math.round( c2 - ( (max - min) - (num3 - num2) * 9 )); $(".lock").css("-webkit-transform", "rotate(" + -calc + "deg)"); if (sizeNow === c1) { $("body").addClass("gotFirst"); } else { $("body").attr('data-content',sizeNow - c1); } if ($('body').hasClass('gotFirst')) { if (sizeNow === c2) { $("body").addClass("gotSecond"); } else { $("body").attr('data-content',sizeNow - c2); } if ($('body').hasClass('gotSecond')) { if (sizeNow === c3) { $("body").addClass("gotThird"); } else { $("body").attr('data-content',sizeNow - c3); if ($('body').hasClass("gotThird")) { } else {} } } }
});

Home Page	Home
Developer	Katy DeCorah
Username	katydecorah
Uploaded	July 28, 2022
Rating	4
Size	7,587 Kb
Views	50,600

Do you need developer help for Combination Lock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katy DeCorah (katydecorah) Script Codes

Name	Size
Map gallery	3,652 Kb
Wave	4,072 Kb
Animation Direction	4,879 Kb
Google Static Map Maker	4,072 Kb
Haml Calendar	5,643 Kb
Build a store locator with Mapbox.js	3,951 Kb
Angular Contact Form	7,343 Kb
Accordion Nav	4,490 Kb
Food by nos	3,570 Kb
END by Catt	2,970 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Css color for svg	Ademilter	2,392 Kb
Button fills	Zubfatal	5,205 Kb
Twitch Live Channels	Inkblotty	4,956 Kb
Button Option Group	Honchoman	1,859 Kb
Heatmap Color Scales	Stevepepple	2,331 Kb
Vue.js Starter	Andymerskin	1,268 Kb
CMP5-Opdracht15	SannevanGastel	2,733 Kb
Gradients	Karpovsystems	2,394 Kb
A Pen by Alex Bergin	Abergin	3,347 Kb
The Fantastic Mr Fox	MalZiiirA	10,435 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!