[Css] 위아래로 움직이는 사진,그림,이미지 만들기 & 예제

 

 

 

 

 

움직이는 사진,그림,글자 만들기

정적인 글자,그림(사진)에 동적인 효과를 주면 어떨까?

 

글쓰기 에디터는 글자나 이미지에 동적인 움직임을 주는 기능이 없는 정적임만이 존재하지만 간단한 코드 단 몇 줄로 텍스트 또는 이미지 등 모든 요소에 동적인 힘을 실어줄 수 있다.

 

 

 

이번 주제 강의 포인트

 

이번 주제 강의 포인트는 css 속성인 animation과 keyframes에 있다.

 

 

 

 

animation과 @keyframes 사용법

 

예를들어 그림에 동적인 효과를 주려면 그림 요소에 animaton속성을 주어야한다.

 

animation : up-down 1.4s infinite ; 

    속성   : 키프레임  초단위  반복

 

이런 식으로 3가지 이상 속성효과를 적용할 수 있다.

 

그리고 빨간 밑줄로 표시된 키프레임은 앞에 @를 써서 애니메이션 효과가 적용될 수 있도록 한다.

 

@keyframes up-down { }

 

직접 아래 코드를 보면 어떤 식으로 적용해야하는지 감이 올 것이다.

 

 

 

 

활용 예제

 

 

이 글을 흥미롭게 보셨다면
좋아요 또는 구독 감사합니다!!

 

 

코드 적용하기

<style>   .box{   width: 100%;   height: 120px;   text-align: center;   color: #E62200;   max-width: 300px;   border: solid 10px #ffa23c;   background: #fff;   border-radius: 15px;   padding-top: 30px;   animation: up-down 1.4s infinite ease-in-out alternate; } @keyframes up-down{   from{     transform: translatey(0px);   }   to{     transform: translatey(-20px);   } } </style> <div class="box"> 내용 </div>

 

 

 

활용 예

이것은 블로그에서도 다양한 쓰임새로 활용이 가능하다.

본문에 삽입을 하므로써 이목을 끌거나 재미요소로 모양을 사각형이 아닌 말풍선모양 등 여러 형태로 변형하여 다양한 용도로 사용될 수 있다. 

 

 

좋아요💙 구독💖 감사합니다.//////////////////////////문의는 댓글 남겨주세요.///////////////////////////////////////