美元飘落动画特效

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

#javascript #html #css3

于 2025-06-17 13:36:59 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美元飘落动画特效</title>
    <!-- 引入Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #f5f5f5;
            font-family: Arial, sans-serif;
            height: 100vh;
            position: relative;
        }
        
        .money-fall-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }
        
        .dollar {
            position: absolute;
            font-size: 24px;
            color: #2ecc71;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
            user-select: none;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        /* 自定义下落动画 */
        @keyframes falling {
            0% {
                transform: translateY(-100px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh + 100px)) rotate(360deg);
                opacity: 0;
            }
        }
        
        .falling {
            animation-name: falling;
        }
        
        /* 左右飘动效果 */
        @keyframes sway {
            0%, 100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(50px);
            }
        }
        
        .sway {
            animation-name: sway, falling;
            animation-duration: 3s, 5s;
            animation-iteration-count: infinite, infinite;
            animation-timing-function: ease-in-out, linear;
        }
        
        .content {
            position: relative;
            z-index: 1;
            text-align: center;
            padding-top: 50px;
        }
        
        h1 {
            color: #333;
            font-size: 3em;
            margin-bottom: 20px;
        }
        
        /* 插入的链接样式 */
        .custom-link {
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: rgba(0,0,0,0.7);
            text-decoration: none;
            font-size: 14px;
            background: rgba(255,255,255,0.3);
            padding: 8px 15px;
            border-radius: 20px;
            z-index: 100;
            transition: all 0.3s ease;
        }
        
        .custom-link:hover {
            color: black;
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div class="content">
        <h1 class="animate__animated animate__bounceIn">美元飘落特效</h1>
        <p class="animate__animated animate__fadeIn">使用Animate.css创建的炫酷动画效果</p>
    </div>
    
    <div class="money-fall-container" id="moneyContainer"></div>
    

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const moneyContainer = document.getElementById('moneyContainer');
            const dollarSymbols = ['$', '€', '¥', '£']; // 多种货币符号
            
            // 创建下落美元符号
            function createDollar() {
                const dollar = document.createElement('div');
                dollar.className = 'dollar animate__animated';
                
                // 随机选择动画效果
                const animations = ['falling', 'sway'];
                const randomAnim = animations[Math.floor(Math.random() * animations.length)];
                dollar.classList.add(randomAnim);
                
                // 随机属性
                dollar.textContent = dollarSymbols[Math.floor(Math.random() * dollarSymbols.length)];
                dollar.style.left = Math.random() * 100 + 'vw';
                dollar.style.fontSize = (Math.random() * 20 + 16) + 'px';
                dollar.style.animationDuration = (Math.random() * 3 + 3) + 's';
                dollar.style.animationDelay = Math.random() * 2 + 's';
                
                // 随机颜色 - 绿色系
                const greenShade = Math.floor(Math.random() * 100 + 100);
                dollar.style.color = `rgb(50, ${greenShade}, 50)`;
                
                moneyContainer.appendChild(dollar);
                
                // 动画结束后移除元素
                dollar.addEventListener('animationend', function() {
                    dollar.remove();
                });
            }
            
            // 初始创建一批美元符号
            for (let i = 0; i < 30; i++) {
                setTimeout(createDollar, i * 300);
            }
            
            // 持续创建新美元符号
            setInterval(createDollar, 300);
            
            // 点击页面添加更多美元符号
            document.addEventListener('click', function() {
                for (let i = 0; i < 10; i++) {
                    setTimeout(createDollar, i * 100);
                }
            });
        });
    </script>
</body>
</html>

ziblog
关注
【工具篇】【LumaAI Dream Machine：用AI「造梦」的魔法，正在改写视频创作规则】
商务合作|问题讨论|交流学习 请联系作者微信，加微信请务必注明来意，博客主页有联系方式
04-01 634
如果有一天，你只需要对着电脑说一句话，20秒后就能得到一段堪比电影大片的视频，你会用它讲什么故事？LumaAI的Dream Machine正在让这个幻想成真——，从文字到图像再到动态影像，所有灵感都能在几秒钟内「落地」。今天我们就来扒一扒这款被称为「AI版造梦机」的神器，到底藏着多少黑科技！
提示工程架构师实战：元宇宙虚拟演唱会的Prompt观众互动设计
2502_91592937的博客
09-26 809
当你在元宇宙里挥舞虚拟荧光棒，发送一条“我想和歌手合唱《光年之外》”的消息，下一秒舞台突然升起专属合唱平台，歌手笑着向你伸出手，你的虚拟形象手里凭空出现麦克风——这不是科幻电影，而是元宇宙虚拟演唱会的“互动大脑”在工作。这个“大脑”的核心，正是提示工程架构师设计的Prompt系统。本文将以“元宇宙虚拟演唱会的观众互动设计”为实战场景，从背景痛点核心概念技术架构代码实现到案例落地，一步步拆解提示工程如何解决“虚拟互动不真实、不及时、不个性化”的行业难题。如何用“剧本思维”设计多模态Prompt？
羽毛飘落的css3动画,Animate.css空中美元钞票飘落动画特效
weixin_30802399的博客
08-04 561
js代码const NUMBER_OF_LEAVES = 15;const width=window.screen.width;function init(){var container = document.getElementById('leafContainer');for (var i = 0; i < NUMBER_OF_LEAVES; i++){container.appendC...
HTML+CSS+JS 实现炫酷效果，你知道几种呢？
qq_64608499的博客
05-31 1677
1.实现美元飘落效果 HTML代码如下 <!DOCTYPE html> <html style="overflow-x:hidden"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Animate.css美元飘落动画特效 - 小小锋叔叔</title&gt...
2020圣诞特效项目：炫酷动画实现技巧
weixin_35995661的博客
07-26 715
jQuery的核心优势之一是其内置的动画方法。这些方法允许开发者在没有深入了解底层动画逻辑的情况下，轻松实现动画效果。例如，fadeIn()fadeOut()是常用的动画效果：// 淡入效果// 淡出效果// 滑动切换在这些方法中，数字参数代表动画持续的时间（以毫秒为单位）。对于更复杂的效果，jQuery也支持创建自定义动画，这可以通过.animate()方法来实现：}, 1000);该方法接受两个参数：一个对象来定义要改变的CSS属性，以及动画的持续时间。
分享112个JS特效动画效果，总有一款适合您
adendean的博客
02-05 678
js
可灵2.0与Sora对比
m0_61620400的博客
05-25 1659
可灵2.0与Sora对比分析显示，两者在视频生成领域各有特色。可灵2.0更适合商业视频创作，Sora则满足个性化艺术需求。
【限时免费】 [今日热门] opensora-hpcai-1_0_ms：开源视频生成领域的效率革命者
gitblog_02059的博客
07-24 415
[今日热门] opensora-hpcai-1_0_ms：开源视频生成领域的效率革命者 【免费下载链接】opensora-hpcai-1_0_ms MindSpore implementation of OpenSora, an open-source project that aims to foster innova...
【CodeBuddy 】从0到1，打造一个“牛马打鸡血仪”
weixin_43932886的博客
07-18 861
经过一番努力，我终于完成了“牛马打鸡血仪”这个谷歌插件的开发。在这个过程中，CodeBuddy作为我的得力助手，发挥了巨大的作用。从最初的需求构思到最终的插件完成，我经历了需求分析、环境搭建、项目架构设计、代码编写、调试优化以及最终的测试发布等阶段。在需求分析阶段，我明确了金钱可视化、实时累积、炫酷体验、个性设置和本地轻量等核心功能。环境搭建时，腾讯云代码助手CodeBuddy的便捷性让我快速开始了开发之旅。项目架构设计阶段，我规划了清晰的文件结构，为后续的代码编写打下了坚实基础。
Animate.css美元飘落动画特效特效代码
03-20
"美元飘落动画特效"是Animate.css库中的一个特定动画，它模拟了美元纸币在空中飘落的情景，通常用于营造节日气氛或者特殊互动体验，例如在描述中提到的“国庆假期发钱发红包”的场景。 这个特效通过CSS类名应用到...
Animate.css空中美元钞票飘落动画特效
06-11
Animate.css空中美元钞票飘落动画特效是一种利用CSS3技术实现的动态视觉效果。这个特效主要是通过CSS3的动画属性来模拟美元钞票在空中的飘落过程，为网页增加趣味性和互动性。用户可以轻松地将美元图像替换为人民币...
animate动画特效
07-31
animate动画特效animate动画特效html5 css
Animate.css制作的美元飘落特效代码分享
资源摘要信息:"Animate.css美元飘落动画特效代码" 知识点： 1. Animate.css简介 Animate.css是一个流行的、功能全面的CSS动画库，由Dan Eden创建，旨在为网页设计师和开发者提供一系列预设的CSS3动画效果。这些动画...
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 934
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 171
Boolean。
JavaScript 根据数组对象的某个 指定属性 分组合并，并累加金额
最新发布
zhangyao940330的博客
12-15 156
item } 浅拷贝原对象的所有属性（如 id、name），合并时仅更新金额，其他属性保留第一个分组对象的值（若需保留所有属性，可修改为数组存储，如 name: [‘苹果’, ‘香蕉’]）。分组逻辑：用 Map 存储分组，键为 groupKey 的值（如 ‘水果’），值为合并后的对象。Map 比普通对象更安全（避免键名冲突，支持数字 / 对象等类型的键）。缺失金额或非数字（如 undefined、‘abc’）视为 0。字符串金额（如 ‘8’）自动转为数字；扩展需求：保留分组内所有非金额属性。
第十篇：Day28-30 工程化优化与部署——从“能跑”到“好用”（对标职场“项目上线”需求）
2402_87628679的博客
12-11 958
gzip on;性能优化：掌握Vite的资源压缩、Tree Shaking、代码分割配置，能实现路由/组件懒加载、虚拟滚动等渲染优化，理解gzip/br压缩的原理和后端配置；兼容性处理：能通过`@vitejs/plugin-legacy`和autoprefixer适配低版本浏览器，理解`browserslist`的作用，知道Vue 3的兼容性限制；多环境配置：能创建多环境变量文件，在项目中使用`import.meta.env`访问环境变量，区分开发/测试/生产环境的配置；项目部署。
ESM (ES Modules) 和 CJS (CommonJS)
Irene1991的博客
12-11 648
ESM和CJS是JavaScript的两种模块系统。ESM是ES6引入的现代标准，采用静态编译时加载，支持TreeShaking；CJS是Node.js传统方式，采用动态运行时加载。ESM语法为import/export，CJS为require()/module.exports。新项目推荐ESM，维护旧项目可使用CJS。两者可互相调用：ESM通过createRequire调用CJS，CJS通过动态import()调用ESM。配置时需注意文件扩展名和package.json的type字段声明。ESM代表Jav
第十一篇：Day31-33 前端安全与性能监控——从“能用”到“安全可靠”（对标职场“系统稳定性”需求）
2402_87628679的博客
12-11 1235
对于小型项目或特定业务场景，可通过自定义埋点实现核心指标监控，无需接入复杂工具。// src/utils/monitor.js（自定义监控工具） import axios from 'axios';// 监控数据上报接口（后端提供） const MONITOR_UPLOAD_URL = '/api/monitor/upload';
打造Android平台雪花飘落动画特效教程
Android雪花飘落特效是用于移动设备上，特别是在Android操作系统中实现的一种视觉效果，它模仿了雪花在屏幕上的自然飘落过程，常用于节日主题或者天气模拟类应用中，为用户提供具有视觉吸引力的界面体验。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值