当我看到 Katy Perry 的网站时，我有了创建纯代码驱动的条纹图像背景的想法: http://www.katyperry.com/
然后在FoWD的404页面看到了地球旋转的动画: http://futureofwebdesign.com/404
我相信使用 html5、css3 和 canvas 应该可以实现相同的概念。这就是我的想法:让静态内容文本在 bg 中缓慢阅读，条纹(类似于 Katy 网站上的 bg 图像)将无限旋转(类似于 FoWD 的图形)，但所有这些都无需使用图像或其他图形。显然，由于其他浏览器的限制，目标浏览器将是 Firefox、Chrome 和 Safari。
这可以不使用光栅图像或 javascript 来完成吗？我完全是 canvas 和 javascript 的菜鸟，但我确实了解这些技术使用的概念，但不知道从哪里开始。它现在更像是一个概念证明，但我想将它用于即将进行的元素。
最佳答案
如果您有一个基本图像(或文本或其他东西)，您可以使用 CSS3 转换来移动它(这就是 FoWD 的 404 页面上使用的 - 使用 CSS3 转换转换的静态图像)。它们在许多浏览器中都没有得到很好的支持，但是如果您知道您的目标支持它，您可以使用它。此页面显示如何使用 CSS 转换创建旋转效果:http://davidwalsh.name/css-transform-rotate .此外，这是 FoWD 的 404 页面上用于使图像旋转的代码:
#earth {
-webkit-animation-name: earthRotation;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 500s;
}
@-webkit-keyframes earthRotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
因此，使用一个简单的 HTML 页面，例如:
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
<div id="earth" style="text-align: center;">This content will spin!</div>
<div style="text-align: center;">This will not :(</div>
</body>
</html>
如果 animation.css 是上面的 CSS 东西，div#earth 的内容将永远旋转!然后，您可以替换“This content will spin!”用你自己的东西。如果您想将其用作背景(如 FoWD 的 404 页面)，只需添加 CSS position: absolute; width: 100%; z-index: -1;所以它会作为背景出现。然后，你可以把你的 <canvas> div#earth 里面的东西，它会旋转。另外，您可以调整 -webkit-animation-duration在CSS文件中修改动画的速度。
如果您因为浏览器支持而无法使用 CSS3 转换，那么如果没有动画图像或 javascript 就几乎无法创建。
关于animation - 如何创建彩色条纹背景，动画缓慢旋转 360 度，不使用光栅图像或 js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3192147/