在互联网时代,HTML5动画因其跨平台和易实现的特性,成为了网页设计和开发中的热门工具。对于新手来说,通过一些简单的动画实例学习HTML5动画,是快速掌握其要领的好方法。以下是5个新手必备的简单HTML5动画源码实例,让你轻松入门。
1. CSS3动画:旋转的立方体
通过CSS3的@keyframes规则和transform属性,我们可以制作一个旋转的立方体动画。以下是一个基本的示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旋转的立方体</title>
<style>
.cube {
width: 100px;
height: 100px;
margin: 50px;
position: relative;
transform-style: preserve-3d;
animation: spin 3s infinite linear;
}
.face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.front {
background-color: red;
transform: translateZ(50px);
}
.back {
background-color: blue;
transform: rotateY(180deg) translateZ(50px);
}
/* 添加另外两个面的样式 */
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
</style>
</head>
<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<!-- 添加其他面的div -->
</div>
</body>
</html>
2. Canvas动画:绘制跳动的心形
使用HTML5的<canvas>元素,我们可以绘制动态的心形图案。以下是一个简单的跳动心形动画实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>跳动的心形动画</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="heartCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('heartCanvas');
var ctx = canvas.getContext('2d');
function drawHeart() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var scale = 1;
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.closePath();
ctx.scale(scale, scale);
ctx.fillStyle = '#FF0000';
ctx.fill();
}
setInterval(drawHeart, 1000);
</script>
</body>
</html>
3. JavaScript动画:移动的星星
使用JavaScript,我们可以让星星在网页中移动,营造出夜空的效果。以下是一个简单的星星移动动画实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>移动的星星</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
.star {
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 50%;
position: absolute;
animation: move 10s infinite ease-in-out;
}
</style>
</head>
<body>
<script>
function createStar() {
var star = document.createElement('div');
star.classList.add('star');
star.style.left = Math.random() * window.innerWidth + 'px';
star.style.top = Math.random() * window.innerHeight + 'px';
document.body.appendChild(star);
star.animate([
{ transform: 'translate(-50%, -50%) scale(1)' },
{ transform: 'translate(-50%, -50%) scale(1.5)' },
{ transform: 'translate(-50%, -50%) scale(1)' }
], {
duration: 3000,
iterations: Infinity
});
}
for (var i = 0; i < 50; i++) {
createStar();
}
</script>
</body>
</html>
4. SVG动画:缩放的图形
SVG动画可以通过改变图形的属性来制作动态效果。以下是一个简单的图形缩放动画实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>缩放的图形</title>
</head>
<body>
<svg width="100" height="100">
<rect id="rectangle" width="100" height="100" fill="blue"/>
</svg>
<script>
var rectangle = document.getElementById('rectangle');
rectangle.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1.5)' },
{ transform: 'scale(1)' }
], {
duration: 2000,
iterations: Infinity
});
</script>
</body>
</html>
5. WebGL动画:3D旋转的立方体
WebGL是HTML5的3D图形API,可以通过JavaScript来操作。以下是一个使用WebGL创建的3D旋转立方体动画实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D旋转的立方体</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="cubeCanvas"></canvas>
<script>
// WebGL 初始化代码
var canvas = document.getElementById('cubeCanvas');
var gl = canvas.getContext('webgl');
// 顶点着色器
var vertexShaderSource = `
attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}
`;
// 片段着色器
var fragmentShaderSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 创建程序并编译着色器
// ...
// 设置矩阵
// ...
// 绘制立方体
// ...
</script>
</body>
</html>
这些实例涵盖了HTML5动画的不同方面,从基础的CSS3到复杂的WebGL。通过这些实例,你可以逐步掌握HTML5动画的技巧,并在实际项目中应用。
