티스토리 뷰



제이쿼리를 이용하면 스톱와치(Stopwatch)는 만들 수 있다.
하지만 CSS를 통해 이런걸 만든건 
상상도 할 수 없는 일이었는데요~

소스를 보니 복잡하긴 하지만 작동합니다.
대단합니다.
정말로 HTML5/CSS3의 세계는 
파고들면 파고들수록 끝이 없는 것 같네요^^



@keyframes unit { 0% { top: 0; } 100% { top: -60em; } }
@-webkit-keyframes unit { 0% { top: 0; } 100% { top: -60em; } }@keyframes centiseconds { 0% { top: 0; } 100% { top: -100em; } }
@-webkit-keyframes centiseconds { 0% { top: 0; } 100% { top: -100em; } }
.unit {    display: inline-block;    float: left;    height: 1em;    line-height: 1em;    overflow: hidden;}
.unit:after {    content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A";    
position: relative;    white-space: pre;    animation: unit steps(60) infinite;    -webkit-animation: unit steps(60) infinite;    animation-play-state:paused;    -webkit-animation-play-state:paused;}
#hours:after {    animation-duration: 216000s;    -webkit-animation-duration: 216000s;}#minutes:after {    animation-duration: 3600s;    -webkit-animation-duration: 3600s;}#seconds:after {    animation-duration: 60s;    -webkit-animation-duration: 60s;}
#centiseconds:after {    content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";    
animation: centiseconds steps(100) infinite;    -webkit-animation: centiseconds steps(100) infinite;    animation-duration: 1s;    -webkit-animation-duration: 1s;}#start:target .unit:after {    animation-play-state: running;    -webkit-animation-play-state: running;}


요게 기본 CSS 소스입니다.
핵심은 키프레임을 이용해서 만들었네요^^








댓글
댓글쓰기 폼