Snow drop animation Css3

こんにちはみんな様、クリスマスがそろそろ近づいて、私はその雰囲気に溶け込むために雪片を降る効果を持つcssアニメーションについての少しのヒントを共有したいと思います。

#Let's start!

#Images:
コンテキストに適した背景を選択してください：私はこれを選びます：

次に、いくつかの雪片イコンを選択します。私は常にHTMLコードを使用します。

#Styles:
次に、一般的なスタイル

• {margin:0; padding:0;}
  html, body {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  font-size: 1.5em;
  overflow: hidden;
  }
  nevado {
  width: 768px;
  min-height: 100%!important;
  height: 800px;
  position: relative;
  margin: 0 auto;
  }
  fondo-imag img {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
  }
  雪イコンのスタイル:
  nevar div {
  position: absolute;
  top: -10px;
  animation-name: nieve, copos;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in;
  }

.copos {
color: rgba(255,255,255,.7);
font-size: 1em;
position: absolute;
}

次に、各雪片イコンのサイズが異なり、落下速度も異なります。異なるスタイル：ここでは、7つの異なるタイプをスタイルします。
.copos.c1 {
font-size: 1.7em;
left: 60px;
animation-duration: 5s;
color:rgba(160,240,255, .6);
}
.copos.c2 {
font-size: 1.2em;
left: 140px;
animation-duration: 8s;
}
.copos.c3 {
font-size: 1.1em;
left: 220px;
animation-duration: 9s;
}
.copos.c4 {
font-size: 1.5em;
left: 300px;
animation-duration: 6s;
color:rgba(48,176,255, .4);
}
.copos.c5 {
font-size: 1em;
left: 380px;
animation-duration: 7s;
}
.copos.c6 {
font-size: .9em;
left: 470px;
animation-duration: 10s;
}
.copos.c7 {
font-size: 2em;
left: 570px;
animation-duration: 10s;
color:rgba(0,240,255, .4);
}
.copos.c8 {
font-size: 1em;
left: 670px;
animation-duration: 12s;
}
.copos span {
display: block;
top: -50px;
font-size: 1.3em;
opacity: .8;
white-space: pre;
font-family: monospace;
}
#Animations
nieve : これは、上記のスタイルの雪片のそれぞれがこのアニメーションに付随することを意味します。最初から、その上部の位置は-100pxになり、最後まで、その位置は1200pxになります、 各クラスに対応するc1->c8はアニメーション時間になり、各クラスは異なるドロップ率、異なるアニメーション時間になります。
@keyframes nieve {
from {top: -100px;}
to {top: 1200px;}
}
copos : このアニメーションは、スノーフレーク自体を2つの円で定義します。
@keyframes copos {
0% { transform: rotate(0deg) translate(0px, 0px);}
100% { transform: rotate(720deg) translate(0px, 100px);}
}

See the Pen gOwOjep by dq-nguyen-quang-minh (@dq-nguyen-quang-minh) on CodePen.