uixu 22일차

이명진·2024년 12월 13일

애니메이션-CSS
@keyframe

 animation-name: around;
  animation-play-state:running;
  animation-iteration-count:infinite;
  animation-duration:1s;
  animation-delay:3s;

애니메이션 이름을 정하고
3초 있다가 1초동안 무한대로 움직이게 한 것

@keyframes around {
  0% {
    margin-left:0; 
  }
/*   가만히 있겠다 */

  50% {
    margin-left:100px;
  }

  100% {
    margin-left:200px;
  }
}

처음 중간 끝을 정해서 얼만큼 움직이게 할 것인지 정하기

-밑줄 애니메이션

빨간줄이 왼쪽에서 오른쪽으로 나오고 싶게 할 때
width 값을 0으로 하고 transition을 자연스럽게 주고
hover 했을 때 100으로 설정한다

<br> 태그는 떼 놓고 싶을 때
<hr>은 선까지 만들고 싶을 때

빨간줄이 가운데에서 나오고 싶게 할 때에는

.menu_1_2 > ul > li > a > span::after {
    left: 50%;
    transform: translateX(-50%);
}

공식처럼 이 방법을 쓰면 된다.
width 값이 양 옆으로 커진다.

currentcolor:
유행하는 , 색깔 따라갈 때 씀

hover 했을 때 글자 바뀌게 하기

반응형 배너
.con=container
image=inline-block