Page transition animation by javascript | JavaScript animation .
SOURCE CODE
HTML SOURCE_CODE:-
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Hover animation</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="main-container">
<button class="button">Hover over</button>
</div>
</body>
</html>
CSS SOURCE_CODE:-
* { margin: 0; padding: 0; box-sizing: content-box; } html, body { width: 100%; height: 100%; } .main-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #3091ec; color: #070606; } .button { position: relative; background-color: transparent; padding: 10px 20px; color: #ffffff; border: none; font-size: 1.9em; transform: none; cursor: pointer; } .button:after { content: ""; height: 100%; width: calc(100% + 20px); position: absolute; top: -2px; left: -10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; transition: 2s; } .button:before { content:""; height: calc(100% + 20px); width: 100%; position: absolute; top: -10px; left: -2px; border-left: 2px solid #fff; border-right: 2px solid #fff; transition: 3s; } .button:hover:before { transform: rotateY(180deg); } .button:hover:after { transform: rotateX(180deg); }
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
html,
body {
width: 100%;
height: 100%;
}
.main-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #3091ec;
color: #070606;
}
.button {
position: relative;
background-color: transparent;
padding: 10px 20px;
color: #ffffff;
border: none;
font-size: 1.9em;
transform: none;
cursor: pointer;
}
.button:after {
content: "";
height: 100%;
width: calc(100% + 20px);
position: absolute;
top: -2px;
left: -10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
transition: 2s;
}
.button:before {
content:"";
height: calc(100% + 20px);
width: 100%;
position: absolute;
top: -10px;
left: -2px;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
transition: 3s;
}
.button:hover:before {
transform: rotateY(180deg);
}
.button:hover:after {
transform: rotateX(180deg);
}
web design video My YOUTUBE channel
Tags: javascript,css,HTML,page transition,page transition tutorial,javascript tutorial,javascript page transition,smooth page transition,js page transition,js transition,smooth transition tutorial,page transition javascript,page transition css,gsap page transition,gsap animation,page transition effect,page transitions,javascript tutorials,Page transition animation by gsap,web designer,learn javascript,javascript for beginners,gsap
Comments
Post a Comment