位置: 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生成图形)

  • 微博营销推广12个技巧(微博营销推广活动有哪些)

    微博营销推广12个技巧(微博营销推广活动有哪些)

  • 退款编号和订单编号一样吗(退款编号和退款单号一样吗)

    退款编号和订单编号一样吗(退款编号和退款单号一样吗)

  • 无线能上网但是电脑有线上不了网(无线能上网但是不能玩手游)

    无线能上网但是电脑有线上不了网(无线能上网但是不能玩手游)

  • 为什么抖音拍同款音乐那么短(为什么抖音拍同款录不上声音)

    为什么抖音拍同款音乐那么短(为什么抖音拍同款录不上声音)

  • 为什么微信不能二次转发名片(为什么微信不能@所有人)

    为什么微信不能二次转发名片(为什么微信不能@所有人)

  • hlk-aloo是什么手机(hlk al00是什么手机)

    hlk-aloo是什么手机(hlk al00是什么手机)

  • 腾讯视频自动续费可以退钱吗(腾讯视频自动续费了可以退款吗)

    腾讯视频自动续费可以退钱吗(腾讯视频自动续费了可以退款吗)

  • 固态硬盘越大运行速度越快吗(固态硬盘越大速度越快吗)

    固态硬盘越大运行速度越快吗(固态硬盘越大速度越快吗)

  • 苹果xr电池不耐用怎么办(苹果xr电池寿命掉的快)

    苹果xr电池不耐用怎么办(苹果xr电池寿命掉的快)

  • 魅族usb计算机连接只能仅充电(魅族usb计算机连接只能仅充电不能调)

    魅族usb计算机连接只能仅充电(魅族usb计算机连接只能仅充电不能调)

  • 拼多多下架的商品可以退货吗(拼多多下架的商品怎么上架)

    拼多多下架的商品可以退货吗(拼多多下架的商品怎么上架)

  • iphonex美版和国行的区别(美版苹果x与国产的区别)

    iphonex美版和国行的区别(美版苹果x与国产的区别)

  • 淘宝短信提醒怎么取消(淘宝短信提醒怎么关?)

    淘宝短信提醒怎么取消(淘宝短信提醒怎么关?)

  • ios13.3新功能(苹果13.3系统新功能)

    ios13.3新功能(苹果13.3系统新功能)

  • 手机怎么改淘宝生日(手机怎么改淘宝登录密码)

    手机怎么改淘宝生日(手机怎么改淘宝登录密码)

  • 笔记本屏幕坏了怎么外接显示器(笔记本屏幕坏了怎么把资料导出来)

    笔记本屏幕坏了怎么外接显示器(笔记本屏幕坏了怎么把资料导出来)

  • vivox21呼叫转移怎么取消(vivox21呼叫转移怎么设置)

    vivox21呼叫转移怎么取消(vivox21呼叫转移怎么设置)

  • 黄瓜视频又改地址了吗(黄瓜视频是不是换新地址了?)

    黄瓜视频又改地址了吗(黄瓜视频是不是换新地址了?)

  • 8p重量多少克(苹果手机8p重量是多少)

    8p重量多少克(苹果手机8p重量是多少)

  • 华为mrdal00手机什么型号(华为mrdal00手机多少钱)

    华为mrdal00手机什么型号(华为mrdal00手机多少钱)

  • 苹果xr几个摄像头(苹果xr有多少个摄像头)

    苹果xr几个摄像头(苹果xr有多少个摄像头)

  • 腾讯视频的缓存文件在哪里(腾讯视频的缓存路径怎么改)

    腾讯视频的缓存文件在哪里(腾讯视频的缓存路径怎么改)

  • 苹果手机怎么开设备锁(苹果手机怎么开空调)

    苹果手机怎么开设备锁(苹果手机怎么开空调)

  • 趣步交换密码怎么设置(趣步交换密码怎么取消)

    趣步交换密码怎么设置(趣步交换密码怎么取消)

  • 怎么看自己的airpods是第一代还是第二代(怎么看自己的airpods是第三代)

    怎么看自己的airpods是第一代还是第二代(怎么看自己的airpods是第三代)

  • 应交税费是什么类
  • 收入准则范围内
  • 劳务收入个税需要进行所得税汇算吗
  • 组织机构代码是营业执照哪几位数字
  • 福利企业发放职工集资利息是不是要交个人所得税
  • 应缴所得税包括哪些税种
  • 商贸企业出口退税计算公式
  • 营改增后甲供材如何扣除
  • 本年利润怎样结转未分配利润
  • 2021年工作绩效未达标扣工资
  • 补充协议如何生效
  • 本月征期2021
  • 开办生产建设项目
  • 软件维护费入什么科目
  • 土地使用税如何计算缴纳
  • 水利建设专项收入
  • 分拆业务所涉及客户
  • 普通发票每个月有限制吗
  • 中小企业代扣代缴增值税抵扣时限
  • 收到投资款现金流量项目是什么
  • 批发led电子屏
  • 小规模纳税人三个月做一次账
  • 汽车的增值税可以退税吗
  • 员工垫付货款走报销吗
  • 人民法院被收买了怎么办
  • 预付货款样品费怎么入账
  • 工程业务提成协议合法吗
  • 收到工会经费怎样做账
  • 奖励先进个人计划怎么写
  • 如何在win7系统中查看电脑基本信息
  • php测验
  • 以产品对外投资需要进项税额转出吗
  • Mtdacq.exe - Mtdacq是什么进程 有什么用
  • 期权能套现吗
  • 劳务费支出计入什么科目?
  • php利用switch语句判断学生成绩处于哪个区间
  • wisdm数据集
  • php自定义变量的方法是
  • ajax调用
  • 向梵高致敬油画
  • 利润表管理费用包括哪些内容
  • 拆迁补偿账务处理办法
  • php 更新
  • db2 decoupled
  • 企业购买汽车的进项税可以抵扣吗
  • 什么叫做有限循环小数
  • 临时工受伤赔偿怎么做账
  • 抵账房买卖流程
  • 企业所得税汇算清缴时间
  • 不按规定纳税的违法行为
  • 退货属于什么物流
  • 电子设备按5年折旧可以吗?
  • 预收账款的借贷方向增减
  • 电脑开机显示xp后无反应
  • windows service 2008 r2
  • bios的含义
  • zhp.exe是什么进程
  • linux命令大全chm版
  • putty ssh tunnel
  • 虚拟光驱安装
  • SMceMan.exe - SMceMan进程是什么意思
  • win10高分辨率
  • netsurf.exe - netsurf是什么进程 有什么用
  • 怎么下载win8
  • linux安装步骤
  • cocos2d环境配置
  • 如何让卖家给你乖乖退款
  • Qt Quick + OpenGL + Bullet初次测试
  • 谈谈jQuery Ajax用法详解
  • linux中的shell命令
  • td nowrap css nowrap使用说明于注意事项
  • angular scope
  • 服务器限制流量
  • unity 设置物体角度
  • unity怎么替换模型位置
  • 知道金额和税额怎么求
  • 查询完毕
  • 车辆购置税退税申请表
  • 地源热泵有收费标准吗
  • 新疆喀什泽普县教育局联系电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设