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

桃扇骨 2022-02-21 09:29 183阅读 0赞

日期：2013-5-13  来源：[GBin1.com][]

本周推荐的10款来自[极客社区][Link 1]的前端特效！希望大家会喜欢！

[使用javascript生成的植物显示过程特效][javascript]

[![使用javascript生成的植物显示过程特效][javascript 1]][javascript]

这是一款使用javascript生成的一个蕨类植物从无到有的显示过程特效。动动你的鼠标，看看你都发现了什么？

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/5abc669b-644d-43d1-84a2-dffc99ee318e.htm][http_www.gbin1.com_gb_debug_5abc669b-644d-43d1-84a2-dffc99ee318e.htm]

## [使用JavaScript实现环绕中心旋转的粒子特效 ][JavaScript_] ##

[![使用JavaScript实现环绕中心旋转的粒子特效][JavaScript]][JavaScript_]

围绕中心旋转的特效，希望可以带给你一个不同的感觉！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/587a5269-0bdf-4b06-b6ff-9f3dce7849c5.htm][http_www.gbin1.com_gb_debug_587a5269-0bdf-4b06-b6ff-9f3dce7849c5.htm]

## [使用JavaScript实现多边形边缘收缩特效][JavaScript 1] ##

[![使用JavaScript实现多边形边缘收缩特效][JavaScript 2]][JavaScript 1]

使用javascript来实现一款多边形效果，它可以自由的填充和收缩，是款非常有趣的特效！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/6ed353b2-28f0-46cc-904a-35a9988a54e7.htm][http_www.gbin1.com_gb_debug_6ed353b2-28f0-46cc-904a-35a9988a54e7.htm]

## [CSS实现的圆点变换的动画效果][CSS] ##

[![CSS实现的圆点变换的动画效果][CSS 1]][CSS]

超级灵活的一个圆点游走效果，试试看，你可以追逐到它吗？

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/62b27cea-101e-4215-b661-6232a84ffefe.htm][http_www.gbin1.com_gb_debug_62b27cea-101e-4215-b661-6232a84ffefe.htm]

## [使用JavaScript实现的花朵切换效果 ][JavaScript_ 1] ##

[![使用JavaScript实现的花朵切换效果][JavaScript 3]][JavaScript_ 1]

自定义花的种类和形状，它们可以瞬间变化。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/674ce159-a5b6-4258-9adf-f17fcb8feb44.htm][http_www.gbin1.com_gb_debug_674ce159-a5b6-4258-9adf-f17fcb8feb44.htm]

## [CSS实现的三维动画图表效果 ][CSS_] ##

[![CSS实现的三维动画图表效果][CSS 2]][CSS_]

想尝试做一款既有折叠效果又同时拥有立体的特效吗？那你绝不能错过今天介绍的这款。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/fe56eab5-9e02-4f5d-877a-d3a04f93cbcf.htm][http_www.gbin1.com_gb_debug_fe56eab5-9e02-4f5d-877a-d3a04f93cbcf.htm]

## [使用javascript实现两点画图特效][javascript 2] ##

[![使用javascript实现两点画图特效][javascript 3]][javascript 2]

这是一款使用两点来构图的特效。你可以自定义旋转方向和色彩，勾勒出你希望的画面。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/efcaebd2-254b-4f1f-bc38-8b47020e62e6.htm][http_www.gbin1.com_gb_debug_efcaebd2-254b-4f1f-bc38-8b47020e62e6.htm]

## [使用CSS和javascript来实现一款超棒的按钮特效][CSS_javascript]    ##

[![使用CSS和javascript来实现一款超棒的按钮特效][CSS_javascript 1]][CSS_javascript]

点击特效，看看会出现什么样的效果？

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/a6686aab-06f3-4d0b-b343-ae2d50417364.htm][http_www.gbin1.com_gb_debug_a6686aab-06f3-4d0b-b343-ae2d50417364.htm]

## [一个CSS实现旋转的二十面体特效 ][CSS_ 1] ##

[![一个CSS实现旋转的二十面体特效][CSS 3]][CSS_ 1]

一款非常棒且难见的一个特效，它可以切换20面来立体旋转。非常值得收藏！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/b77593bc-6f76-4c75-b11c-0673ef1fe287.htm][http_www.gbin1.com_gb_debug_b77593bc-6f76-4c75-b11c-0673ef1fe287.htm]

## [javascript实现的烟雾效果 ][javascript_] ##

[![javascript实现的烟雾效果][javascript 4]][javascript_]

超酷的烟雾特效！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/9908de15-fde5-4ff8-84b3-74d3e2837966.htm][http_www.gbin1.com_gb_debug_9908de15-fde5-4ff8-84b3-74d3e2837966.htm]

via [ 极客标签][Link 1]

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

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/
[Link 1]: http://www.gbtags.com
[javascript]: http://www.gbtags.com/gb/share/890.htm
[javascript 1]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/1.jpg
[http_www.gbin1.com_gb_debug_5abc669b-644d-43d1-84a2-dffc99ee318e.htm]: http://www.gbtags.com/gb/debug/5abc669b-644d-43d1-84a2-dffc99ee318e.htm
[JavaScript_]: http://www.gbtags.com/gb/share/918.htm
[JavaScript]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/2.jpg
[http_www.gbin1.com_gb_debug_587a5269-0bdf-4b06-b6ff-9f3dce7849c5.htm]: http://www.gbtags.com/gb/debug/587a5269-0bdf-4b06-b6ff-9f3dce7849c5.htm
[JavaScript 1]: http://www.gbtags.com/gb/share/917.htm
[JavaScript 2]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/3.jpg
[http_www.gbin1.com_gb_debug_6ed353b2-28f0-46cc-904a-35a9988a54e7.htm]: http://www.gbtags.com/gb/debug/6ed353b2-28f0-46cc-904a-35a9988a54e7.htm
[CSS]: http://www.gbtags.com/gb/share/916.htm
[CSS 1]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/4.jpg
[http_www.gbin1.com_gb_debug_62b27cea-101e-4215-b661-6232a84ffefe.htm]: http://www.gbtags.com/gb/debug/62b27cea-101e-4215-b661-6232a84ffefe.htm
[JavaScript_ 1]: http://www.gbtags.com/gb/share/910.htm
[JavaScript 3]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/5.jpg
[http_www.gbin1.com_gb_debug_674ce159-a5b6-4258-9adf-f17fcb8feb44.htm]: http://www.gbtags.com/gb/debug/674ce159-a5b6-4258-9adf-f17fcb8feb44.htm
[CSS_]: http://www.gbtags.com/gb/share/909.htm
[CSS 2]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/6.jpg
[http_www.gbin1.com_gb_debug_fe56eab5-9e02-4f5d-877a-d3a04f93cbcf.htm]: http://www.gbtags.com/gb/debug/fe56eab5-9e02-4f5d-877a-d3a04f93cbcf.htm
[javascript 2]: http://www.gbtags.com/gb/share/906.htm
[javascript 3]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/7.jpg
[http_www.gbin1.com_gb_debug_efcaebd2-254b-4f1f-bc38-8b47020e62e6.htm]: http://www.gbtags.com/gb/debug/efcaebd2-254b-4f1f-bc38-8b47020e62e6.htm
[CSS_javascript]: http://www.gbtags.com/gb/share/905.htm
[CSS_javascript 1]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/8.jpg
[http_www.gbin1.com_gb_debug_a6686aab-06f3-4d0b-b343-ae2d50417364.htm]: http://www.gbtags.com/gb/debug/a6686aab-06f3-4d0b-b343-ae2d50417364.htm
[CSS_ 1]: http://www.gbtags.com/gb/share/903.htm
[CSS 3]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/9.jpg
[http_www.gbin1.com_gb_debug_b77593bc-6f76-4c75-b11c-0673ef1fe287.htm]: http://www.gbtags.com/gb/debug/b77593bc-6f76-4c75-b11c-0673ef1fe287.htm
[javascript_]: http://www.gbtags.com/gb/share/893.htm
[javascript 4]: http://www.gbin1.com/technology/javascript/20130513-gbtags-front-end-demo/10.jpg
[http_www.gbin1.com_gb_debug_9908de15-fde5-4ff8-84b3-74d3e2837966.htm]: http://www.gbtags.com/gb/debug/9908de15-fde5-4ff8-84b3-74d3e2837966.htm