반응형
제가 이 글을 회사에서도 올리고 집에서도 올리고 해서 파일 이름이 헛갈리네요.
오늘도 예전처럼 간단한 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로 모바일 게임을 만드는 그날까지 쭉~~~~~
오늘도 예전처럼 간단한 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);
}
제 경우에 이 기능은 크롬 브라우저에서만 작동합니다. 아마 다른 브라우저들도 최신버전에서는 작동될지 모르겠습니다.
코드를 보면 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로만으로도 이런 기능이 가능하다고 하니 대단하네요.
전체소스코드는 위에 있습니다.
10th.html
main06.css다음엔 자바스크립트 쪽을 공부해 볼께요.
HTML5로 모바일 게임을 만드는 그날까지 쭉~~~~~
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript (2) | 2011.12.19 |
|---|---|
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2) | 2011.12.18 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0) | 2011.12.17 |
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
| JavaScript 맛보기 (0) | 2011.12.16 |
| HTML5 CSS Text shadow, translate 효과 등등 (0) | 2011.12.14 |
| CSS3 Rounded Corner, 그림자 효과 사용하기 (0) | 2011.12.12 |
| webkit-box 좀 더 알아보기 (Flexible Box Model) (6) | 2011.12.10 |
| HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |
| HTML5 화면 Layout 잡기 -1 (6) | 2011.12.09 |