樱花飘落特效

原创 已于 2025-06-27 13:27:56 修改 · 469 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2025-06-06 16:56:50 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>樱花飘落特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(to bottom, #ffcce6, #ffe6f2);
            min-height: 100vh;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            text-align: center;
            padding: 20px;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #ff1493;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }
        
        p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #d63384;
            max-width: 600px;
            line-height: 1.6;
        }
        
        .link-btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(45deg, #ff1493, #ff69b4);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 20, 147, 0.4);
            margin-top: 20px;
        }
        
        .link-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 20, 147, 0.6);
        }
        
        .footer {
            position: fixed;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: #d63384;
            font-size: 0.9rem;
            z-index: 10;
        }
        
        .footer a {
            color: #ff1493;
            text-decoration: none;
            font-weight: bold;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
        
        /* 樱花样式 */
        .sakura {
            position: absolute;
            pointer-events: none;
            user-select: none;
            z-index: 1;
            animation: sakura-fall linear infinite;
            opacity: 0;
        }
        
        @keyframes sakura-fall {
            0% {
                transform: translateY(-10vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(110vh) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* 点击樱花样式 */
        .click-sakura {
            position: absolute;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: sakura-float 2s ease-out forwards;
            opacity: 0.8;
            z-index: 5;
        }
        
        @keyframes sakura-float {
            0% {
                transform: translate(-50%, -50%) scale(0.5);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -150%) scale(1.2);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>樱花飘落特效</h1>
        <p>欣赏美丽的樱花飘落效果，点击页面任意位置还会出现额外的樱花绽放！</p>

    </div>
    
    <div class="footer">

    </div>

    <script>
        // 樱花类型
        const sakuraTypes = ['🌸', '💮', '🏵️', '🌺', '🌼'];
        
        // 创建飘落樱花
        function createFallingSakura() {
            const sakuraCount = 50;
            
            for (let i = 0; i < sakuraCount; i++) {
                const sakura = document.createElement('div');
                sakura.className = 'sakura';
                
                // 随机选择樱花类型
                const typeIndex = Math.floor(Math.random() * sakuraTypes.length);
                sakura.textContent = sakuraTypes[typeIndex];
                
                // 随机大小
                const size = Math.random() * 25 + 15;
                sakura.style.fontSize = `${size}px`;
                
                // 随机位置
                sakura.style.left = `${Math.random() * 100}%`;
                
                // 随机动画时间和延迟
                const duration = Math.random() * 10 + 10;
                sakura.style.animationDuration = `${duration}s`;
                sakura.style.animationDelay = `${Math.random() * 10}s`;
                
                // 随机透明度
                sakura.style.opacity = Math.random() * 0.7 + 0.3;
                
                document.body.appendChild(sakura);
            }
        }
        
        // 创建点击樱花
        function createClickSakura(x, y) {
            const sakura = document.createElement('div');
            sakura.className = 'click-sakura';
            
            // 随机选择樱花类型
            const typeIndex = Math.floor(Math.random() * sakuraTypes.length);
            sakura.textContent = sakuraTypes[typeIndex];
            
            // 随机大小
            const size = Math.random() * 30 + 20;
            sakura.style.fontSize = `${size}px`;
            
            // 随机颜色变化
            const hue = Math.floor(Math.random() * 60) + 320; // 粉色系
            sakura.style.color = `hsl(${hue}, 100%, 80%)`;
            
            // 设置位置
            sakura.style.left = `${x}px`;
            sakura.style.top = `${y}px`;
            
            document.body.appendChild(sakura);
            
            // 动画结束后移除
            setTimeout(() => {
                sakura.remove();
            }, 2000);
        }
        
        // 初始化樱花特效
        window.addEventListener('load', () => {
            createFallingSakura();
            
            // 点击创建樱花
            document.addEventListener('click', (e) => {
                // 创建多个樱花
                for (let i = 0; i < 5; i++) {
                    // 随机偏移
                    const offsetX = (Math.random() - 0.5) * 100;
                    const offsetY = (Math.random() - 0.5) * 100;
                    createClickSakura(e.clientX + offsetX, e.clientY + offsetY);
                }
            });
        });
    </script>
</body>
</html>

ziblog
关注
WordPress樱花飘落特效插件
u014091490的博客
02-11 3436
WordPress樱花飘落特效插件 WordPress樱花飘落特效插件，如要修改下数量，速度，图片等到插件文件的php里修改改，图片默认本地调用如不喜欢用插件的可以自己替换png图片。 php代码如下： function wpb_hook_javascript() { ?> <script src="<?php echo plugins_url('',__FILE__); ?&g...
三月，和她一起看一次樱花吧（vue实现樱花漫天效果）
蓑笠翁
03-12 1万+
vue中使用canvas实现樱花漫天动态效果
博客园 樱花特效
牛奔的博客
11-08 314
把这段代码在博客园进行设置 <script src="https://blog-static.cnblogs.com/files/izbw/yinghua.js"></script> <script src="https://blog-static.cnblogs.com/files/izbw/shubiaotexiao.js"></script&...
樱花特效.html
07-01
前端插件之樱花特效，利用h5+JavaScript实现，可更改实现樱花下落速度以及背景图片
为博客添加樱花飘落的效果
qq_36290227的博客
04-22 4万+
偶然看见别人博客中樱花飘落的效果，感觉很棒，于是我也给博客加上了樱花 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 新建 sakura.js 新建一个 sakura.js 文件，在里面填入下面的代码。代码来自于 折月’s Blog ，在此表示感谢。 var stop, staticx; var img = new Image(); img.src = "data:ima...
分享一款特别好看特别美的樱花博客前端页面
最新发布
08-18
分享一款特别好看特别美的樱花博客前端页面
博客园添加live2D看板娘和樱花飘落背景
玖涯博客
12-15 2681
写在前面 文章可能还有很多不足，请大家谅解，欢迎大佬提意见。 本文使用的东西 live2d（看板娘） 樱花飘落 博客园 文章目录写在前面本文使用的东西1.前期准备2.添加看板娘3.添加樱花飘落4.总结 1.前期准备 1、注册一个博客园账号，并且申请开通博客，添加js权限 2.添加看板娘 看板娘的GitHub地址：https://github.com/xiazeyu/live2d-widget...
樱花飘落特效.js,支持引用
06-13
樱花飘落特效 文章连接 https://editor.youkuaiyun.com/md?articleId=106728106
精选资源
HTML5樱花飘落背景动画特效
02-27
这个特效将静态的网页背景转化为动态的樱花飘落场景，为网站增添了一种浪漫和诗意的氛围，提升了用户体验和网页的个性化设计。 在HTML5中，主要使用`<canvas>`元素来创建画布，并通过JavaScript进行绘制。`<canvas>...
h5 canvas 樱花飘落特效，美如画
01-04
使用canvas技术实现樱花飘落，妹子看了会爱上你，男生看了会佩服你。<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时...
精选资源
网页特效代码：樱花飘落、下雪、花瓣飞舞等
02-13
WebGL API也是HTML5的一部分，可以用于创建高性能的3D图形，对于实现逼真的花瓣飞舞或雪花飘落特效尤其有用。 在提供的压缩包文件"**daima_1613226617**"中，可能包含了这些特效的源代码示例。这些代码可能分为HTML...
jquery实现web页面樱花坠落的特效
08-11
jquery实现web页面樱花坠落的特效
html+css 实现登录页面（樱花飘落效果）
nppe6的博客
04-09 1084
今天模仿了一个登录页 顺带使用原生的动画 添加了樱花下落的效果。
樱花（落雪纷飞）
luoyuanye2003110的博客
03-26 1036
落花纷飞
JS背景网页樱花特效
weixin_30345055的博客
07-03 1万+
js绘制网页樱花飘落背景，放入底部可用，在网上也有很多这样案例。 js（放于底部） 推荐下面这种写法，当然还有一种 小唯美 1 <script type="text/javascript"> 2 //樱花 3 var system = {}; 4 var p = navigator.platform; 5 system.wi...
D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing
lauleoi的专栏
03-02 2986
link:http://bl.ocks.org/robschmuecker/raw/7880033/ #dndTree.js // Get JSON data treeJSON = d3.json("flare.json", function(error, treeData) { // Calculate total nodes, max label length var t
在vuepress博客添加樱花特效(vue樱花组件源码)
あなたの可愛い41
08-03 1446
vuepress博客还没有樱花？支棱起来！
special effects - 樱花飘落背景特效
热门推荐
技术共享，共同进步！
07-13 4万+
樱花飘落背景特效
JS樱花特效
cloudYun的博客
03-17 6486
????前言    最近看到发现一个好看的页面樱花飘落特效，在这里整理一下分享给大家。 ????添加特效    在\themes\next\source\js\src中新建sakura.js文件，并添加以下代码 sakura.js    然后在\themes\next\layout\_layout.swig 文件里&lt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值