jquery花瓣飘落特效

基础概念

jQuery花瓣飘落特效是一种网页动态效果，通过使用jQuery库来实现花瓣从屏幕顶部缓缓飘落到屏幕底部的动画效果。这种效果常用于网站的开头页面或者作为背景动画，增加页面的视觉效果和用户体验。

类型

基本飘落效果：花瓣从屏幕顶部随机位置飘落到屏幕底部。
交互式飘落效果：用户可以通过鼠标移动或点击来影响花瓣的飘落路径。
动态背景效果：花瓣飘落的同时，背景颜色或图片也会发生变化。

应用场景

网站首页：作为网站的欢迎页面，增加视觉冲击力。
活动页面：在促销活动页面中使用，吸引用户注意力。
个人博客：为博客添加一些动态元素，提升阅读体验。

示例代码

以下是一个简单的jQuery花瓣飘落特效的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery花瓣飘落特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        .petal {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ff69b4;
        }
    </style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function createPetal() {
                var petal = $('<div class="petal"></div>');
                var x = Math.random() * $(window).width();
                var y = -10;
                var speed = Math.random() * 3 + 2;
                petal.css({
                    left: x,
                    top: y
                });
                $('body').append(petal);
                petal.animate({
                    top: $(window).height()
                }, speed * 1000, function() {
                    $(this).remove();
                });
            }

            setInterval(createPetal, 100);
        });
    </script>
</body>
</html>