HTML创意动画代码

1、动态气泡背景

<!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>

这个代码使用了 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 实现了当鼠标悬停在立方体上时暂停动画的交互效果。

HTML创意动画代码相关推荐

CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
python 矩阵获取行数_4个最佳项目创意的代码片段和示例，旨在为Python和机器学习构建出色的简历！...
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达一篇文章带你了解4个最佳项目创意的代码片段和示例 Python是一 ...
jquery实现：返回顶部（动画·代码精简版）- 代码篇
jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...
html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
HTML5+Canvas知乎登录页面动态线条背景动画代码 body{ text-align: center; background: #F7FAFC; overflow: hidden; backgr ...
canvas动画科技园_Canvas 写的酷炫动画代码分析
霓虹灯线形成的自发六边形,随机性生成火花在看这篇文章时,里面有个动画的示例(如上图),然后感觉有点很酷炫,就打算了解一下怎么写的.( 先上代码示例链接) 前景提要需要先确保你还记得三角函数的知识. ...
一个简单的Python樱花飘落动画代码
以下是一个简单的Python樱花飘落动画代码示例: import random import time# 定义控制台大小和颜色 WIDTH = 80 HEIGHT = 25 COLORS = ['\0 ...
HTML绘制齿轮,HTML5模拟齿轮动画代码实例
HTML代码 css代码#level{ width:100%; height:1px; position:absolute; top:50%; } #content{ text-align:cente ...
4个最佳项目创意的代码片段和示例，旨在为Python和机器学习构建出色的简历！...
点击关注我哦一篇文章带你了解4个最佳项目创意的代码片段和示例 Python是一种特殊的编程语言,适用于从初学者到中级用户.由于它的灵活性,它正逐渐成为一种非常流行的语言,也是当今人们谈论最多的编码语 ...
爱情树的html代码,index.html · RuanJiaFeng/爱情树 Html5实现唯美表白动画代码 - Gitee.com...
jQuery+Html5实现唯美表白动画代码 .STYLE1 { color: #666666 } 本页面采用HTML5编辑,目前您的浏览器无法显示,请换成谷歌(Chrome)或者火狐(Firefox ...

HTML创意动画代码

目录

1、动态气泡背景

2、创意文字

3、旋转立方体

HTML创意动画代码相关推荐

最新文章

热门文章