반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 CSS Animation 효과

2011. 12. 15. 05:21 | Posted by 솔웅


제가 이 글을 회사에서도 올리고 집에서도 올리고 해서 파일 이름이 헛갈리네요.

오늘도 예전처럼 간단한 html 을 준비해 두시구요. (이름은 여러분들이 정하세요.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main06.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

main06.css를 아래와 같이 준비하세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:yellow;
    outline:7px solid red;
    -webkit-transform:scale(-1,1)
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}

이제 css를 이용한 animation 효과를 다뤄보겠습니다.
css 파일에 아래 내용을 추가해 보세요.
#box:hover{
    -webkit-transform:rotate(45deg);
}

이렇게 하면 보여드릴 수는 없지만 저 박스에 마우스를 갖다 대면 45도로 박스가 기웁니다.
제 경우에 이 기능은 크롬 브라우저에서만 작동합니다. 아마 다른 브라우저들도 최신버전에서는 작동될지 모르겠습니다.
코드를 보면 box에 마우스를 올리면 45도 돌리라고 돼 있죠? 이렇게 만 하면 마우스가 box에서 벗어나면 다시 제자리로 자동으로 돌아오네요.

이것만해도 약간의 애니메이션 기능이 됐는데요. 좀 더 그럴듯한 효과가 있습니다.
#box 안에 (#box:hover가 아니라) 아래 코드를 넣으세요.
    -webkit-transition:-webkit-transform 2s;

이렇게 하면 45도로 기울이는 동작을 2초에 걸쳐서 하게 됩니다. 그러니까 아주 부드럽게 움직이게 되죠.
한번 직접 해 보세요. 아주 그럴듯 할 겁니다.

하기 전에 css파일을 아래와 같이 만들어 주세요.
body{
    text-align:center;
}
#box{
    display:block;

}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}
#box:hover{
   
}

그리고 #box 안에 아래 코드를 추가하세요.
    margin:150px auto;
    color:#ffffff;
    -webkit-border-radius:10px;
    opacity:0.6;
    background:red;
    width:120px;
    height:75px;

이러면 브라우저에 위와 같은 박스가 뜰 거예요.
여기서 부터 그럴 싸한 애니메이션을 시작할 께요.

그럼 #box 안에 이어서 아래 코드를 넣어 보세요.
    -webkit-transition:-webkit-transform 2s, opacity 2s, background 2s, width 2s, height 2s;

아까 다뤘던거도 있고 그렇지 않은 것도 있죠?
이 의미는 transform이 일어날 때 2초동안 일을 처리하고 투명도,배경,너비,높이 변화도 모두 2초동안 일을 진행하라는 의미입니다.

이제 hover에 위 조건들을 변화시키라는 명령만 하면 됩니다.

이제 #box:hover 안에 아래와 같이 코드를 넣으세요.
    -webkit-transform:rotate(360deg);
    opacity:1;
    background:#1ec7e6;
    width:450px;
    height:110px;

그리고 실행을 해 보세요.
애니메이션 기능이라 캡쳐화면을 넣기 어려운데요.
직접 한번 돌려보세요. 애니메이션 기능에 아주 만족하실 거예요.
2초동안 투명도, 배경색, 너비, 높이가 부드럽게 회전하면서 변할겁니다. (마우스를 올리면요.)
플래시로 한 것 같은 효과 아니예요? 자바스크립트로 한 것도 아니고 그냥 CSS로만으로도 이런 기능이 가능하다고 하니 대단하네요.

전체소스코드는 위에 있습니다.
다음엔 자바스크립트 쪽을 공부해 볼께요.

HTML5로 모바일 게임을 만드는 그날까지 쭉~~~~~



반응형

Comment

  1. 질문요 2012.04.25 18:39

    html5에 대한 강의 매번 잘보고있습니다.
    좋은 강의 앞으로도 부탁드립니다 ㅎㅎ

  2. 엽이 2012.05.16 21:32

    이번 강좌편은 정말이지 놀라울따름이네요 ㅎㅎ
    잘 봤습니다.

    • 솔웅 2012.05.21 05:02 신고

      예 HTML5에는 기존이 HTML 에서는 생각할 수 없는 획기적인 기능이 많이 들어간 것 같애요.

  3. 질문요~ 2012.10.03 08:01

    강의 매번 잘 보고있습니다
    위 회전 효과의 경우
    박스는 가만히 있고,

    hover이 아닌 클릭시
    글씨만 회전하려면 어떻게 해야 합니까??

    아무리 해도 잘 모르겠습니다 ㅠㅜ