그림자2 CSS 바운스볼 애니메이션 만들기 (bounce ball animation) 안녕하세요! 오늘은 공이 위아래로 통통 튀는 애니메이션을 만들어 보려 합니다. 난이도가 높아지는 것을 우려하여 자바스크립트는 쓰지 않고 오로지 html과 css만을 사용하여 최대한 간단하게 만들어 보려해요! 리얼하게 튀는 효과를 주려다 보니 keyframe 쪽이 조금 복잡해 지긴했지만 그래도 css만을 이용해 구현해 보았습니다. 공이 튈때마다 그림자 크기를 늘이고 줄이면서 그림자 효과도 추가로 함께 구현해 보았습니다. 그럼 결과화면을 먼저 확인해 볼까요? 저렇게 하염없이 통통통통 계속 튀는 애니메이션 입니다! 활용은 로딩화면에서 사용해도 괜찮을 것 같고 메인화면에 포인트를 주기 위한 용도로도 사용할 수 있을 것 같아요~ 그럼 영역과 요소부터 만들어 보겠습니다. 1. 배경과 공, 그림자 요소 만들기 애니메.. 2023. 1. 9. CSS box-shadow 속성 사용방법 정리 안녕하세요! 오늘은 요소의 테두리에 그림자 스타일을 설정하는 box-shadow 속성에 대해 알아 보려고 합니다. 자주 사용하는 속성인데 내부 속성 인자 값이 많고 정확한 의미를 모르고 사용하는 경우가 많아서 정리해보려고 합니다! 속성 내부 설정 값 그림자의 위치를 설정하는 첫번째, 두번째 길이설정 값입니다. offset-x 값이 양수일 경우 오른쪽으로 그림자나 나타나고 음수일 경우 왼쪽으로 그림자가 표시됩니다. offset-y 값이 양수일 경우 아래쪽으로 그림자나 나타나고 음수일 경우 위쪽으로 그림자가 표시됩니다. 그림자 테두리의 흐린 정도를 나타내는 세번째 길이설정 값입니다. 이 값이 클 수록 그림자 크기는 더 커지고 색은 더 밝아 집니다. 음수 값은 사용할 수 없고, 기본값은 0으로 설정하지 않을 .. 2022. 12. 28. 이전 1 다음