正文

学会HTML5动画：新手必备的5个简单动画源码实例分享

/0 浏览量
0606

在互联网时代，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动画的技巧，并在实际项目中应用。

-- 展开阅读全文 --