저 버튼 소스코드를 까보기로했다.
소스 코드가 필요하신 분들을 위해.
더보기
출처
https://codepen.io/jasperlachance/pen/yOJdRr
html
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="lines line-1"></span>
<span class="lines line-2"></span>
<span class="lines line-3"></span>
</label>
<a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
<a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
<a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
<a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
<a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>
css
body {
padding: 0;
margin: 0;
background: #596778;
color: #EEEEEE;
text-align: center;
font-family: "Lato", sans-serif;
}
@media screen and (max-width: 700px) {
body {
padding: 170px 0 0 0;
width: 100%
}
}
a {
color: inherit;
}
.menu-item,
.menu-open-button {
background: #EEEEEE;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: #FFFFFF;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.lines {
width: 25px;
height: 3px;
background: #596778;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.line-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.line-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.line-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .line-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .line-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .line-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
font-size: 26px;
}
/* .menu-item {
transition: all 0.1s ease 0s;
} */
.menu-item:hover {
background: #EEEEEE;
color: #3290B1;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 180ms;
-webkit-transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 280ms;
-webkit-transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 380ms;
-webkit-transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 480ms;
-webkit-transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
transition-duration: 580ms;
-webkit-transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
transition-duration: 680ms;
-webkit-transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
transition-duration: 780ms;
-webkit-transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}
.blue {
background-color: #669AE1;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.blue:hover {
color: #669AE1;
text-shadow: none;
}
.green {
background-color: #70CC72;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.green:hover {
color: #70CC72;
text-shadow: none;
}
.red {
background-color: #FE4365;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.red:hover {
color: #FE4365;
text-shadow: none;
}
.purple {
background-color: #C49CDE;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.purple:hover {
color: #C49CDE;
text-shadow: none;
}
.orange {
background-color: #FC913A;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.orange:hover {
color: #FC913A;
text-shadow: none;
}
.lightblue {
background-color: #62C2E4;
box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.lightblue:hover {
color: #62C2E4;
text-shadow: none;
}
.credit {
margin: 24px 20px 120px 0;
text-align: right;
color: #EEEEEE;
}
.credit a {
padding: 8px 0;
color: #C49CDE;
text-decoration: none;
transition: all 0.3s ease 0s;
}
.credit a:hover {
text-decoration: underline;
}
얼마나 힘들까..
우선 소름 돋았던게 뭐냐면 아래 버튼속 햄버거 모양은 이미지가 아니라 span으로 만들어준 것이였다.
그래서 해당 span을 회전 시켜서 x 버튼으로 만드는 것이다. css 코드는 다음과 같다.
배운점
hover 했을때 버튼이 좀 더 동적으로 커졌다 작아졌다하게 해준다.
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
여튼 그게 문제가 아니고.
저 거리를 줄여야한다.
형광펜 친 부분을 조정해주자!
조금 그럴싸해진 모습이다. 근데 너무 알록달록해서 정신이 없네 ㅎㅎ..
ㅋㅋㅋㅋ 너무 귀엽다.
다음과 같은 모양이 되었는데.. 마이크 음소거 기능을 넣어야한다. 근데 디자인나온것은 마이크 이미지는 없다. 엌엌..
그래서 Flaticon 에서 찾아보기로 했다.
짜잔! 🎉
'공부기록 > 웹 개발' 카테고리의 다른 글
How Browser Works - 어떻게 브라우저는 동작하나. (0) | 2022.07.08 |
---|---|
img 태그 vs background-image (0) | 2022.07.08 |
hello skin 사이드바 크기가 이상할때 (0) | 2022.07.02 |
인스타그램 like animation (3) | 2022.06.13 |
유용한 엑스 특수문자, 문자 사이트 (0) | 2022.05.31 |