使用 CSS 和 JavaScript 构建的超棒的动画背景

1,319 阅读2分钟

在网页设计中,动画经常被用来吸引注意力,移动会迫使用户将注意力集中在特定的元素上,比如按钮或图像。

但是动画也可以以更微妙的方式使用。例如,动画背景通常会忽略网站内容中的花里胡哨,相反的,它们被用来创造情绪和增强美学。

这并不是说动画背景不能很吵,甚至不能令人讨厌。这完全取决于元素展示背后的目的。如果真要说有什么不同的话,那就是这展示了设计师所拥有的灵活性。

下面收集了CodePen 上一些超棒的动画背景,一起用起来吧!

散景动画

散景风格常常与摄影联系在一起。在这里,它被用来作为点进出焦点很大的效果-类似于熔岩灯。这个代码片段利用普通的 JavaScript 和 HTML 画布来创建一个光滑的背景。

磨砂动画

这个背景是一个完美匹配了“磨砂”效果的用户界面,可以看到球体轻轻地漂浮在下面的玻璃样容器中,动画也是随机生成。

CSS波浪动画

下面是一个简单的使用动画背景的方法。CSS wave 提供了一种将主区域与页面内容的其余部分分离开来的方法,将一个很好的介绍部分呈现给用户。

CSS 渐变动画

渐变显而易见地是一个很酷的动画背景,这里有一个径向渐变,可以微妙地改变色调。

CSS无缝动画文本

使用 CSS 背景剪辑可以给设计元素增加一些突出的影响。这个代码片段为标题文本添加了一个无缝的滚动背景,可以立即创建一个节日的气氛。

纯 CSS 动画

速度在动画背景的用户友好性中起着至关重要的作用。这些缓慢滚动的正方形可能会扭曲和转动,但这样允许更容易地阅读的标题。如果你想在动画上面添加文字,慢动作会更好。

SVG 动画

最后,这个代码片段巧妙地利用了我们在上面看到的效果的组合。有变化的梯度色调以及轻微变化的形状。SVG 和 CSS 确保一切顺利运行,重要的是,它在一个小的视窗上和在桌面上一样漂亮。