不用js怎么做动漫框

不用JavaScript可以使用纯CSS、SVG、Canvas绘图技术来制作动漫框。其中，CSS和SVG是最常用的方式，因为它们可以通过简单的样式和矢量图形来实现动画效果。具体的实现可以通过使用CSS动画、SVG动画以及Canvas绘图技术来完成。下面将详细介绍如何使用这些技术来制作动漫框。

一、使用CSS动画制作动漫框

1.1 CSS动画的基本原理

CSS动画通过定义关键帧（keyframes）和动画属性来创建动画效果。关键帧定义了动画的不同状态，而动画属性则用来控制动画的时长、延迟、次数等。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

1.2 动漫框的具体实现

通过使用CSS动画，可以制作出一个简单的动漫框效果。假设我们要实现一个从左到右移动的动画框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation Example</title>
  <style>
    .anime-box {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: relative;
      animation: moveRight 2s infinite;
    }
    @keyframes moveRight {
      0% {
        left: 0;
      }
      50% {
        left: 50%;
      }
      100% {
        left: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="anime-box"></div>
</body>
</html>

在上述代码中，通过定义@keyframes和animation属性，实现了一个从左到右移动的蓝色方框。

二、使用SVG动画制作动漫框

2.1 SVG动画的基本原理

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，适用于在网页中显示复杂的图形。SVG支持多种动画属性，可以通过<animate>、<animateTransform>等标签来实现动画效果。

2.2 动漫框的具体实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Animation Example</title>
</head>
<body>
  <svg width="200" height="200">
    <rect x="10" y="10" width="30" height="30" fill="blue">
      <animate attributeName="x" from="10" to="170" dur="2s" repeatCount="indefinite" />
    </rect>
  </svg>
</body>
</html>

在上述代码中，通过使用<animate>标签实现了一个从左到右移动的蓝色方框。

三、使用Canvas绘图技术制作动漫框

3.1 Canvas绘图技术的基本原理

Canvas是一种基于JavaScript的图形绘制技术，可以通过使用<canvas>标签和相关的API来绘制各种图形和动画。虽然问题要求不使用JavaScript，但Canvas技术的核心在于绘图，可以通过预定义的图形和动画来实现。

3.2 动漫框的具体实现

虽然Canvas技术通常需要JavaScript，但可以通过预定义的动画序列和定时器来实现类似效果。下面是一个简单的例子，展示如何使用Canvas绘制一个静态的动漫框。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Example</title>
</head>
<body>
  <canvas id="animeCanvas" width="200" height="200"></canvas>
  <script>
    const canvas = document.getElementById('animeCanvas');
    const ctx = canvas.getContext('2d');
    // 绘制一个静态的蓝色方框
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 50, 50);
  </script>
</body>
</html>

尽管Canvas绘图通常需要JavaScript来动态更新动画，但通过预定义的图形，仍然可以实现静态的动漫框效果。

四、综合应用

4.1 结合CSS和SVG

为了实现更复杂的动画效果，可以结合使用CSS和SVG。例如，可以使用CSS来控制SVG元素的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Combined Animation Example</title>
  <style>
    .anime-svg {
      width: 200px;
      height: 200px;
      animation: rotate 4s linear infinite;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <svg class="anime-svg" viewBox="0 0 100 100">
    <rect x="25" y="25" width="50" height="50" fill="blue" />
  </svg>
</body>
</html>

在上述代码中，通过CSS动画控制SVG元素实现了一个旋转的蓝色方框。

4.2 结合Canvas和CSS

虽然Canvas主要依赖JavaScript，但可以通过CSS来控制Canvas的外观和位置。例如，可以使用CSS来控制Canvas的透明度、大小等属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas and CSS Example</title>
  <style>
    .canvas-container {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      position: relative;
      animation: fadeInOut 3s infinite;
    }
    @keyframes fadeInOut {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
  </style>
</head>
<body>
  <div class="canvas-container">
    <canvas id="animeCanvas" width="200" height="200"></canvas>
  </div>
  <script>
    const canvas = document.getElementById('animeCanvas');
    const ctx = canvas.getContext('2d');
    // 绘制一个静态的蓝色方框
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 100);
  </script>
</body>
</html>

在上述代码中，通过CSS动画控制Canvas容器的透明度，实现了一个淡入淡出的效果。

五、总结

不用JavaScript制作动漫框，可以通过CSS动画、SVG动画、Canvas绘图技术等多种方式来实现。其中，CSS动画和SVG动画是最常用且简单的方式，而Canvas绘图则可以实现更复杂的图形和动画效果。通过合理使用这些技术，可以在不依赖JavaScript的情况下实现丰富的动漫框效果。