Login(lion모양)

*JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<!doctype html>

<html>

<head>

<title>Ryan Login</title>

</head>

<body>

<%

if(request.getAttribute("login_false") !=null){

%>

alert("아이디와 비밀번호를 확인해 주세요.")

</script>

<%

}

%>

</g>

</g>

</g>

</svg>

</form>

}

</body>

</html>

</body>

</html>

*CSS

body {

background: #3d516b;

}

form {

width: 320px;

padding: 60px 25px 80px;

margin: 50px auto;

background: RGBA(255,255,255,0.2);

display: flex;

flex-direction: column;

}

svg {

width: 70%;

border-radius: 50%;

background: #fff;

margin-bottom: 40px;

align-self: center;

transform-style: preserve-3d;

}

input {

font-size: 16px;

border: 0;

border-radius: 5px;

outline: 0;

padding: 10px 15px;

margin-top: 15px;

}

@keyframes lookaway-up {

from {

transform: rotate3d(.2, 0, -.01, 20deg);

}

to {

transform: rotate3d(.2, -.05, -.01, 20deg);

}

@keyframes lookaway-down {

0% {

transform: rotate3d(-.2, 0, -.01, 20deg);

}

100% {

transform: rotate3d(-.2, -.05, .01, 20deg);

}

.ears {

transform-origin: 50% 50% 5px;

}

.eyes {

transform-origin: 50% 50% -40px;

}

.muzzle {

transform-origin: 50% 50% -44px;

}

.ears, .eyes, .muzzle {

transition: transform .5s;

}

.focused {

transition: transform .1s;

}

.look-away .ears,

.look-away .eyes,

.look-away .muzzle {

transition-duration: .3s;

animation: 3s infinite alternate;

}

.look-away.up .ears,

.look-away.up .eyes,

.look-away.up .muzzle {

transform: rotate3d(.2, 0, 0, 20deg) !important;

}

.look-away.down .ears,

.look-away.down .eyes,

.look-away.down .muzzle {

transform: rotate3d(-.2, 0, 0, 20deg) !important;

}

.look-away.playing.up .ears,

.look-away.playing.up .eyes,

.look-away.playing.up .muzzle {

animation-name: lookaway-up;

}

.look-away.playing.down .ears,

.look-away.playing.down .eyes,

.look-away.playing.down .muzzle {

animation-name: lookaway-down;

}

*JSON

(function(){

const ryan = document.querySelector('#ryan');

const face = document.querySelectorAll('.ears, .eyes, .muzzle');

const email = document.querySelector('input[type="text"]');

const password = document.querySelector('input[type="password"]');

const fauxInput = document.createElement('div');

const span = document.createElement('span');

let timer = null;

function rotate3d(x, y, z, rad) {

const value = `rotate3d(${x}, ${y}, ${z}, ${rad}rad)`;

for (let i=0; i < face.length; i++) {

face[i].style.transform = value;

}

function focus(event) {

event.target.classList.add('focused');

copyStyles(event.target);

event.target.type === 'password' ? lookAway(event) : look(event);

}

function reset(event) {

event.target.classList.remove('focused');

ryan.classList.remove('playing');

clearTimeout(timer);

timer = setTimeout( () => {

ryan.classList.remove('look-away', 'down', 'up');

rotate3d(0,0,0,0);

}, 1 );

}

function copyStyles(el) {

const props = window.getComputedStyle(el, null);

if ( fauxInput.parentNode === document.body ) {

document.body.removeChild(fauxInput);

}

fauxInput.style.visibility = 'hidden';

fauxInput.style.position = 'absolute';

fauxInput.style.top = Math.min(el.offsetHeight * -2, -999) + 'px';

for(let i=0; i < props.length; i++) {

if (['visibility','display','opacity','position','top','left','right','bottom'].indexOf(props[i]) !== -1) {

continue;

}

fauxInput.style[props[i]] = props.getPropertyValue(props[i]);

}

document.body.appendChild(fauxInput);

}

function look(event) {

const el = event.target;

const text = el.value.substr(0, el.selectionStart);

span.innerText = text || '.';

const ryanRect = ryan.getBoundingClientRect();

const inputRect = el.getBoundingClientRect();

const caretRect = span.getBoundingClientRect();

const caretPos = caretRect.left + Math.min(caretRect.width, inputRect.width) * !!text;

const distCaret = ryanRect.left + ryanRect.width/2 - inputRect.left - caretPos;

const distInput = ryanRect.top + ryanRect.height/2 - inputRect.top;

const y = Math.atan2(-distCaret, Math.abs(distInput)*3);

const x = Math.atan2(distInput, Math.abs(distInput)*3 / Math.cos(y));

const angle = Math.max(Math.abs(x), Math.abs(y));

rotate3d(x/angle, y/angle, y/angle/2, angle);

}

function lookAway(event) {

const el = event.target;

const ryanRect = ryan.getBoundingClientRect();

const inputRect = el.getBoundingClientRect();

const distInput = ryanRect.top + ryanRect.height/2 - inputRect.top;

ryan.classList.add( 'look-away', distInput < 0 ? 'up' : 'down' );

clearTimeout(timer);

timer = setTimeout( () => {

ryan.classList.add( 'playing' );

}, 300);

}

fauxInput.appendChild(span);

email.addEventListener( 'focus', focus, false );

email.addEventListener( 'keyup', look, false );

email.addEventListener( 'click', look, false );

email.addEventListener( 'blur', reset, false );

password.addEventListener( 'focus', lookAway, false );

password.addEventListener( 'blur', reset, false );

})();