๐์ ๋๋ฉ์ด์ ๋ฉ๋ด ํ ๊ธ ๋ฒํผ | HTML CSS ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ
8249 ๋จ์ด csshtmlbeginnersjavascript
์์ค ์ฝ๋:
๊ฐ๋จํ ๋งํฌ์ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Menu Toggle Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
<script src="app.js"></script>
</body>
</html>
๊ทธ๋ฐ ๋ค์ ๋ช ์ค์ CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e9ecef;
}
.toggle{
position: relative;
width: 70px;
height: 70px;
background: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
}
.toggle span{
position: absolute;
width: 40px;
height: 4px;
background: #4263eb;
border-radius: 4px;
transition: 0.5s;
}
.toggle span:nth-child(1){
transform: translateY(-15px);
width: 25px;
left: 15px;
}
.toggle.active span:nth-child(1){
width: 40px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.toggle span:nth-child(2){
transform: translateY(15px);
width: 15px;
left: 15px;
}
.toggle.active span:nth-child(2){
width: 40px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.25s;
}
.toggle.active span:nth-child(3){
transform: translateX(60px);
}
YouTube์์ ํ๋ก์ฐํ์ธ์.
https://bit.ly/3oBQbc0
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐์ ๋๋ฉ์ด์ ๋ฉ๋ด ํ ๊ธ ๋ฒํผ | HTML CSS ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/robsonmuniz16/animated-menu-toggle-button-html-css-javascript-296aํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค