Django 포스팅
Doyeon0430 | 2023년 07월 07일
이번시간에는 CSS에 text-shadow를 이용해 네오사인 효과를 만들어보고 애니메이션을 추가하겠습니다.
총 5가지의 색상을 디자인하며 비슷한 코드에 컬러만 변경했습니다.
animation으로 shadow 키프레임을 만들고 키프레임에는 text-shadow를 from~to로 설정했습니다.
또한 애니메이션에 alternate 키워드를 추가해 2초마다 왕복시킵니다.
그럼 지금부터 포스팅을 시작하겠습니다.
첫 번째는 빨강계열 네온사인 애니메이션 효과를 만들어봤습니다.
흐림 컬러에 from에는 #d72929 / #4e020f / #bc1414를 사용했고 to에는 #d73629 / #4e020e / #bc2a14를 사용했습니다.
두 번째는 파랑계열 네온사인 애니메이션 효과를 만들어봤습니다.
흐림 컬러에 from에는 #2948d7 / #02044e / #1439bc를 사용했고 to에는 #2c29d7 / #02044e / #1418bc를 사용했습니다.
세 번째는 노랑계열 네온사인 애니메이션 효과를 만들어봤습니다.
흐림 컬러에 from에는 #d4d729 / #474e02 / #a8bc14를 사용했고 to에는 #d7c929 / #4d4e02 / #b4bc14를 사용했습니다.
네 번째는 초록계열 네온사인 애니메이션 효과를 만들어봤습니다.
흐림 컬러에 from에는 #29d736 / #024e0d / #14bc21를 사용했고 to에는 #58d729 / #024e13 / #14bc1d를 사용했습니다.
다섯 번째는 분홍계열 네온사인 애니메이션 효과를 만들어봤습니다.
흐림 컬러에 from에는 #d729b8 / #4e024a / #2014bc를 사용했고 to에는 #d729d6 / #4e0248 / #bc14ae를 사용했습니다.
글을 마치며 5가지의 디자인으로 네온사인 효과를 만들고 애니메이션을 설정해봤습니다. 긴 글 읽어주셔서 감사합니다.
댓글 (0)
간편 댓글 작성
