js實現星星閃特效

本文例項為大家分享了js實現星星閃特效的具體程式碼，供大家參考，具體內容如下

效果如下

js實現星星閃特效

思路：

1、準備一張星星的圖片
2、建立多個星星（可以利用for循壞）
3、求出可視網頁的寬高 clientWidth，clientHeight
4、設定星星的隨機座標利用程式設計客棧 Math.random()
5、設定星星的縮放可以用css中的程式設計客棧scale
6、設定星星的縮放延遲頻率 animationDelay
7、給星星加動畫（滑鼠www.cppcns.com移動時，星星方法旋轉）

程式碼如下

 <style>
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }

 body{
  background-color: #000;
 }

 span{
  width: 30px;
  height: 30px;
  backgrouKjOdzncN 
nd: url("../images_js/star.png") no-repeat;
  position: absolute;
  background-size:100% 100%;
  animation: flash 1s alternate infinite;
 }

 @keyframes flash {
  0%{opacity: 0;}
  100%{opacity: 1;}
 }

 span:hover{
  transform: scale(3,3) rotate(180deg) !important;
  transition: all 1s;
 }
 </style>
</head>
<body>
<script>
 windoKjOdzncN 
w.onload = function () {
 // 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');
  document.body.appendChild(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 = rate + 's';
 }
 }
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

js實現星星閃特效

js實現星星閃特效

js實現星星海特效的示例

JS實現吸頂特效

JS實現音樂鋼琴特效

JS實現音樂導航特效

JS實現簡單日曆特效

JS實現商品櫥窗特效

JS實現網頁時鐘特效

js實現星星打分效果

JS實現燈泡開關特效

原生js實現星星閃爍效果

js實現簡單放大鏡特效

原生JS實現目錄滾動特效

原生JS實現數碼錶特效

原生JS實現翻書特效

JS實現程式碼雨特效

JS實現電商商品展示放大鏡特效

JS實現普通輪播圖特效

js實現煙花特效

JS實現點星星消除小遊戲

js實現星星閃特效

相關推薦