코드랩 레퍼런스
Rotate Bar 본문
See the Pen Rotate Bar by Webstoryboy (@webstoryboy) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style>
body {
height: 100vh;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bar {
width: 5px; height: 400px;
background-color: #fff;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
animation: bar 2s ease-in-out 100;
}
@keyframes bar {
0% {height:0; transform: rotate(0deg);}
30% {height:400px; transform: rotate(0deg); }
70% {height:400px; transform: rotate(180deg);}
100% {height:0; transform: rotate(180deg);}
}
</style>
</head>
<body>
<div class="bar"></div>
</body>
</html>
Share
Ad
Comments