개발/css
-
@keyframes를 활용한 애니메이션 주기개발/css 2024. 9. 12. 20:58
다음은 좌우 이동 애니메이션 예제다artist { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; } @keyframes mymove { from {left: 0px;} to {left: 400px;} } mymove라는 애니메이션을 5초 사이클의 애니메이션이 무한정 반복되는 코드다.mymove는 5초 동안 왼쪽 0px에서 오른쪽 400px까지 이동하고, 애니메이션이 끝나면 다시 0px로 순간 이동한 후에 다시 시작한다.그래서 애니메이션이 끝날 때마다 순간적으로 제자리로 돌아가고, 그걸 무한히 반복한다. 만약 이런 순간 이동이 어..
-
text-shadow의 인자값을 알아보자개발/css 2024. 9. 12. 20:43
text-shadow: 2px 2px 5px red;다음과 같은 text-shadow 코드가 있다고 해보자 첫번째 2px은 그림자의 X축 오프셋이다. 텍스트를 기준으로 가로 방향으로 그림자가 얼마나 이동할지를 결정한다.양수면 오른쪽으로, 음수면 왼쪽으로 그림자가 이동한다. 두번째 2px은 그림자의 Y축 오프셋이다. 양수면 아래로, 음수면 위로 그림자가 이동한다. 세번째 5px은 그림자의 블러 반경이다. 이 값이 클수록 그림자가 흐릿해진다. 네번째값인 red는 그림자의 색상이다.