소셜로그인
CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
css3로 돌아가는 애니메이션 효과주기?
2011.12.06 13:51:50
0
조회 수 : 1164
![[레벨:30]](http://www.webmini.net/modules/point/icons/xeicon/30.gif "포인트:65109point, 레벨:30/30"){kind=icon}
빽짱구| 출처 : | http://naradesign.net/ouif/css3/documentation.html |
|---|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="웹미니" />
<title>CSS3</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.ani {-webkit-animation:webkitFire infinite 1s linear; width:100px; height:100px; background:-webkit-linear-gradient(top, #ffffff 20%,blue 100%); border:3px solid #ccc; border-radius:60px;}
.ani span {display:inline-block; width:100%; text-align:center; padding:40px 0 0;}
@-webkit-keyframes 'webkitFire' {
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="ani"><span>animation?</span></div>
</body>
</html>
위에 소스로 html를 만드시고, css3지원하는 브라우저에서 확인해보세요. (ex. 크롬, 사파리, 오페라등)
0
0
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
![[레벨:3]](http://www.webmini.net/modules/point/icons/xeicon/3.gif "포인트:620point (40%), 레벨:3/30"){kind=icon}
UI![[레벨:1]](http://www.webmini.net/modules/point/icons/xeicon/1.gif "포인트:16point (3%), 레벨:1/30"){kind=icon}
songw
대박 신기하네요.