当前位置: 首页 > news >正文

html+css+js+jquery实现一个 飘零的树叶

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>飘落的枫叶</title><style>.maple {position: absolute;top: 0;color: #ff0000;}</style><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head><body style="background-repeat: no-repeat; background-position: center 0%;"><div class="maplebg"></div><script>var d = "<div class='maple'>🍁<div>";setInterval(function () {var f = $(document).width();var e = Math.random() * f - 300; // 枫叶的定位left值var o = 0.2 + Math.random(); // 枫叶的透明度var fon = 25 + Math.random() * 10; // 枫叶大小var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移var k = 8000 + 5000 * Math.random();var deg = Math.random() * 360; // 枫叶的方向$(d).clone().appendTo(".maplebg").css({left: e + "px",opacity: o,transform: "rotate(" + deg + "deg)","font-size": fon,}).animate({top: "550px",left: l + "px",opacity: 0.1,}, k, "linear", function () {$(this).remove()})}, 500)</script>
</body></html>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 将元组类型的日期时间转换为字符串格式time.asctime([t])
  • RuoYi-Vue源码阅读(一):验证码模块
  • Kylin系列(二)使用
  • 缓存常见问题优化
  • 树莓派边缘计算网关搭建:集成MQTT、SQLite与Flask的完整解决方案
  • 数据结构初阶最终讲:排序
  • 使用python-pptx代码添加幻灯片:向PPT中插入新的幻灯片页面
  • Openwrt配置ZeroTier,实现公网访问内网中服务器
  • Windows下,C# 通过FastDDS高效通信
  • 碳化硅陶瓷膜过滤设备优异的过滤性能
  • 前端技术 -- 动画效果之GSAP作用与使用示例
  • Apex - Annotation#AuraEnabled
  • go的工厂模式
  • Oracle Flashback Recyclebin从回收站中恢复被删除的对象
  • 使用RabbitMQ死信交换机实现延迟消息
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • 345-反转字符串中的元音字母
  • Android单元测试 - 几个重要问题
  • Android框架之Volley
  • bearychat的java client
  • C# 免费离线人脸识别 2.0 Demo
  • Elasticsearch 参考指南(升级前重新索引)
  • iOS 系统授权开发
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • JAVA SE 6 GC调优笔记
  • java多线程
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • Koa2 之文件上传下载
  • laravel with 查询列表限制条数
  • mysql外键的使用
  • ng6--错误信息小结(持续更新)
  • spring-boot List转Page
  • SQLServer插入数据
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • unity如何实现一个固定宽度的orthagraphic相机
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • 产品三维模型在线预览
  • 官方解决所有 npm 全局安装权限问题
  • 基于Android乐音识别(2)
  • 计算机常识 - 收藏集 - 掘金
  • 类orAPI - 收藏集 - 掘金
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 你不可错过的前端面试题(一)
  • 时间复杂度与空间复杂度分析
  • 限制Java线程池运行线程以及等待线程数量的策略
  • 新版博客前端前瞻
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • ​数据链路层——流量控制可靠传输机制 ​
  • ()、[]、{}、(())、[[]]命令替换
  • (C语言)fread与fwrite详解
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (STM32笔记)九、RCC时钟树与时钟 第一部分
  • (二)Linux——Linux常用指令