推荐10款来自极客标签的超棒前端特效[第六期]

矫情吗；* 2022-01-30 17:43 219阅读 0赞

来源：[GBin1.com][]

本周，我们带来了[极客社区][Link 1]推荐的10款前端特效，非常有趣的小游戏和页面生成。希望可以带给大家一些不同以往的更好的体验效果。

相关阅读：

*  [推荐10款来自极客标签的超棒前端特效\[第一期\]][10]
 *  [推荐10款来自极客标签的超棒前端特效\[第二期\]][10 1]
 *  [推荐10款来自极客标签的超棒前端特效\[第三期\]][10 2]
 *  [推荐10款来自极客标签的超棒前端特效\[第四期\]][10 3]
 *  [推荐10款来自极客标签的超棒前端特效\[第五期\]][10 4]

## [使用CSS/JavaScri实现的小游戏][CSS_JavaScri] ##

[![CSS/JavaScri实现的小游戏玩偶跳跃。][CSS_JavaScri 1]][CSS_JavaScri]

一款跳跃的玩偶游戏，非常有趣，快来放松一下自己吧。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/a531ffd1-6d1d-4f3e-9060-cba2c353cc98.htm][http_www.gbin1.com_gb_debug_a531ffd1-6d1d-4f3e-9060-cba2c353cc98.htm]

## [CSS实现的雷达效果][CSS] ##

[![CSS实现的雷达效果][CSS 1]][CSS]

自己动手做一款雷达测试仪吧

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/1f061c07-9e87-492c-922c-b37becab0b88.htm][http_www.gbin1.com_gb_debug_1f061c07-9e87-492c-922c-b37becab0b88.htm]

## [CSS实现的任天堂游戏机效果][CSS 2] ##

[![CSS实现的任天堂游戏机效果][CSS 3]][CSS 2]

一款游戏效果。动动你的鼠标，看看有什么变化。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/3bd321cf-64bf-4730-98a3-14539eec8aef.htm][http_www.gbin1.com_gb_debug_3bd321cf-64bf-4730-98a3-14539eec8aef.htm]

## [JavaScript实现的动漫场景效果 ][JavaScript_] ##

[![JavaScript实现的动漫场景效果][JavaScript]][JavaScript_]

一款动态的场景效果，让我们学习一下如何实现的吧。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/b051167a-f9f2-4ede-b16d-9676eacb01f1.htm][http_www.gbin1.com_gb_debug_b051167a-f9f2-4ede-b16d-9676eacb01f1.htm]

## [CSS实现的阴影与图像叠加效果][CSS 4] ##

[![CSS实现的阴影与图像叠加效果][CSS 5]][CSS 4]

在阴影下隐藏着一张图象。当叠加效果出现，你将会看到潜藏在下方的图片了。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/ded86850-c9e3-4980-8ad0-8a60c52d70f7.htm][http_www.gbin1.com_gb_debug_ded86850-c9e3-4980-8ad0-8a60c52d70f7.htm]

## [CSS实现的卡通美少女][CSS 6] ##

[![CSS实现的卡通美少女的效果][CSS 7]][CSS 6]

CSS实现的动态美少女，你也可以生成其他你喜欢的卡通人物。快来试试看吧。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/597b1631-96e4-4097-af91-ff347a23142d.htm][http_www.gbin1.com_gb_debug_597b1631-96e4-4097-af91-ff347a23142d.htm]

## [CSS/JavaScript实现的粒子龙卷风的效果][CSS_JavaScript] ##

[![CSS/JavaScript实现的粒子龙卷风的效果。][CSS_JavaScript 1]][CSS_JavaScript]

疯狂龙卷风！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/3910dd79-e451-4249-a9f2-a43a43520d60.htm][http_www.gbin1.com_gb_debug_3910dd79-e451-4249-a9f2-a43a43520d60.htm]

## [CSS/JavaScript实现的马赛克效果][CSS_JavaScript 2] ##

[![CSS/JavaScript实现的马赛克效果][CSS_JavaScript 3]][CSS_JavaScript 2]

想用你自己的脸坐一张马赛克图象吗？那你试试今天这款特效。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/e5f5b9cb-a686-4ac9-9b71-302d83835620.htm][http_www.gbin1.com_gb_debug_e5f5b9cb-a686-4ac9-9b71-302d83835620.htm]

## [CSS实现的卡通河马的效果][CSS 8] ##

[![CSS实现的卡通河马的效果!][CSS 9]][CSS 8]

超cute的一张河马脸！你不想即时拥有吗？

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/8665a99b-7038-4639-b510-f27b64e834c5.htm][http_www.gbin1.com_gb_debug_8665a99b-7038-4639-b510-f27b64e834c5.htm]

## JavaScript实现的随机调试效果 ##

![JavaScript实现的随机调试效果][JavaScript 1]

看上去像不像音乐制作人的桌面？频率的高低非常逼真。绝对值得拥有！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/18085f34-7c33-454d-a6e1-4277fb289315.htm][http_www.gbin1.com_gb_debug_18085f34-7c33-454d-a6e1-4277fb289315.htm]

via [ 极客标签 ][Link 1]

来源：[推荐10款来自极客标签的超棒前端特效\[第六期\]][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/
[Link 1]: http://www.gbtags.com
[10]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/
[10 1]: http://www.gbin1.com/technology/javascript/20130503-gbtags-front-end-demo/
[10 2]: http://www.gbin1.com/technology/javascript/20130509-gbtags-front-end-demo/
[10 3]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/
[10 4]: http://www.gbin1.com/technology/javascript/20130520-gbtags-front-end-demo/
[CSS_JavaScri]: http://www.gbtags.com/gb/share/1033.htm
[CSS_JavaScri 1]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/1.jpg
[http_www.gbin1.com_gb_debug_a531ffd1-6d1d-4f3e-9060-cba2c353cc98.htm]: http://www.gbtags.com/gb/debug/a531ffd1-6d1d-4f3e-9060-cba2c353cc98.htm
[CSS]: http://www.gbtags.com/gb/share/1029.htm
[CSS 1]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/2.jpg
[http_www.gbin1.com_gb_debug_1f061c07-9e87-492c-922c-b37becab0b88.htm]: http://www.gbtags.com/gb/debug/1f061c07-9e87-492c-922c-b37becab0b88.htm
[CSS 2]: http://www.gbtags.com/gb/share/1039.htm
[CSS 3]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/3.jpg
[http_www.gbin1.com_gb_debug_3bd321cf-64bf-4730-98a3-14539eec8aef.htm]: http://www.gbtags.com/gb/debug/3bd321cf-64bf-4730-98a3-14539eec8aef.htm
[JavaScript_]: http://www.gbtags.com/gb/share/1048.htm
[JavaScript]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/4.jpg
[http_www.gbin1.com_gb_debug_b051167a-f9f2-4ede-b16d-9676eacb01f1.htm]: http://www.gbtags.com/gb/debug/b051167a-f9f2-4ede-b16d-9676eacb01f1.htm
[CSS 4]: http://www.gbtags.com/gb/share/1062.htm
[CSS 5]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/5.jpg
[http_www.gbin1.com_gb_debug_ded86850-c9e3-4980-8ad0-8a60c52d70f7.htm]: http://www.gbtags.com/gb/debug/ded86850-c9e3-4980-8ad0-8a60c52d70f7.htm
[CSS 6]: http://www.gbtags.com/gb/share/1070.htm
[CSS 7]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/6.jpg
[http_www.gbin1.com_gb_debug_597b1631-96e4-4097-af91-ff347a23142d.htm]: http://www.gbtags.com/gb/debug/597b1631-96e4-4097-af91-ff347a23142d.htm
[CSS_JavaScript]: http://www.gbtags.com/gb/share/1071.htm
[CSS_JavaScript 1]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/7.jpg
[http_www.gbin1.com_gb_debug_3910dd79-e451-4249-a9f2-a43a43520d60.htm]: http://www.gbtags.com/gb/debug/3910dd79-e451-4249-a9f2-a43a43520d60.htm
[CSS_JavaScript 2]: http://www.gbtags.com/gb/share/1080.htm
[CSS_JavaScript 3]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/8.jpg
[http_www.gbin1.com_gb_debug_e5f5b9cb-a686-4ac9-9b71-302d83835620.htm]: http://www.gbtags.com/gb/debug/e5f5b9cb-a686-4ac9-9b71-302d83835620.htm
[CSS 8]: http://www.gbtags.com/gb/share/1083.htm
[CSS 9]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/9.jpg
[http_www.gbin1.com_gb_debug_8665a99b-7038-4639-b510-f27b64e834c5.htm]: http://www.gbtags.com/gb/debug/8665a99b-7038-4639-b510-f27b64e834c5.htm
[JavaScript 1]: http://www.gbin1.com/technology/javascript/20130605-front-end-demo/10.jpg
[http_www.gbin1.com_gb_debug_18085f34-7c33-454d-a6e1-4277fb289315.htm]: http://www.gbtags.com/gb/debug/18085f34-7c33-454d-a6e1-4277fb289315.htm