애니메이션 코딩은
stylie 들어가서 하면 된다.
.mouse-animation li {
width: 250px;
background-color: #000000;
padding: 20px;
border-top: solid 5px #dfdfdf;
transition: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover {
opacity: 0.5;
margin-left: 10px;
}
.mouse-animation li a {
color: #ffffff;
font-size: 20px;
}
글자에도 다 opacity가 적용 그래서
background-color: #000000;
를
background-color: rgba();
를 적용한다.
.mouse-animation li {
width: 250px;
background-color: rgba(0, 0, 0, 1);
padding: 20px;
border-top: solid 5px #dfdfdf;
transition: opacity 0.5s, margin-left 0.5s;
}
.mouse-animation li:hover {
background-color: rgba(0, 0, 0, 0.5);
margin-left: 10px;
}
.mouse-animation li a {
color: red;
font-size: 20px;
}
이렇게 하면 레드 빼고 rgba 검은색 영역만 1->0.5로 바뀐다.
애니메이션 기능을 배우고 있다.
박스가 계속 변하면서 움직여야 되는데 지금 상하로밖에 안 움직여서 오류를 찾아봐야겠다.
