星のフラッシュ効果を実現するjs

 <スタイル>
 *{
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
 }

 体{
  背景色: #000;
 }

 スパン{
  幅: 30ピクセル;
  高さ: 30px;
  背景: url("../images_js/star.png") 繰り返しなし;
  位置: 絶対;
  背景サイズ:100% 100%;
  アニメーション: 1 秒間隔で点滅、無限;
 }

 @keyframes フラッシュ {
  0%{不透明度: 0;}
  100%{不透明度: 1;}
 }

 スパン:ホバー{
  変換: スケール(3, 3) 回転(180度) !重要;
  遷移: すべて 1;
 }
 </スタイル>
</head>
<本文>
<スクリプト>
 window.onload = 関数（）{
 // 1. 画面サイズを見つける var screenW = document.documentElement.clientWidth;
 var screenH = document.documentElement.clientHeight;

 // 2. 動的に星を作成する for(var i=0; i<150; i++){
  // 2.1 星を作成する var span = document.createElement('span');
  ドキュメントのボディに子要素を追加します。

  // 2.2 ランダム座標 var x = parseInt(Math.random() * screenW);
  var y = parseInt(Math.random() * screenH);
  span.style.left = x + 'px';
  span.style.top = y + 'px';

  // 2.3 ランダムスケーリング var scale = Math.random() * 1.5;
  span.style.transform = 'scale('+ scale + ', ' + scale + ')';

  // 2.4 頻度 var rate = Math.random() * 1.5;
  span.style.animationDelay = レート + 's';
 }
 }
</スクリプト>