在前端开发中，我们总会遇到需要为网页添加一些动态特效的情况。本文将介绍如何使用 JQuery 和 CSS3 实现网页背景花瓣随机飘落的特效。
技术原理
1. 随机位置生成花瓣
使用 JavaScript 的 Math 对象的 random() 方法可以生成一个 0~1 之间的随机数，我们可以利用这个特性来生成花瓣在页面上的随机位置。
-- -------------------- ---- -------
-------- ------------- -
--- ----- - -----------------------------------
--- --------- - ----------------- - --------------
--- ------- - ----------------- - --------------
-----------
------- ----------
------ ----
---
------------------------
---------------
------ -------------------
------- --------
-- ------ --------- ---------- -
-----------------
---
-2. CSS3 动画实现花瓣飘落
使用 CSS3 中的 @keyframes 来定义动画关键帧，然后将其应用到花瓣元素上，即可实现花瓣的飘落效果。
-- -------------------- ---- -------
------ -
--------- ---------
------ -----
------- -----
-------------- ----
-------- ----
----------------- -----
--------------- -----------
------------------- ----
-------------------------- -------
-------------------- ---------
-
---------- ---------- -
-- -
---------- ------------------ -------------
-
---- -
---------- ----------------- ---------------
-
-实现步骤
- 首先引入 JQuery 库和样式表。
-- -------------------- ---- -------
------- ----------------------------------------------------------------------------
-------
---- -
------- -----
--------- -------
----------------- --------
-
--------- 然后添加一个定时器，每隔一段时间就生成一个花瓣。
setInterval(createPetal, 200);
示例代码
HTML：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------
------- ----------------------------------------------------------------------------
-------
---- -
------- -----
--------- -------
----------------- --------
-
------ -
--------- ---------
------ -----
------- -----
-------------- ----
-------- ----
----------------- -----
--------------- -----------
------------------- ----
-------------------------- -------
-------------------- ---------
-
---------- ---------- -
-- -
---------- ------------------ -------------
-
---- -
---------- ----------------- ---------------
-
-
--------
-------
------
-------
--------
-------- ------------- -
--- ----- - -----------------------------------
--- --------- - ----------------- - --------------
--- ------- - ----------------- - --------------
-----------
------- ----------
------ ----
---
------------------------
---------------
------ -------------------
------- --------
-- ------ --------- ---------- -
-----------------
---
-
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------