溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JS怎么實現(xiàn)星星海特效，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
知識點
1.CSS使用@keyframes自定義動畫，使用animation調用自定義動畫
2.opacity 透明度。從 0.0 （完全透明）到 1.0（完全不透明）
3.CSS中transform
4.animation-delay 屬性定義動畫何時開始。
5.求屏幕尺寸
var 寬 = document.documentElement.clientWidth; var 高 = document.documentElement.clientHeight;
6.JS創(chuàng)建節(jié)點
7.JS在某元素后追加節(jié)點
appendChild()
8.UnderScore.js通過_調用其中的API
運行效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="UnderScore.js"></script>
<style>
*{margin: 0;padding-top: 0}
body{background-color: #000}
span{
width: 30px;
height: 30px;
background: url("star.png") no-repeat;
position: absolute;
background-size: contain;
animation: flash 1s alternate infinite;
}
@keyframes flash{
0%{opacity: 0}
25%{opacity: 0.25}
50%{opacity: 0.5}
75%{opacity: 0.75}
100%{opacity: 1}
}
span:hover{
transform: scale(3, 3) rotate(180deg) !important;
transition: all 1s;
}
</style>
</head>
<body>
<script>
window.onload = function (ev) {
// 1. 求出屏幕尺寸
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
// 2. 動態(tài)創(chuàng)建10顆星星
for (var i = 0; i < 200; i++) {
// 2.1 創(chuàng)建星星
var span = document.createElement('span');
document.body.appendChild(span);
// 2.2 隨即坐標
var x = parseInt(_.random(0, screenWidth));
var y = parseInt(_.random(0, screenHeight));
span.style.left = x +'px';
span.style.top = y + 'px';
// 2.3 隨機縮放
var scale = _.random(0, 1.5);
span.style.transform = 'scale('+scale+','+scale+')';
// 2.4 頻率
var rate = _.random(0, 1.5);
span.style.animationDelay = rate + 's';
}
}
</script>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS怎么實現(xiàn)星星海特效”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
