如何创建彩色条纹背景，动画以缓慢转动 360 度，不使用光栅图像或 js？
Posted
技术标签:
【中文标题】如何创建彩色条纹背景，动画以缓慢转动 360 度，不使用光栅图像或 js？【英文标题】：How can I create a color striped background, animated to slowly turn 360 degrees, using no raster images or js? 【发布时间】：2011-03-12 15:39:18 【问题描述】：当我看到 Katy Perry 的网站时，我萌生了创建一个纯代码驱动的条纹图像背景的想法： http://www.katyperry.com/
然后我在FoWD的404页面看到了地球旋转的动画： http://futureofwebdesign.com/404
我相信使用 html5、css3 和 canvas 应该可以实现相同的概念。这就是我的想法：让静态内容文本在 bg 中缓慢阅读时，条纹（类似于 Katy 网站上的 bg 图像）将无限旋转（类似于 FoWD 的图形），但所有这些都无需使用图像或其他图形。显然，由于其他方面的限制，目标浏览器将是 Firefox、Chrome 和 Safari。
这可以不使用光栅图像或 javascript 来完成吗？我是画布和 javascript 的菜鸟，但我确实了解这些技术使用的概念，但不知道从哪里开始。它现在更像是一个概念证明，但我想将它用于即将到来的项目。
【问题讨论】：
【参考方案1】：如果您有一个基本图像（或文本或其他内容），您可以使用 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 的内容将永远旋转！然后，您可以替换“此内容将旋转！”用你自己的东西。如果你想使用它作为背景（如 FoWD 的 404 页面），只需添加 CSS position: absolute; width: 100%; z-index: -1;，它就会显示为背景。然后，你可以把你的<canvas> 的东西放在 div#earth 里面，它就会旋转掉。另外，您可以在 CSS 文件中调整-webkit-animation-duration 来修改动画的速度。
如果由于浏览器支持而无法使用 CSS3 转换，那么几乎不可能在没有动画图像或 javascript 的情况下创建。
【讨论】：
酷，感谢您的反馈！我正在查看 CSS 并看到您在这里写的内容。我认为这是容易的部分！哈哈现在如果我能弄清楚如何使用画布制作条纹背景，我认为这会很好用。我很惊讶 CSS3 还没有办法重现一些不确定的条纹。 另外，您可以查看 Mozilla 开发者中心的画布教程 (developer.mozilla.org/en/Canvas_tutorial) 中的 developer.mozilla.org/en/Canvas_tutorial/Transformations。以上是关于如何创建彩色条纹背景，动画以缓慢转动 360 度，不使用光栅图像或 js？的主要内容，如果未能解决你的问题，请参考以下文章