目录
-
- 1、动态气泡背景
- 2、创意文字
- 3、旋转立方体
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 实现了当鼠标悬停在立方体上时暂停动画的交互效果。