이기는하지만 페이지에 애니메이션 눈을 넣다, 우리 또는 클라이언트로부터, 그것은 다른 어떤 것보다 오래된 디자인 관행처럼 들립니다. 진실은 애니메이션 이 기회에 우리가 제시하는 것은 우아한 바다입니다. 또한 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 그라디언트 생성기
출처- 디자인 판잣집