분류
javascript
비밀번호가 맞지 않으면 자물통이 흔들리는 재미있는 애니입니다.
본문
https://codepen.io/amit7soni/pen/YGqJLr
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
HTML :
<div class="wrapper">
<img src="https://s5.postimg.cc/9fbjl0kh3/user_pic.jpg" alt="" class="user-img" />
<h3>R K</h3>
<form action="#" method="#">
<div class="pass-feild">
<img src="https://cdn1.iconfinder.com/data/icons/mini-solid-icons-vol-2/16/51-256.png" alt="" class="ip-pass-icon" />
<input type="password" maxlength="10" name="pass" placeholder="Password" class="ip-pass" value=""/>
<div class="fake-pass">
<!--<span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>-->
</div>
</div>
<input type="button" class="ip-btn" value="Login"/>
<h6>Enter any Password & click Login</h6>
<span class="hor-line"></span>
</form>
</div>
<!-- Start Credit -->
<div class="credit">
Inspired By
<a href="https://dribbble.com/shots/1486292-Login-Kick-the-wrong-password-away" target="_blank">
<img src="https://s5.postimg.cc/xkc92q4rr/Logo.png" alt="Dribbble Logo" class="d-logo" />
</a>
</div>
<!-- End Credit -->
CSS :
* {
margin: 0;
padding: 0;
outline: none;
}
html {
height: 100%;
background-color: #4D4339;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF4D4339', endColorstr='#FF362F2A');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIzMSUiIHN0b3AtY29sb3I9IiM0ZDQzMzkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNjJmMmEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-radial-gradient(center, ellipse cover, #4d4339 31%, #362f2a 100%);
background-image: -webkit-radial-gradient(center, ellipse cover, #4d4339 31%, #362f2a 100%);
background-image: radial-gradient(ellipse cover at center, #4d4339 31%, #362f2a 100%);
}
body {
font-family: Verdana;
color: #66594d;
}
div.wrapper {
position: relative;
width: 340px;
height: 467px;
background: #EAE4DA;
margin: 25px auto;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
-moz-box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.7);
text-align: center;
}
div.wrapper .user-img {
width: 120px;
height: 120px;
margin-top: 35px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 8px solid #f7efee;
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
}
div.wrapper h3 {
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
margin-top: 20px;
}
div.wrapper form {
margin-top: 30px;
}
div.wrapper form div.pass-feild {
position: relative;
}
div.wrapper form img.ip-pass-icon {
position: absolute;
width: 24px;
opacity: 0.2;
margin: 16px;
z-index: 999;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center;
}
div.wrapper form .ip-pass-icon-anim {
-moz-animation: swingLock 2s ease forwards;
-webkit-animation: swingLock 2s ease forwards;
animation: swingLock 2s ease forwards;
}
div.wrapper form input.ip-pass {
width: 180px;
padding: 10px 30px;
padding-left: 44px;
padding-bottom: 11px;
font-size: 31px;
letter-spacing: 1px;
color: #51514d;
background-color: #fffaf2;
border: 1px solid #bebab2;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
}
div.wrapper form div.fake-pass.show:before {
-moz-animation: showWp 0.3s ease forwards;
-webkit-animation: showWp 0.3s ease forwards;
animation: showWp 0.3s ease forwards;
}
div.wrapper form div.fake-pass {
position: absolute;
display: none;
top: 3px;
left: -2px;
margin-left: 89px;
padding-top: 21px;
padding-left: 3px;
background: #fffaf2;
width: 205px;
height: 32px;
text-align: left;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
div.wrapper form div.fake-pass:before {
position: absolute;
content: "Wrong Password";
font-size: 18px;
color: #cc3a22;
opacity: 0;
margin-left: -2px;
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
div.wrapper form div.fake-pass .dot {
position: relative;
width: 11px;
height: 11px;
background: #51514d;
margin-right: 0.429em;
top: -3px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
display: inline-block;
}
div.wrapper form div.fake-pass .dot-anim {
-moz-animation: kickPassword 0.3s 0.3s ease-out forwards;
-webkit-animation: kickPassword 0.3s 0.3s ease-out forwards;
animation: kickPassword 0.3s 0.3s ease-out forwards;
}
div.wrapper form input.ip-btn {
width: 258px;
padding: 12px 40px;
margin-top: 20px;
font-size: 21px;
background: #cb7446;
border: 1px solid #a2592c;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
font-weight: lighter;
color: #fff;
text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}
div.wrapper form input.ip-btn:hover {
background: #b2653c;
cursor: pointer;
}
div.wrapper form h6 {
font-size: 9px;
margin-top: 10px;
color: rgba(0, 0, 0, 0.5);
}
div.wrapper form span.hor-line {
position: relative;
width: 100%;
height: 1px;
background: #ccc7bd;
border-bottom: 1px solid #fff7eb;
display: block;
margin-top: 25px;
text-align: center;
}
div.wrapper form span.hor-line:after, div.wrapper form span.hor-line:before {
position: absolute;
content: "";
width: 30px;
height: 2px;
left: 50%;
margin-left: -15px;
background: #f5efe7;
border-bottom: 1px solid #ccc7bd;
display: block;
}
div.wrapper form span.hor-line:before {
top: 20px;
}
div.wrapper form span.hor-line:after {
top: 30px;
}
@-moz-keyframes kickPassword {
0% {
-moz-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
}
50% {
-moz-transform: translate(50px, -10px) scale(1.5, 1);
transform: translate(50px, -10px) scale(1.5, 1);
opacity: 1;
}
100% {
-moz-transform: translate(220px, 25px) scale(2.5, 1);
transform: translate(220px, 25px) scale(2.5, 1);
opacity: 0;
}
}
@-webkit-keyframes kickPassword {
0% {
-webkit-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
}
50% {
-webkit-transform: translate(50px, -10px) scale(1.5, 1);
transform: translate(50px, -10px) scale(1.5, 1);
opacity: 1;
}
100% {
-webkit-transform: translate(220px, 25px) scale(2.5, 1);
transform: translate(220px, 25px) scale(2.5, 1);
opacity: 0;
}
}
@keyframes kickPassword {
0% {
-moz-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
-webkit-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
}
50% {
-moz-transform: translate(50px, -10px) scale(1.5, 1);
-ms-transform: translate(50px, -10px) scale(1.5, 1);
-webkit-transform: translate(50px, -10px) scale(1.5, 1);
transform: translate(50px, -10px) scale(1.5, 1);
opacity: 1;
}
100% {
-moz-transform: translate(220px, 25px) scale(2.5, 1);
-ms-transform: translate(220px, 25px) scale(2.5, 1);
-webkit-transform: translate(220px, 25px) scale(2.5, 1);
transform: translate(220px, 25px) scale(2.5, 1);
opacity: 0;
}
}
@-moz-keyframes swingLock {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-moz-transform: rotate(40deg);
transform: rotate(40deg);
}
20% {
-moz-transform: rotate(-50deg);
transform: rotate(-50deg);
}
30% {
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-moz-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
60% {
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-moz-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
90% {
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
100% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes swingLock {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
20% {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
30% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
60% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
90% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swingLock {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
20% {
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
30% {
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
60% {
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
90% {
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes showWp {
0% {
opacity: 0;
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-moz-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@-webkit-keyframes showWp {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes showWp {
0% {
opacity: 0;
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
::-webkit-input-placeholder {
position: relative;
font-size: 18px;
top: -5px;
}
::-moz-input-placeholder {
position: relative;
font-size: 18px;
top: -5px;
}
::-moz-placeholder {
position: relative;
font-size: 18px;
top: -5px;
}
::-o-input-placeholder {
position: relative;
font-size: 18px;
top: -5px;
}
::-ms-input-placeholder {
position: relative;
font-size: 18px;
top: -5px;
}
/* Start Credit Style */
div.credit {
position: absolute;
padding: 0px 10px;
padding-bottom: 8px;
height: 15px;
right: 10px;
top: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0.6);
font-size: 7px;
font-weight: bold;
color: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
box-shadow: 0px 10px 15px -15px rgba(0, 0, 0, 0.3);
cursor: default;
}
div.credit:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
}
div.credit img {
position: relative;
width: 14px;
margin-left: 3px;
top: 4px;
}
/* End Credit Style */
JS :
//$(".ip-pass").focus();
$(".ip-btn").on("click", function() {
//$(".fake-pass .dot").addClass("dot-anim");
var _dotString = "",
_delay = 0,
_totalDuration = 0;
var _passLength = $(".ip-pass").val().length;
_passLength = (_passLength > 10) ? 10 : _passLength;
for (var i = 0; i < _passLength; i++) {
_dotString += "<span class='dot'></span>";
}
setTimeout(function() {
$(".fake-pass").html(_dotString).show();
$(".ip-pass").val("");
$(".ip-pass-icon").addClass("ip-pass-icon-anim");
$(".fake-pass .dot").each(function(i) {
_totalDuration += (i * 30) + 300;
if (i != 0) {
_delay = (i * 0.03) + 0.3 + "s";
$(this).css("animation-delay", _delay);
}
}).addClass("dot-anim");
}, 700);
setTimeout(function(){
$("div.fake-pass").addClass("show");
$(".fake-pass").html("");
$(".fake-pass .dot").removeClass("dot-anim");
setTimeout(function(){
$("div.fake-pass").fadeOut("slow",function(){
$(this).removeClass("show");
$(".ip-pass-icon").removeClass("ip-pass-icon-anim");
$(".ip-pass").focus();
});
},800)
}, 1700);
});
- 이전글비밀번호 변경에 유용한 스크립트 18.06.25
- 다음글Vue.js를 활용한 강력한 패스워드 발생기 18.06.25