移動作業車、Web製作、がんサバイバーとオストメイトの深く掘りさげた情報を紹介

ドットエイト机上研究所

【コピペでOK】CSSだけで背景に泡/雪を表現

投稿日： 更新日：

CSSで雪の降る様子と、シャンパンや炭酸飲料の泡を表現しました。雪の場合は上から下に、泡の場合は下から上へと、アニメーションの方向を変えているだけです。

サンプルダウンロード

表示例：sparkle / snow sample – dot8.jp
https://www.dot8.jp/sample/sparkle_snow/sample.1.0.css［別タブにて表示］

なお、同内容のソースコードを、このページの後半に用意しております。HTMLも必要な方はソースコードをご確認ください。

解説

HTMLについて

HTMLは、外部CSSを読み込んでいるだけです。

サンプルではインラインで<style>を記載していますが、

…
  <link rel='stylesheet' id='sample-1-0' href='./sample.1.0.css?ver=20230917' media='all'>
  <style>
    html{background-color:#aaa;}
    html::before,
    html::after,
    body::before,
    body::after{animation-direction:reverse;}
  </style>
</head>
…

これは、CSSを変更する前に動きを簡単に確認するためのものですので、実際に使用するときに必要な記述ではありません。
CSSを読み込ませるだけの、太字の<style>～</style>部分を削除した以下の記述でも泡/雪が動きます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>（タイトルは適宜変更してください）</title>
  <link rel='stylesheet' href='./sample.1.0.css'>
</head>
<body>
</body>
</html>

まずは、<style>～</style>の記述があるサンプルHTMLの解説です。

１．CSS内の背景色は私の好みの色に調整してありますが、背景色が濃い方が雪/泡の動きを確認しやすいので、「html{background-color:#aaa;}」で背景色を濃くしています。
自分のサイトで使用する場合は、CSS内の「html{ background-color: rgb(235,235,232) ; }」部分を変更してください
もちろん、色の指定はrgbではなくて構いません。

２．CSSを変える前に雪/泡の動く様子を見てもらうため、HTMLに
「html::before, html::after, body::before, body::after{animation-direction:reverse;}」を記載しています。
reverseの部分を「animation-direction:normal;」に変更すると、上から下へ雪が降る表現になります。
自分のサイトで使用する場合、CSS内4カ所にある「animation-direction」部分を変更してください

３．HTMLでCSSを読み込む際に指定しているid・mediaは、なくて構いません。
CSSの置く場所に合わせて、パスは適宜変更してください。クエリパラメータ（?ver=20230917）は、キャッシュ対策のため入れてありますが、こちらもキャッシュ対策が不要であればなくても構いません。CSSの記述を変更した場合、一緒にクエリパラメータの値を変更すると、クライアントから「変更されていないんだけど」と連絡をもらってしまうことがなくなります。

CSSについて

雪や泡をあらわす文字

HTMLには、雪や泡をあらわす「＊」などの文字を記述していません。雪や泡を表現するための文字は、CSSのbefore疑似要素（::before）とafter疑似要素（::after）を使い、「content:”＊”;」で追加しています。
サンプルでは「★」「◆」「●」「＊」の文字としましたが、文字は好みで変えてください。
4つの文字を追加するために、HTMLタグとBODYタグの2つのタグに対してbefore疑似要素とafter疑似要素を指定しています。

ところで、4つの文字を使わなくても、2つの文字で密度を（「text-shadow:」の指定を多くするように）調整すればよいと思うかもしれません。
しかし、縦方向の位置を調整したとしても、同じタイミングで動く文字（と影）を増やすだけでは、動きが単調になります。
そのため、動く速さの異なる4つの文字を動かし、密度をあげつつ動きが単調になってしまうことを防いでいます。

通常、背景色はBODYタグに指定することが多いと思いますが、
今回はHTMLタグに文字を追加しているため、BODYタグに背景色を指定するとHTMLタグ部分の文字が見えなくなります。
そのため、今回は背景色はHTMLタグで指定し、BODYタグの背景色を透明（transparent）にしました。
文字（泡/雪）がサンプルの半分しか見えない場合は、BODYタグの背景色を確認してください。

文字の色（color:）、大きさ（font-size:）も、好みで変更してください。

位置

文字の開始位置は、「top:」で画面外から動き始めるように調整してあります。本当は、文字の大きさで調整すれば良いのですが、CSSだけでは指定した文字の大きさを元に値を決めることが出来ないので、「-5%」に指定しました。
この値を-5%以外の値に変えたり、文字の大きさに合わせて値を指定して良いのですが、見え方への影響はあまり大きくないので、-5%のままでも十分ではないかと思います。

文字の数はあまり増やせないため、「text-shadow」で指定した文字の影を増やし、画面全体に雪/泡が見えるようにしています。
左右方向（x方向）を「vw」で指定することで、画面内に文字（＝雪/泡）が収まるようにしてあります。

速さは、「animation:」の時間で調整します。動き方が単調にならないように、文字ごとに「animation-timing-function:」で変化する速度を変えています。また、「ease-in」と「ease-in-out」を指定しましたが、この指定を変えても動き方が変わります。
「animation-direction:」の値を「normal」とすると、上から下へ雪が降る表現に、「reverse」とすると下から上へ泡が昇っていく表現になります。
好みに応じて調整してください。

雪/泡の動く距離は、「@keyframes」部の「top:」で指定します。
コンテンツの長さ（100%）に、「text-shadow:」で上下方向に最も大きく動かした距離を足します。
例）ソースコードでは下（-）方向に580px動かした値が最も大きな値ですので「top: calc(100% + 580px);」としています。

いかがでしょうか。
何となく背景が変化するだけでも、見え方の印象は大きく変わるはずです。
単純な上下方向の動きですが、泡は上下方向の動きだけでそれらしく見えるはずですし、雪は斜めや回転の表現を加えなくても、案外それらしく見えたのではないでしょうか。
参考になればうれしいです。
せばねぇ！

ソースコード（ver.1.0）

CSS

@charset "utf-8";
/*!
Sample Name: sparkle / snow sample
Author: dot8.jp T.Araya
Version: 0.1
License: GNU General Public License v2 or later
License URI: shttp://www.gnu.org/licenses/gpl-2.0.html
*/

html{
  background-color: rgb(235,235,232) ;
}

html body{
  background-color: transparent;
  min-height: 100vh;
}

/*
css spark/snow effect
change animation-direction

spark -> reverse
animation: anim 5s linear infinite;animation-timing-function:ease-in; animation-direction:reverse;

snow -> normal
animation: anim 7s linear infinite;animation-timing-function:ease-in; animation-direction:normal;
*/
html::before{
  content:"★";
  color: RGB(255,255,255);
  font-size: 10px;
  position: fixed;
  top: -5%;
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 5s linear infinite;animation-timing-function:ease-in; animation-direction:normal;
}
html::after{
  content:"◆";
  color: RGB(255,255,255);
  font-size: 12px;
  position: fixed;
  top: -5%;
  text-shadow:
  2vw   -100px 2px,
  13vw  -400px 3px,
  24vw  -500px 4px,
  33vw  -580px 1px,
  39vw  -250px 2px,
  48vw  -340px 5px,
  61vw  -150px 2px,
  65vw  -180px 0,
  72vw  -220px 4px,
  87vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 7s linear infinite;animation-timing-function:ease-in-out; animation-direction:normal;
}
body::before{
  content:"●";
  color: RGB(255,255,255);
  font-size: 14px;
  position: fixed;
  top: -5%;
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 11s linear infinite;animation-timing-function:ease-in; animation-direction:normal;
}

body::after{
  content:"＊";
  color: RGB(255,255,255);
  font-size: 16px;
  position: fixed;
  top: -5%;
  text-shadow:
  3vw   -100px 2px,
  17vw  -400px 3px,
  28vw  -500px 4px,
  36vw  -580px 1px,
  40vw  -250px 2px,
  45vw  -340px 5px,
  51vw  -150px 2px,
  60vw  -180px 0,
  75vw  -220px 4px,
  80vw  -320px 9px,
  97vw  -170px 7px;
  animation: anim 13s linear infinite;animation-timing-function:ease-in-out; animation-direction:normal;
}

@keyframes anim {
  100% {
    color: transparent;
    top: calc(100% + 580px);
  }
}

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>sparkle / snow sample - dot8.jp</title>
  <link rel='stylesheet' id='sample-1-0' href='./sample.1.0.css?ver=20230917' media='all'>
  <style>
    html{background-color:#aaa;}
    html::before,
    html::after,
    body::before,
    body::after{animation-direction:reverse;}
  </style>
</head>
<body>
</body>
</html>

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です