본문 바로가기

광고

Design

Reference

Tutorial

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

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; -ms-animation:anim 2.10s infinite linear; -o-animation:anim 2.10s infinite linear; } .n2 { animation:anim 2.12s infinite linear; -webkit-animation:anim 2.12s infinite linear; -moz-animation:anim 2.12s infinite..
[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 0 0 rgba(255,255,255,0), 0px 150px 0 0 rgba(255,255,255,0), 0px 175px 0 0 rgba(255,255,255,0), 0px 200px 0 0 rgba(255,255,255,0), 0px 225px 0 0 rgb..
[Animation] 사진찍는 폴라로이드 애니메이션 만들기 CSS3 CSS3로 이렇게 애니메이션 주니 놀라울 따름이네요~모션을 계산하는 것도 어려울 텐데^^ Pis for Polaroid Polaroid 이게 기본 틀인데~~참...대단하네요~ [미리보기] See the Pen P - Polaroid by Alex Bergin (@abergin) on CodePen.
[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); box-shadow: inset 0 0 0 17px rgba(255, 166, 77, 0.8); animation: spin 10s 0.2s infinite alternate;}.thing:nth-child(2) { width: 4.16667em; height: 4.16667em; -moz-box-s..
[Animaition] 다양한 기번으로 돌리면 이런 모양으로 나오네요^ 캡쳐 이미지로는 알 수 없지만미리보기를 통해 보세요~멋진 스핀 애니메이션입니다. keyframe은 다음과 같이 설정하면 됩니다. @keyframes spin 0% transform: rotate( 0deg ) scale(1) border-radius: 50% 50% transform: rotate(720deg) scale(.7) border-radius: 100% 100% transform: rotate( 1440deg ) scale(1) border-radius: 100% @keyframes spin-child1 0% transform: rotate( 0deg ) scale(1) 50% transform: rotate(700deg) scale(.7) 100% border-radius: 50% trans..
[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) translateZ(0px); } 40%, 70% { left: 0; transform: rotateZ(45deg) translateZ(50px); }} @keyframes adjust-bottom { 30%, 80% { right: 100%; transform: rotateX(0deg) r..
[Animation] animation을 이용한 움직이는 고양이 만들기 움직이는 고양이를 animation을 통해 만들었는데요~우선 단계별 이미지가 필요합니다. 만화를 볼 때 움직일 때마다 이미지가 필요한 것처럼 같은 원리입니다. 이런 이미지가 필요합니다.그런 다음 step을 설정하여 무한으로 반복시키면움직이는 고양이가 되죠~ See the Pen Catwalk(cycle) by Rachel Nabors (@rachelnabors) on CodePen.
[Animation] 2개의 박스를 이용한 꽃 무늬 모션 만들기 처음에 보면 신기하고 신기했습니다.소스를 한참을 보고 있으면 크게 어려운 소스는 아닙니다.우선 두개의 박스를 이런 식으로 구성한 뒤 -webkit-animation: rounddd 8s linear infinite; animation: rounddd 8s linear infinite; transition: border-radius 0.3s linear; 애니메이션을 설정하면 됩니다.^^창의성이 돋보이네요~ [미리보기] See the Pen juEkL by Ian (@ianhislopdesign) on CodePen.