位置: IT常识 - 正文

HTML创意动画代码(html制作动画代码)

编辑:rootadmin
HTML创意动画代码 目录1、动态气泡背景2、创意文字3、旋转立方体1、动态气泡背景

推荐整理分享HTML创意动画代码(html制作动画代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html制作动画代码,html动画设计,html 动画,html制作动画代码,html5动画代码,html 动画,html动画设计,html动画制作,内容如对您有帮助,希望把文章链接给更多的朋友!

<!DOCTYPE html><html><head><title>Bubble Background</title><style>body {margin: 0;padding: 0;height: 100vh;background: #222;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}h1 {color: white;font-size: 4rem;z-index: 1;}</style></head><body><canvas id="canvas"></canvas><h1>Hello Boy!</h1><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;class Bubble {constructor(x, y, radius, color) {this.x = x;this.y = y;this.radius = radius;this.color = color;this.dx = Math.random() - 0.5;this.dy = Math.random() - 0.5;this.speed = Math.random() * 5 + 1;}draw() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();}update() {if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {this.dx = -this.dx;}if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {this.dy = -this.dy;}this.x += this.dx * this.speed;this.y += this.dy * this.speed;}}const bubbles = [];function init() {for (let i = 0; i < 50; i++) {const radius = Math.random() * 50 + 10;const x = Math.random() * (canvas.width - radius * 2) + radius;const y = Math.random() * (canvas.height - radius * 2) + radius;const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`;bubbles.push(new Bubble(x, y, radius, color));}}function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);bubbles.forEach((bubble) => {bubble.draw();bubble.update();});}init();animate();</script></body></html>HTML创意动画代码(html制作动画代码)

这个代码使用了 Canvas 技术,创建了一个随机生成的气泡背景并且让气泡动态漂浮,形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意,比如修改气泡的数量、大小、颜色,以及运动的方式等等。

2、创意文字

<!DOCTYPE html><html><head><title>Rainbow Text</title><style>body {background: black;color: white;font-family: 'Open Sans', sans-serif;text-align: center;height: 100%;display: flex;flex-direction: column;justify-content: center;}h1 {font-size: 8em;margin: 100px auto;animation: rainbow 5s ease-in-out infinite;}@keyframes rainbow {0% {color: #ff0000;text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;}25% {color: #ff8000;text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000;}50% {color: #ffff00;text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00;}75% {color: #00ff00;text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;}100% {color: #0000ff;text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;}}</style></head><body><h1>Hello Girl</h1></body></html>

这个代码使用了 CSS 的动画和阴影特效,让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化,形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意,比如修改文字的大小、样式、颜色,以及变化的频率和方式等等。

3、旋转立方体

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>旋转立方体</title> <style> #cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 6s infinite linear;margin: 100px auto; } #cube div { position: absolute; width: 200px; height: 200px; background-color: rgba(0, 255, 255, 0.5); border: 2px solid #333; } #cube .front { transform: translateZ(100px); } #cube .back { transform: rotateY(180deg) translateZ(100px); } #cube .right { transform: rotateY(90deg) translateZ(100px); } #cube .left { transform: rotateY(-90deg) translateZ(100px); } #cube .top { transform: rotateX(90deg) translateZ(100px); } #cube .bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } </style> </head> <body> <div id="cube"> <div class="front"></div> <div class="back"></div> <div class="right"></div> <div class="left"></div> <div class="top"></div> <div class="bottom"></div> </div> <script> const cube = document.querySelector('#cube'); let isPaused = false; cube.addEventListener('mouseover', () => { isPaused = true; cube.style.animationPlayState = 'paused'; }); cube.addEventListener('mouseout', () => { isPaused = false; cube.style.animationPlayState = 'running'; }); setInterval(() => { if (!isPaused) { cube.style.animationPlayState = 'running'; } }, 1000); </script> </body></html>

该示例中,我们使用了 transform-style: preserve-3d 属性来创建 3D 空间通过对立方体不同面的旋转实现了立方体的旋转效果。我们还使用了 CSS 动来实现无限循环的旋转效果,并使用 JavaScript 实现了当鼠标悬停在立方体上时暂停动画的交互效果。

本文链接地址:https://www.jiuchutong.com/zhishi/295917.html 转载请保留说明!

上一篇:Opencv项目实战:18 人体姿态检测(opencv开发项目)

下一篇:AI生成图像竟如此真实了?Stable Diffusion Model本地部署教程(ai生成图形)

  • 抖音公会可以直接退出吗(抖音公会可以直接发工资吗)

    抖音公会可以直接退出吗(抖音公会可以直接发工资吗)

  • ios禁止更新描述文件(ios禁止更新描述文件 最新)

    ios禁止更新描述文件(ios禁止更新描述文件 最新)

  • 微信语音最多几个人(微信语音最多几个人听)

    微信语音最多几个人(微信语音最多几个人听)

  • 享换机多久打电话审核(享换机逾1天会爆通讯录吗)

    享换机多久打电话审核(享换机逾1天会爆通讯录吗)

  • 一直显示正在擦除数据(一直正在等待抹掉)

    一直显示正在擦除数据(一直正在等待抹掉)

  • 如何视频聊天开手电筒(视频聊天怎么开)

    如何视频聊天开手电筒(视频聊天怎么开)

  • 滴滴打不开怎么回事(滴滴打不开怎么办)

    滴滴打不开怎么回事(滴滴打不开怎么办)

  • 腾讯课堂直播多久可以回放(腾讯课堂直播多久生成回放)

    腾讯课堂直播多久可以回放(腾讯课堂直播多久生成回放)

  • 乐播投屏没有投屏码(乐播投屏没有投相册)

    乐播投屏没有投屏码(乐播投屏没有投相册)

  • soul注销对方会看到吗(soul注销后别人看到你是什么样子)

    soul注销对方会看到吗(soul注销后别人看到你是什么样子)

  • 钢化膜贴歪了怎么办(钢化膜贴歪了怎么修复)

    钢化膜贴歪了怎么办(钢化膜贴歪了怎么修复)

  • 12306能电话订票吗(12306电话订票流程 详细)

    12306能电话订票吗(12306电话订票流程 详细)

  • 天猫兑换积分在哪(天猫积分兑换后有效期是多久)

    天猫兑换积分在哪(天猫积分兑换后有效期是多久)

  • 哪些手机支持息屏显示(什么手机支持neon)

    哪些手机支持息屏显示(什么手机支持neon)

  • 怎么才能恢复微信上的聊天记录(怎么才能恢复微信删除的好友)

    怎么才能恢复微信上的聊天记录(怎么才能恢复微信删除的好友)

  • iphone11pro颜色(iphone11pro颜色真图)

    iphone11pro颜色(iphone11pro颜色真图)

  • 惠普传真机怎么传真(惠普传真机怎么取消自动传真)

    惠普传真机怎么传真(惠普传真机怎么取消自动传真)

  • 淘宝钱包余额在哪(淘宝零钱余额)

    淘宝钱包余额在哪(淘宝零钱余额)

  • 美团红包是商家承担吗(美团红包是商家承担规则)

    美团红包是商家承担吗(美团红包是商家承担规则)

  • word如何删除占位符(清除word)

    word如何删除占位符(清除word)

  • 荣耀手环4与小米手环3区别(荣耀手环4小米手机可以用吗)

    荣耀手环4与小米手环3区别(荣耀手环4小米手机可以用吗)

  • 手机qq邮箱怎么下载照片(手机qq邮箱怎么发压缩包)

    手机qq邮箱怎么下载照片(手机qq邮箱怎么发压缩包)

  • 滴滴代叫是怎么回事(滴滴代叫怎么操作)

    滴滴代叫是怎么回事(滴滴代叫怎么操作)

  • 如何把现有分区划分为更多分区(怎么给分区)

    如何把现有分区划分为更多分区(怎么给分区)

  • 【前端】Vue+Element UI案例:通用后台管理系统-导航栏(前端vue3)

    【前端】Vue+Element UI案例:通用后台管理系统-导航栏(前端vue3)

  • 递延所得税抵消分录
  • 过路费抵扣进项税填在申报表哪里
  • 公司组织出国旅游费用
  • 撤回或减少投资同撤资减资的区别
  • 行政事业单位住房基金
  • 购买电商平台
  • 公司税务状态变更怎么办
  • 销售票据和发票的区别是什么?
  • 对外支付代扣代缴
  • 佣金收入者是什么意思
  • 应收账款计提坏账后收回
  • 实物投资没有发票咋办
  • 公司注销固定资产交什么税
  • 资产减值损失是
  • 服务费不开发票可以做无票收入吗?
  • 普通发票和专用发票的税点一样吗
  • 土地增值税计算题及答案解析
  • 普票冲红需要收回全部联次吗
  • 开发商开临时发票
  • 年度账套怎么结转下一年
  • 一张记账凭证写不下时,附件怎么写
  • 一般纳税人增值税申报操作流程
  • 政府补贴收入账户是什么
  • 从租计征房产税租金收入含税吗
  • 库存股股本属于什么科目,借贷方向
  • 预提成本的账务处理
  • 工厂院子里的地图怎么画
  • w10触摸键盘
  • 摊销费用的会计科目
  • 如何修复错误 OC3 INVT CHF100a
  • 计提固定资产折旧怎么做会计科目
  • PHP:pg_connect_poll()的用法_PostgreSQL函数
  • npfmntor.exe - npfmntor是什么进程 有什么用
  • 利用php计算1+2+3+...+100
  • Windows11报sill idealTree buildDeps安装慢或者卡顿解决方案
  • 超市进货产品
  • 湘菜尖椒炒肉的做法
  • 中小企业成本核算方法
  • 公司电路改造费怎么账务处理
  • 九斑蛾,瑞士 (© Thomas Marent/Minden Pictures)
  • 汇编语言a命令怎么用
  • 小规模纳税人增值税月末处理
  • python里面的类
  • 企业对于预支工资的建议
  • 存量资金上缴财政款 预算会计
  • python中的元组
  • 成立一般纳税人公司流程
  • 汇算清缴思路
  • 行政事业单位赞助支出会计核算办法
  • 全年一次性奖金单独计税还是并入
  • 检测费用的会计分录
  • 车辆购置税在哪个app交
  • 支出费用的区别
  • 资产负债表资产按照什么顺序
  • 分公司第二季度总结报告
  • 所有者权益是什么意思
  • 营业收入的核算内容包括
  • mysql命令行导出结果
  • sql空值用什么表示
  • mysql文件存储路径设置
  • linux中安装vim命令
  • win7系统怎么禁止软件自启动
  • windows传输到mac
  • win7可以免费升win10
  • win8在哪里看安装的所有程序
  • linux shell怎么用
  • linux find命令详解xargs
  • windows mobile10
  • win7运行速度
  • cocos2d-x引擎
  • Ext JS 4实现带week(星期)的日期选择控件(实战二)
  • jquery实现select选择框内容左右移动代码分享
  • cocos2dx-3.0(23) ScrollView 缩放 及 touch新用法
  • 浅析javascript中function 的 length 属性
  • 数组observer
  • python获取当前日期的前一天
  • javascript的
  • 安卓手机后退键
  • python迭代器iterator
  • 郑州国税局投诉电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设