当前位置: 首页 > 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>

http://www.lryc.cn/news/419037.html

相关文章:

  • 鸿蒙(API 12 Beta3版)【时域可分层视频编码】 音视频编码
  • 一个java类实现UDP代理转发
  • K8s问题案例分析
  • 爬虫集群部署:Gerapy 框架详细解析
  • 文本相似度 HanPL汉语言处理
  • Linux软件包管理器 yum
  • 图像变换算法
  • 谷粒商城实战笔记-131~132-商城业务-商品上架-构造sku检索属性和库存查询
  • 【Python学习-UI界面】PyQt5 QLabel小部件
  • vue项目打包问题
  • C++标准模板库(STL)|容器|vector| queue|
  • 【Android】安卓四大组件之Service用法
  • Python爬虫入门实战(详细步骤)
  • 5、Linux : 网络相关
  • Linux中针对文件权限的解析
  • 【0304】psql 执行“VACUUM FULL”命令的背后实现过程
  • Java常见面试题-11-MongoDb
  • PBLOCK
  • 电子纸打造智能、自动化、绿色的工作流程
  • Redis 的6种回收策略(淘汰策略)详解
  • SQL注入sqli-labs-master关卡一
  • LeetCode面试题Day6|LeetCode238 除自身以外数组的乘积、LeetCode134 加油站
  • 猫头虎分享:Python库 FastAPI 的简介、安装、用法详解入门教程
  • python连接MySQL数据库使用pymysql
  • AI时代下的编程趋势:程序员如何提升核心竞争力
  • C#:基本语法
  • Redisson 实现分布式锁
  • VMware ESXi学习笔记
  • Python 函数(2)
  • c++文件的读写