css3를 이용한 애니메이션 시계 Html _ Css
2011.12.12 16:55 Edit
우연히 웹 서핑을 하던중 css3속성에 있는 animation이란 속성을 알게 되었습니다. 이 속성으로 "시계를 만들어 볼까" 라는 생각이 문득 들어서 아주간단한 시계를 만들어 봤습니다.
소스는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
* {padding:0; margin:0}
.ani {position:relative; width:500px; height:500px; border:3px solid #ccc; border-radius:300px;}
.t span {position:absolute; z-index:2; font-family:arial; font-size:20px; font-weight:bold;}
.m_12 {top:10px; left:240px;}
.m_3 {top:250px; left:480px;}
.m_6 {top:470px; left:250px;}
.m_9 {top:250px; left:10px;}
.ani .line span {position:absolute; top:250px; display:inline-block; height:2px;}
.ani .line span.h { -webkit-animation:webkitFire infinite 36000s linear; width:200px; left:150px; background:-webkit-linear-gradient(left, #ffffff 40%,#f16f3b 100%);}
.ani .line span.m {-webkit-animation:webkitFire infinite 3600s linear; width:300px; left:100px; background:-webkit-linear-gradient(left, #ffffff 40%,#2797d6 100%);}
.ani .line span.s { -webkit-animation:webkitFire infinite 60s linear; width:500px; left:0px; background:-webkit-linear-gradient(left, #ffffff 40%,#3b6f16 100%);}
@-webkit-keyframes 'webkitFire' {
from{-webkit-transform:rotate(-90deg);}
to{-webkit-transform:rotate(270deg);}
}
</style>
</head>
<body>
<div class="ani">
<div class="t">
<span class="m_3">3</span>
<span class="m_6">6</span>
<span class="m_9">9</span>
<span class="m_12">12</span>
</div>
<div class="line">
<span class="h"></span><span class="m"></span><span class="s"></span>
</div>
</div>
</body>
</html>
여기서 중요한 것은 animaition속성을 통해 움직이는 시간을 조절할 수 있으며, 움직임의 시작점과 끝을 줄수 있다는 것입니다.
이 소스를 이용하여 만든 파일은 http://nkkim.liamsong.me/css3_ani.html 에서 확인하실 수 있습니다.
- Tag :
- css3 , css3 animation , transform , rotate
