반응형 CSS3 위로 튀는 글자, 팝업 텍스트(css - keyframes) keyframes를 활용한 애니메이션으로 글자가 하나씩 위로 팝업을 하고 되돌아오는 효과이다. 여기에서 포인트는 popup anmation의 20%지점에서 top:0px을 넣었다는 점과, animation-direction:alternate를 썼다는 것이다. alternate의 경우에는 애니메이션이 끝나면 반대로 다시 돌아가는 역할을 한다. 세 일 중 아래는 예제로 만든 구동 예시이다. 세일중 글자가 하나씩 팝업 세 일 중 2021. 5. 11. 움직이는 차선 (css, javascript) 아래홈페이지의 첫 페이지에 나오는것을 참조하며 만들어보았다. www.amoeba.co.kr/drive/self amoeba www.amoeba.co.kr 내부에 있는 li tag안에 다른 태그를 넣어서 움직이게 한것을 따라했는데, 나머지 다른 인터렉티브하게 보이는 부분들도 많이 연습하며 시간을 보내봐야겠다. 사용된 전체 코드는 아래에 첨부 When self-driving cars become safer than human-driven cars 2021. 5. 11. 원 움직임 애니메이션 효과 (css-keyframes) css에서 animation이라는 속성을 사용하면 keyframes를 적용할 수 있다. keyframes에서는 각 프레임마다 어떤 변화가 있을지 적으면 되는데, 아래는 서서히 커졌다가 작아지는 keyframes를 작성한 것이다. @keyframes icon-line{ 0%{width:60px; height:60px} 60%{width:80px; height:80px;} 100%{width:44px; height:44px;} } 아래는 keyframes를 적용한 원 크기와 text의 opacity를 바꿔 애니메이션을 표현한 css이다. 영역1 TEXT1 hover text1 TEXT2 hover text2 TEXT3 hover text3 2021. 5. 10. 이전 1 다음 728x90