웹 서핑을 하다보면 아래와 같은 아래와 같은 애니메이션이 있는 블로그를 본 적이 있을 것입니다. 블로그의 제목 애니메이션, 블로그 헤더 애니메이션, 블로그 이름 제목의 움직이는 애니메이션 효과로 색상과 함께 누구든 쉽게 변경할 수 있습니다.
적용하기
먼저 테마 편집으로 이동하여 HTML 편집을 선택합니다. 그런 다음 코드를 찾아보고</head>, 찾지 못했다면 아마도 이렇게 구문 분석되었을 수도 있습니다 <!--<head>--><head>.그리고 이 코드를 바로 위에 복사하여 붙여넣으세요 </head>.
- 먼저 테마 편집으로 이동하여 HTML 편집을 선택합니다.
</head>코드를 찾습니다. 찾지 못했다면 아마도 이렇게<!--<head>--><head>구문 분석되었을 수도 있습니다.- 찾았다면
</head>코드 바로 위에 아래 코드를 복사하여 붙여넣으세요. - 다음으로, 코드를 찾아
<div class='headerInner'>추가하면id='titleanimation'다음과 같습니다.
<style type="text/css">
/* Title Animation Css */
#titleanimation{position:relative}#titleanimation:before,#titleanimation:after{content:"";position:absolute;top:50%;width:3%;height:100%;transform:translateY(-50%);background:#ff1a94;z-index:1}#titleanimation:before{left:155%;animation:light-left 1.8s infinite alternate linear}#titleanimation:after{right:-55%;animation:light-right 3.0s infinite alternate linear}@keyframes light-left{0%{left:85%;opacity:0}50%{left:40%;opacity:1}100%{left:50%;opacity:0}}@keyframes light-right{0%{right:80%;opacity:0}50%{right:100%;opacity:1}100%{right:0%;opacity:0}}
</style>
<div class='headerInner' id='titleanimation'>
데모
정상적으로 작동한다면 헤더 제목 애니메이션은 다음과 같습니다.
결론
해당 게시물은 헤더에 제목 애니메이션을 만드는 방법에 관한 것입니다. 누구나 손쉽게 사용할 수 있으며 다양한 곳에 활용할 수 있습니다. 또한 올바른 애니메이션을 선택하는 것은 어려울 수 있습니다. 모든 애니메이션이 모든 디자인에서 잘 작동하는 것은 아니며 CSS 텍스트 효과도 과도하게 사용하지 않는 것이 좋습니다.