Question

当我看到Katy Perry的网站时，我有了创建纯代码驱动的条纹图像背景的想法： http://www.katyperry.com/

然后我在FoWD的404页面上看到旋转地球的动画： http://futureofwebdesign.com/404

我相信使用html5，css3和canvas可以实现相同的概念。这就是我的想法：在bg中慢慢地读取静态内容文本条纹（类似于Katy网站上的bg图像）将无限旋转（类似于FoWD的图形），但都不使用图像或其他图形。显然，由于其余的限制，目标浏览器将是Firefox，Chrome和Safari。

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

Answer 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的情况下创建它几乎是不可能的。

如何创建彩色条纹背景，动画缓慢旋转360度，不使用光栅图像或js？

1 个答案: