본문 바로가기

광고

Design

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

Reference

CSS

NEWS

SITE

Coding


광고

Code View/Animation

[Animation] 한번 클릭하면 무한으로 도는 원형 애니메이션       규칙성를 이용해서 만든 것은 아닌 것 같습니다. 만든 사람도 만들다 보니 이렇게 나온거 같습니다^^ .n1 {   animation:anim 2.10s infinite linear;   -webkit-animation:anim 2.10s infinite linear;   -moz-animation:anim 2.10s infinite linear;   ..
[Animation] 3D를 이용한 디스크 라이트 효과 애니메이션 만들기 엄청나네요^^ 저런 점들은 이렇게 표현을 했네요^^대박 ㅋㅋㅋ@keyframes shadows {0% {box-shadow: 0px 0px 0 0 rgba(255,255,255,0), 0px 25px 0 0 rgba(255,255,255,0), 0px 50px 0 0 rgba(255,255,255,0), 0px 75px 0 0 rgba(255,255,255,0), 0px 100px 0 0 rgba(255,255,255,0), 0px 125px..
[Animation] 사진찍는 폴라로이드 애니메이션 만들기 CSS3 CSS3로 이렇게 애니메이션 주니 놀라울 따름이네요~모션을 계산하는 것도 어려울 텐데^^<div id="letter">P</div><div id="description">is for Polaroid</div><div id="animation">    <div class="flash"></div>    <div class="fold..
[Animation] 여러개의 원형구조를 이용한 360도 모션 만들기 여러개의 원형구조를 이용해순차적으로 모션의 차이를 줘서 움직임을 모현한 애니메이션입니다..thing:nth-child(1) {  width: 2.08333em;  height: 2.08333em;  -moz-box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8);  -webkit-box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8..
[Animaition] 다양한 기번으로 돌리면 이런 모양으로 나오네요^ 캡쳐 이미지로는 알 수 없지만미리보기를 통해 보세요~멋진 스핀 애니메이션입니다. keyframe은 다음과 같이 설정하면 됩니다.@keyframes spin  0%    transform: rotate( 0deg ) scale(1)    border-radius: 50%  50%    transform: rotate(720deg) scale(.7)   ..
[Animation] 평면을 3D 직사각형 큐브로 만드는 transform 이 애니메이션의 핵심은/* animations */@keyframes cube-view {  20%, 90% { transform: rotateX(0deg) rotateY(0deg); }  30%, 80% { transform: rotateX(45deg) rotateY(-45deg); }}@keyframes adjust-top {  30%, 80% { left: 100%; transform: rotateZ(90deg)..
[Animation] animation을 이용한 움직이는 고양이 만들기 움직이는 고양이를 animation을 통해 만들었는데요~우선 단계별 이미지가 필요합니다. 만화를 볼 때 움직일 때마다 이미지가 필요한 것처럼 같은 원리입니다. 이런 이미지가 필요합니다.그런 다음 step을 설정하여 무한으로 반복시키면움직이는 고양이가 되죠~ See the Pen Catwalk(cycle) by Rachel Nabors (@rachelnabors) on CodePen.
[Animation] 2개의 박스를 이용한 꽃 무늬 모션 만들기 처음에 보면 신기하고 신기했습니다.소스를 한참을 보고 있으면 크게 어려운 소스는 아닙니다.우선 두개의 박스를 <div id="sweet"> <div class="intro"> <div class="outro"> <div class="intro"> <div class="outro"> <div class="intro">    &nb..