html5+CSS3杯子裡螢火蟲發光動畫特效
js程式碼
; <腳本> var numP = 50; TweenMax.set("#content", {transformOrigin:"50%-45%"}) //TweenMax.fromTo("#articles", .7, {背景:'rgb(16,17,24)'}, {背景:'rgb(18,15,23)', 重複:-1, yoyo:真,輕鬆:Elastic.easeInOut}) for (var i = 0; i<=numP; i++) { 如果(i==0){ TweenMax.set("#p0", {scale:0}) //迴圈(document.getElementById('p0'), 0); } 別的 { var _p = document.getElementById('p0').cloneNode(false); _p.id = "p" + i; document.getElementById('粒子').appendChild(_p); TweenMax.fromTo(_p, 13, { x:120+110*Math.random(), y:200+250*數學.隨機(), 規模:3*Math.random() },{ 貝塞爾曲線:{ 類型:'thru',值:[ {x:99+60*Math.random(), y:50+100*Math.random(), 比例:.5+Math.random(), alpha:1}, {x:40+80*Math.random(), y:200+160*Math.random(), 尺度:3-Math.random(), alpha:0.25}, {x:60+60*Math.random(), y:390+50*Math.random(), 比例:3*Math.random(), alpha:.7+.3*Math.random()}] , }, onComplete:循環, onCompleteParams:[_p], 緩動:正弦.easeInOut }).進度(i/numP) } } 函數循環(_p){ var tl = new TimelineMax({yoyo:true, 重複:-1}) //.to(_p, 3, {x:100+50*Math.random(), y:380+50*Math.random(), 規模:1+2*Math.random(), ease:線性。輕鬆無}, 0) .to(_p, 14, { ease:Sine.easeInOut,//Linear.easeNone, 貝塞爾曲線:{ 類型:'thru',值:[ {x:190+30*Math.random(), y:100+60*Math.random(), 尺度:3-Math.random()}, {x:190+50*Math.random(), y:150+100*Math.random(), 比例:.5+Math.random(), alpha:1}, {x:190-60*Math.random(), y:200+160*Math.random(), 尺度:3-Math.random(), alpha:0.25}, {x:200-70*Math.random(), y:390+50*Math.random(), 比例:3*Math.random(), alpha:1}], }}) } window.addEventListener('mousemove',function(e){ TweenMax.to("#content", .5, {x:-400+800*(e.clientX/window.innerWidth), 旋轉:-25+50*(e.clientX/window.innerWidth)}) })
免責聲明
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
![如何在 HTML5 本機和會話儲存中儲存和檢索複雜的 JavaScript 物件?](https://img.php.cn/upload/article/001/246/273/173532199126945.jpg)
28 Dec 2024
HTML5 中物件的儲存本機和會話儲存查詢:HTML5 的 localStorage 和 sessionStorage 能夠有效儲存原始資料...
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![HTML5 Canvas愛心飄動動畫特效](https://img.php.cn/upload/jscode/000/000/001/58da180947f26347.jpg)
HTML5 Canvas愛心飄動動畫特效
HTML5 Canvas愛心飄動動畫特效是一款直接用瀏覽器開啟可以看到一顆心的生成動畫。
![H5熊貓彈跳小遊戲原始碼](https://img.php.cn/upload/jscode/000/000/164/5d5e5b326606a398.jpg)
H5熊貓彈跳小遊戲原始碼
html5手機熊貓也瘋狂小遊戲原始碼。遊戲說明:長按螢幕調整熊貓彈簧的強度,跳到石柱上。掉到河裡遊戲結束。
![html5情人節盒子動畫特效](https://img.php.cn/upload/jscode/000/287/557/62060ef97eb52905.png)
html5情人節盒子動畫特效
基於svg繪製情人節一個個愛心盒子禮物打開動畫,愛心盒子動畫特效。
![H5 3D滾球遊戲原始碼](https://img.php.cn/upload/jscode/000/000/164/5d633774de4a9799.jpg)
H5 3D滾球遊戲原始碼
html5酷炫3D彩球滾動手機遊戲代碼下載。遊戲介紹:一個彩色圓球滾動,透過滑鼠或手機觸控螢幕拖曳來控制彩球的運行當前線路軌跡。這是一款簡單易操作的手機小遊戲原始碼。
![](/static/imghw/taglogo.png)
熱門文章
Tales Of Graces F 重製版:所有鎖定的寶箱密碼
18 Jan 2025
手游攻略
崩壞:星穹鐵道 - 所有金色替罪羊謎題解決方案
18 Jan 2025
手游攻略
王國來:拯救2-婚禮要買的衣服
05 Feb 2025
手游攻略
王國來:拯救2-如何獲得Comfrey
07 Feb 2025
手游攻略
王國來:拯救2-如何找到和領導伊格納修斯公羊
05 Feb 2025
手游攻略