如何增加网站的动感效果，有哪些css效果

你设计了一个新的网站，你对此感到很兴奋。你花了几个小时仔细研究最小的细节 – 找到完美的字体，将该图标向下移动两个像素，然后调整一个，调制一个令人愉快的偏心调色板。你认为这是一个非常完美的Sketch文件：是否有博物馆？

您设置了一个会议，将您的设计交给开发人员。你向他们展示了你很酷的想法，回答了一些问题，提出了一些问题等等。几周之后，你的开发人员会返回完成的网站，然后…… 好吧，它看起来不错，但有些事情并不完全正确。当然，它与设计相匹配，但由于某些原因它并不是很流行。它看起来不错，但不像Allbirds那样好。少了什么东西？

这是一个秘密：您的开发人员可能同意您的意见。

当我开始进行Web开发时，我会建立一个规范的网站，但想知道为什么它没有Allbirds的香料。但是多年来，我已经学会了许多开发人员可以实现的技巧，以给予那些额外流行的网站。下次你参加那次交接会议时，请向你的开发人员询问这6个简单的事情：

链接和按钮上的悬停转换

第一个是轻松的胜利。您可以通过一百万种方式在链接上添加创意动画和转场，但老实说，即使在悬停时向不透明度更改添加一点转换也会将您的网站提升到一个新的水平。

淡化或幻灯片而不是显示/隐藏

这也是一场轻松的胜利。当使用jQuery显示或隐藏元素时，您可以做的最简单的事情是将其切换为幻灯片或淡入淡出。或者，再次对几乎任何元素转换添加转换，这样就不会有这种刺耳的体验。

字体Flash

你知道当你第一次访问一个网站的时候，有时候你会看到Times New Roman或者Helvetica，然后才能看到时髦的字体吗？发生这种情况是因为文本首先在页面上呈现，但是Javascript需要时间来加载字体。它近年来并不常见，但如果遇到它，这里有一个简单的解决方法。基本上，您加载隐藏文本的页面，并仅在加载字体后显示文本。

页面加载器

如果您有一个图片密集的网站或您的用户使用慢速互联网连接，页面加载时间可能会很长。就像，几秒钟。一些痛苦秒，而用户观看网页斗争加载资产，样式，字体，视频和其他任何为在网站上。为什么不将加载时间变成有趣的小体验？您可以设计一个有趣的动画作为页面加载器。它在用户等待时运行。

形式

现在我们要去大奶酪了。如果你真的想要从用户那里击败袜子，那么最好的方法之一就是用一种奇特的形式。Typeform在其上建立了一个业务。表单是站点中唯一的交互式部分之一，实现一个灵活的表单在开发端需要更多的工作，但它非常值得。以下是一些有趣的表单创意示例，可帮助您获得创意。

页面过渡

最后，绝对最酷（也是最耗时的工具）技巧之一是AJAX页面转换。你有没有想过为什么有些网站会觉得你无缝地移动，而其他网站每次你加载新页面都会让你感到震惊？页面过渡。对于Shopify网站而言，页面转换使您的网站导航变得流畅和轻松。