发现一个有意思的bbs网站，发现一个Waves开源项目

最新推荐文章于 2025-04-01 08:59:11 发布

weixin_33724059

最新推荐文章于 2025-04-01 08:59:11 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签：运维 git java

原文链接：https://yq.aliyun.com/articles/138380

本文探索了Web前端中的一些视觉特效与框架，包括waves项目和animate.css等，通过实际安装与测试，展示了如何实现美观的用户界面效果，并对整个过程进行了总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文的原文连接是: http://blog.youkuaiyun.com/freewebsys/article/details/51619608 未经博主允许不得转载。
博主地址是：http://blog.youkuaiyun.com/freewebsys

1，页面样式

和google风格的样式，并且在页面加载完成之后还会有顶部的颜色条变换，非常好看。
下拉菜单也很好看。
https://bbs.gitlab.cc/

上面有过开关，能够把菜单固定住

2，查看了下css

从里面刨出来两个项目。
一个叫waves不知道和google的wave啥关系。
https://github.com/fians/Waves
是个nodejs 写的项目，加星还挺高的。但是没有环境。也没试验下。

另外一个项目是各种特效：
https://github.com/daneden/animate.css
项目的演示在：
http://daneden.github.io/animate.css/

各种特效都在里面，可以通过下拉框选择。
挺好玩大，还有按照x，y，z轴旋转的。

还有一个项目：
https://github.com/h5bp/html5-boilerplate
不知道是啥项目

之前发现的一个框架：
https://github.com/driftyco/ionic
项目还有demo演示：
http://codepen.io/ionic/public-list
里面有好多有意思的项目呢
http://codepen.io/Mamboleoo/pen/JKYXGr

这个玩意居然会动呢。还挺漂亮的。

3，安装测试下

yum -y install gem npm
gem install sass
npm install situs -g
cd /data
git clone https://github.com/fians/Waves.git
npm install
npm install -g grunt-cli
grunt build

ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://rubygems.org/latest_specs.4.8.gz)

这个好奇怪啊，为啥子不能下载呢。明明网页可以访问呢。
原来被封了。好吧。

安装nodejs
上官网下载tar.gz 安装。
https://nodejs.org/
https://nodejs.org/en/download/current/
偷懒的办法了，直接使用fredora的原吧。

wget http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-6.noarch.rpm
rpm -ivh epel-release-7-6.noarch.rpm
＃同时还能安装sass，不用使用gem安装了，解决问题了。
yum install -y rubygem-sass

然后是吓人的一大坨东西安装。堪比java的jar包了。
这里写图片描述
但是每一个文件都比较小。
再执行：

npm install situs -g
cd Waves
npm install
npm install -g grunt-cli
grunt build

最后执行 situs server 启动服务器：端口 4000
收获：重要跑起来了，非常不错的效果：

还有漂亮的按钮：非常靓丽。

同时支持多种浏览器。

貌似和bootstarp类似的项目吧。

4，总结

技术的学习真的是永无止境啊。
遇到点啥东西都想研究下，好奇人家是怎么做的，看看能够学到点啥。
然后写写技术博客分享给大家。一起学习一起进步。

本文的原文连接是: http://blog.youkuaiyun.com/freewebsys/article/details/51619608 未经博主允许不得转载。
博主地址是：http://blog.youkuaiyun.com/freewebsys