當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML创意动画代码

發布時間：2023/12/31 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 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创意动画代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：软件工程国考总结——选择题
下一篇：【百科】前端/後端、前台/後台的英文選擇