HTML创意动画代码

本文介绍: 这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。该示例中，我们使用了 transform–style: pre serve-3d 属性

1、动态 气泡 背景

请添加图片描述

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Bubble Background&lt;/title&gt;
	<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>