Animation 我如何创建一个彩色条纹的背景，动画慢慢地转360度，不使用光栅图像或js？_Animation_Html_Canvas_Background_Css

Animation 我如何创建一个彩色条纹的背景，动画慢慢地转360度，不使用光栅图像或js？

animation html canvas css

Animation 我如何创建一个彩色条纹的背景，动画慢慢地转360度，不使用光栅图像或js？,animation,html,canvas,background,css,Animation,Html,Canvas,Background,Css,当我看到Katy Perry的网站时，我产生了创建纯代码驱动的条纹图像背景的想法：然后我在FoWD的404页面上看到了地球旋转的动画：我相信使用html5、css3和canvas也可以实现同样的概念。以下是我的想法：在背景中缓慢阅读静态内容文本时，条纹（类似于Katy网站上的背景图像）将无限旋转（类似于FoWD的图形），但无需使用图像或其他图形。显然，由于其他浏览器的限制，目标浏览器将是Firefox、Chrome和Safari 是否可以不使用光栅图像或javascript实现这一点？我

当我看到Katy Perry的网站时，我产生了创建纯代码驱动的条纹图像背景的想法：

然后我在FoWD的404页面上看到了地球旋转的动画：

我相信使用html5、css3和canvas也可以实现同样的概念。以下是我的想法：在背景中缓慢阅读静态内容文本时，条纹（类似于Katy网站上的背景图像）将无限旋转（类似于FoWD的图形），但无需使用图像或其他图形。显然，由于其他浏览器的限制，目标浏览器将是Firefox、Chrome和Safari

是否可以不使用光栅图像或javascript实现这一点？我完全不懂画布和javascript，但我确实理解这些技术使用的概念，但不知道从哪里开始。现在它更像是一个概念证明，但我想在即将到来的项目中使用它。

如果你有一个基本的图像（或文本或其他东西），你可以使用CSS3转换来移动它（这是FoWD的404页面上使用的——一个使用CSS3转换的静态图像）。它们在许多浏览器中都不受很好的支持，但是如果您知道您的目标支持它，您可以使用它。此页面显示如何使用CSS转换创建旋转效果：。此外，这是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

位置：绝对；宽度：100%；z-index:-1；

，它就会显示为背景。然后，你可以将你的

东西放在div#earth中，它就会旋转。此外，你还可以在CSS文件中调整

-webkit动画持续时间来修改动画的速度。




如果你因为浏览器支持而不能使用CSS3转换，那么在没有动画图像或javascript的情况下创建几乎是不可能的。
很酷，谢谢你的反馈！我正在查看CSS，看到了你在这里写的内容。我想这是最简单的部分！哈哈，现在如果我能想出如何使用画布制作条纹bg，我想这将是一个很好的方法uld工作得很好。我很惊讶CSS3还没有办法重现一些不确定的条纹。另外，您可以在Mozilla开发者中心的canvas教程（）中查看。