JavaScriptを使って、キラキラを浮かせてみました☆
画像（星）が、ふわふわ漂いながらの往復運動します。
シャボン玉や、ホタル、蝶々などにも使えそうですね。
<body bgcolor="#010a8a">
<div style="width:800px; height:500px;"></div>
<script type="text/javascript">
ugoku=new Array(); // この行は触らないで・・
/***************************** 入力事項 ********************************/
// ======= 入力１：画像の種類と流れる範囲
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( px )を入力
// 「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）
// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）
// ７番目以降で、出したい画像の種類を必要数だけ入力（0から順に）
// 画像が２つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=new Array(10,0, 0,300, 50, 50, "star1.png"); //原本330を10に変更。速さもそれぞれ速くした。
ugoku[1]=new Array(10,0, 0,300, 60, 50, "star2.png"); //原本330を10に変更
ugoku[2]=new Array(10,0, 0,300, 55, 60, "star3.png"); //原本330を10に変更
// ======= 入力２：動きの調整
var no = 9 ; // 画面に同時に出す画像数を入力 //原本6。
var hsw = -1 ; // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
// １個表示されるのは、ugoku[0]で指定した画像です。
var srl = 1 ; // 画像を同時にスクロールさせるか？ （ yes=1 , no=-1 ）原本-1を1へ変更。
// 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg = 10 ; // 一秒当たりの描画の切替え回数（初期値 10）
/*************************** 入力事項ここまで **************************/
// 共通変数・配列の設定
var off_w, off_h, doc_x, doc_y;
xza=new Array(); yza=new Array(); img_w=new Array(); img_h=new Array();
stx=new Array(); sty=new Array(); xflg =new Array(); yflg =new Array();
marg_t=new Array(); marg_l=new Array(); disp_w=new Array(); disp_h=new Array();
Gy=new Array(); Gx=new Array(); Gp=new Array();
// 初期値の設定
ingN=0; dpsw=1; brSize();
for(i=0; i<no; i++){
Gy[i]=ingN; Gx[i]=ugoku[ingN].length-1; Gp[i]=6;
document.write("<div id='dot"+i+"' style='position:absolute; z-index:55'>"
+"<img src='"+ugoku[Gy[i]][Gp[i]]+"' id='img"+i+"'></div>")
img_h[i]=document.getElementById("img"+i).height;
img_w[i]=document.getElementById("img"+i).width;
marg_t[i]=ugoku[ingN][0]; marg_l[i]=ugoku[ingN][1];
disp_w[i]=ugoku[ingN][2]; disp_h[i]=ugoku[ingN][3];
if(disp_w[i]==0){ disp_w[i]=doc_x-marg_l[i] }
if(disp_h[i]==0){ disp_h[i]=doc_y-marg_t[i] }
primX(i); primY(i);
xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
if(ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }
Zahyo();
// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){ Size(i);
xflg[i]--; yflg[i]--;
xza[i]+=stx[i]; yza[i]+=sty[i]
if(xflg[i]<=0){ primX(i) }
if(yflg[i]<=0){ primY(i) }
if(xza[i]>marg_l[i]+disp_w[i]-img_w[i]){ hen=0;
stx[i]=-stx[i]; xza[i]=marg_l[i]+disp_w[i]-img_w[i]; kirikae(); } //右辺
if( xza[i]<marg_l[i]){ hen=1;
stx[i]=-stx[i]; xza[i]=marg_l[i]; kirikae(); } //左辺
if(yza[i]>marg_t[i]+disp_h[i]-img_h[i]){ hen=2;
sty[i]=-sty[i]; yza[i]=marg_t[i]+disp_h[i]-img_h[i]; kirikae(); } //下辺
if(yza[i]<marg_t[i]){ hen=3;
sty[i]=-sty[i]; yza[i]=marg_t[i]; kirikae(); } //上辺
Disp("dot"+i, off_w+xza[i], off_h+yza[i]) }
setTimeout("Zahyo()",1000/chg) }
// 初期データ発生
function primX(i){
stx[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
xflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }
function primY(i){
sty[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
yflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }
// ブラウザ等のサイズを調べる
function brSize(){
/*★IE11で動作しなくなったので、下記１行のみ,document.getElementById追加*/
if(document.all,document.getElementById){
doc_x=document.body.clientWidth; doc_y=document.body.clientHeight;
off_w=document.body.scrollLeft; off_h=document.body.scrollTop }
else if(document.getElementById){
doc_x=window.innerWidth; doc_y=window.innerHeight;
off_w=window.scrollX; off_h=window.scrollY }
if(srl < 0){ off_w=0; off_h=0 } }
function Size(z){
disp_w[z]=doc_x-marg_l[z]; disp_h[z]=doc_y-marg_t[z] }
// 画像を移動する
function Disp(num,xx,yy){
/*★HTML5で動作させるために、以下２行に +"px" を追加*/
document.getElementById(num).style.left=xx+"px";
document.getElementById(num).style.top =yy+"px" }
// 画像を切り替える
function kirikae(){
if (hsw>0 && i==0){
if(dpsw>0){ visi="hidden"; dpsw=-1 } else{ visi="visible"; dpsw=1 }
for(k=1; k<no; k++){ document.getElementById("dot"+k).style.visibility=visi } };
Gp[i]++; if(Gp[i]>Gx[i]){ Gp[i]=6 }
document.getElementById("img"+i).src=ugoku[Gy[i]][Gp[i]];
img_bh=img_h[i]; img_bw=img_w[i]
img_h[i]=document.getElementById("img"+i).height;
img_w[i]=document.getElementById("img"+i).width;
if(hen==0){ xza[i]+=img_bw-img_w[i] }
if(hen==2){ yza[i]+=img_bh-img_h[i] } }
// -->
</script>
今回、参考にさせていただいたのは、
『動くjavascriptさん』さんです。
ありがとうございます。
