hanabira.css

/*---------------------------------------------------------------------
  桜吹雪の効果の為のスタイルシート
---------------------------------------------------------------------*/
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
}

/* さくらの花びらの楕円形 */
.hana {
  position: absolute;
  width:  0;
  height: 0;
  border: 10px solid transparent;
  border-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;

  /* さくらの花びらの楕円形 */
  /* 15度回転させることで、花びら形にする */
  &::after {
    content: "";
    display: block;
    position: absolute;
    top:  -7px;
    left: -7px;
    width:  0;
    height: 0;
    border: 10px solid transparent;
    border-radius: 15px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    transform: rotate(15deg);
  }
}

/* 淡い櫻色から濃い櫻色まで 五色のテーマ */
.t1, .t1::after { border-color: #fef4f4; }
.t2, .t2::after { border-color: #ffd1d9; }
.t3, .t3::after { border-color: #ffc0cb; }
.t4, .t4::after { border-color: #ffc0cb; }
.t5, .t5::after { border-color: #ffafbd; }

/* アニメーション(動き) を五種類用意する */
.a1 { animation: a1 12s infinite; }
.a2 { animation: a2 10s infinite; }
.a3 { animation: a3  9s infinite; }
.a4 { animation: a4  9s infinite; }
.a5 { animation: a5  8s infinite; }
@keyframes a1 {
  from { transform: rotate(   0deg) scale(.9); }
  50%  { transform: rotate( 270deg) scale(.9); }
  to   { transform: rotate(   1deg) scale(.9); }}
@keyframes a2 {
  from { transform: rotate( -90deg) scale(.8); }
  50%  { transform: rotate(-360deg) scale(.8); }
  to   { transform: rotate( -89deg) scale(.8); }}
@keyframes a3 {
  from { transform: rotate(  30deg) scale(.7); }
  50%  { transform: rotate( 300deg) scale(.7); }
  to   { transform: rotate(  29deg) scale(.7); }}
@keyframes a4 {
  from { transform: rotate(-120deg) scale(.6); }
  50%  { transform: rotate(-390deg) scale(.6); }
  to   { transform: rotate(-119deg) scale(.6); }}
@keyframes a5 {
  from { transform: rotate(  60deg) scale(.5); }
  50%  { transform: rotate( 330deg) scale(.5); }
  to   { transform: rotate(  59deg) scale(.5); }}