最近,我發現了一種非常有趣的jQuery表白煙花動畫效果,它能讓你的表白更加生動有趣。這個效果是由jQuery的動畫庫和一些簡單的JavaScript代碼組成的。
$(function() { // 獲取屏幕寬高 var screenWidth = $(window).width(), screenHeight = $(window).height(); // 循環添加煙花元素 for (var i = 0; i < 10; i++) { $("<div/>").addClass("firework").appendTo($(".fireworkBox")); } // 煙花爆炸動畫 function fireworkAnimate() { $(".firework").each(function(index, el) { var $this = $(this); // 爆炸后的煙花顏色隨機 $this.css("background-color", ranColor()); // 煙花運動軌跡隨機 var x = Math.random() * screenWidth * 0.8 + screenWidth * 0.1, y = Math.random() * screenHeight * 0.8 + screenHeight * 0.1 - 100; // 煙花上升運動 $this.animate({ "top": y + "px", "opacity": 1 }, 2000); // 煙花爆炸效果 setTimeout(function() { $this.addClass("explode"); // 煙花隕落效果 setTimeout(function() { $this.remove(); }, 1000); }, 2000) }); } // 生成隨機顏色函數 function ranColor() { var r = Math.floor(Math.random() * 256), g = Math.floor(Math.random() * 256), b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; } // 開始煙花動畫 function startAnimate() { setInterval(fireworkAnimate, 500); } startAnimate(); });
這段代碼利用jQuery的animate()方法和setTimeout()方法實現了煙花動畫的效果,同時添加了一個生成隨機顏色的函數,讓煙花的顏色更加生動有趣。你只需要將這段代碼添加到你的HTML文件中,然后在頁面中添加一個class為fireworkBox的空div元素即可。
使用這種動畫效果進行表白,相信一定會讓你的對象感到非常驚喜與開心。趕快試一試吧!