让你的 Web 项目有趣起来!

3,500 阅读2分钟
原文链接: zhuanlan.zhihu.com

上一篇文章介绍了几个CSS框架,这次要介绍一些让你的项目变得有趣的库和工具。这些工具用起来都很简单,所以就不具体说用法了,感兴趣的话可以点进链接去了解。



一、动态效果

Animate.css

daneden.github.io/animaAnimate.css是比较流行的动画效果库,提供了大量的动画效果,你可以点进链接尝试一下。

AniJS

anijs.github.io/

AniJS和Animate.css一样,也提供了很多的动画效果,体验页面很方便。

Hover.css

ianlunn.github.io/Hover

Hover.css提供了大量hover时的动画效果。

CSShake

elrumordelaluz.github.io

CSShake可以让你的元素摇晃起来,可以是轻轻的摇晃,水平的摇晃,也可以是疯狂的摇晃……用它可以制造出很搞笑的感觉。

Hakim.se

hakim.se/


这是Reveal.js的作者Hakim El Hattab的个人网站,上面有很多交互和CSS动画的demo,项目大多是开源的。

Typed.js

mattboldt.com/demos/typ


在你的页面上添加一个打字机效果。虽然用js很容易实现,但这个要更完善,有更多的自定义选项。



二、创意

404页面

zhihu.com/question/2012



为你的项目添加一个有趣的404页面也是很重要的,我在这个回答里整理了20多个有意思的404页面,希望能给你带来启发。



三、工具

Instafavicon

instafavicon.com

项目要展示了,少不了一个favicon。这个网站可以帮你快速生成一个简洁美观的站点图标。


favico.js

lab.ejci.net/favico.js/

有了favicon后,使用favico.js你还可以给它加上一些动态效果,比如像图片里那样添加一个显示消息数量的badge,或是添加一个静音图标。



Github Page Generator

help.github.com/article

做好了Demo,你可以用Github提供的介绍页生成器生成一个漂亮的项目介绍页。上图是上一个实践项目的项目介绍页

Github提供了很多主题可供选择:


四、挂件

Github Ribbon

github.com/blog/273-git

很多开源项目都会在网页的边角放一个这样的Github ribbon。

Flask Badge

flask.pocoo.org/communi


Flask提供了很多badge,你可以把它放到你的网页的footer里。


- - - - -

更多关于Flask和Web开发的优质原创内容,欢迎关注Hello, Flask! - 知乎专栏