在网页设计中,动画经常被用来吸引注意力,移动会迫使用户将注意力集中在特定的元素上,比如按钮或图像。
但是动画也可以以更微妙的方式使用。例如,动画背景通常会忽略网站内容中的花里胡哨,相反的,它们被用来创造情绪和增强美学。
这并不是说动画背景不能很吵,甚至不能令人讨厌。这完全取决于元素展示背后的目的。如果真要说有什么不同的话,那就是这展示了设计师所拥有的灵活性。
下面收集了CodePen 上一些超棒的动画背景,一起用起来吧!
散景动画
散景风格常常与摄影联系在一起。在这里,它被用来作为点进出焦点很大的效果-类似于熔岩灯。这个代码片段利用普通的 JavaScript 和 HTML 画布来创建一个光滑的背景。
磨砂动画
这个背景是一个完美匹配了“磨砂”效果的用户界面,可以看到球体轻轻地漂浮在下面的玻璃样容器中,动画也是随机生成。
CSS波浪动画
下面是一个简单的使用动画背景的方法。CSS wave 提供了一种将主区域与页面内容的其余部分分离开来的方法,将一个很好的介绍部分呈现给用户。
CSS 渐变动画
渐变显而易见地是一个很酷的动画背景,这里有一个径向渐变,可以微妙地改变色调。
CSS无缝动画文本
使用 CSS 背景剪辑可以给设计元素增加一些突出的影响。这个代码片段为标题文本添加了一个无缝的滚动背景,可以立即创建一个节日的气氛。
纯 CSS 动画
速度在动画背景的用户友好性中起着至关重要的作用。这些缓慢滚动的正方形可能会扭曲和转动,但这样允许更容易地阅读的标题。如果你想在动画上面添加文字,慢动作会更好。
SVG 动画
最后,这个代码片段巧妙地利用了我们在上面看到的效果的组合。有变化的梯度色调以及轻微变化的形状。SVG 和 CSS 确保一切顺利运行,重要的是,它在一个小的视窗上和在桌面上一样漂亮。