CSS를 사용한 애니메이션 눈

CSS3를 사용한 애니메이션 눈

이기는하지만 페이지에 애니메이션 눈을 넣다, 우리 또는 클라이언트로부터, 그것은 다른 어떤 것보다 오래된 디자인 관행처럼 들립니다. 진실은 애니메이션 이 기회에 우리가 제시하는 것은 우아한 바다입니다. 또한 JavaScript가 필요하지 않습니다. 간단합니다. CSS3.

첫 번째는 애니메이션.

꽤 좋아 보이지? 실제로 구현하려면 흰색 점이있는 세 개의 이미지를 만들고 속성을 사용하여 애니메이션을 적용하면됩니다. @키프레임 다음과 같이 CSS3의 :

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

다른 추가 다른 브라우저의 접두사, 우리 몸을 위해 확립 :

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

또한 필요한 접두사를 추가합니다. Joshua Johnson이 제공 한 자세한 설명이 포함 된 전체 절차는 그의 블로그에서 확인할 수 있습니다.

추가 정보 - CSS3 그라디언트 생성기, CSS3 그라디언트 생성기
출처- 디자인 판잣집


코멘트를 첫번째로 올려

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.