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

小灰灰 2024-04-18 19:19 57阅读 0赞

日期：2013-8-19  来源：[GBin1.com][]

本周，我们带来了[极客社区][Link 1]推荐的10款前端特效，仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入，希望可以带给大家一些更好的帮助和不同以往的更好的体验！

## [使用CSS和javascript实现的指针式手表效果 ][CSS_javascript_] ##

[![使用CSS和javascript实现的指针式手表效果][CSS_javascript]][CSS_javascript_]

指针式手表效果，无论是计时还是时间，都是网站非常好的选择！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/9bf3b87c-9879-4c54-a4a6-f18ebacbae5b.htm][http_www.gbin1.com_gb_debug_9bf3b87c-9879-4c54-a4a6-f18ebacbae5b.htm]

## [使用CSS实现的卡通宠物效果 ][CSS_] ##

[![使用CSS实现的卡通宠物效果。][CSS]][CSS_]

这是使用CSS来制作的卡通人物，下载代码，你也同样可以创造出独一无二的人物哦！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/be85ab71-5310-4f6b-ad35-8a7c8cd150a7.htm][http_www.gbin1.com_gb_debug_be85ab71-5310-4f6b-ad35-8a7c8cd150a7.htm]

## [使用JavaScript实现的立体圆效果 ][JavaScript_] ##

[![使用JavaScript实现的立体圆效果][JavaScript]][JavaScript_]

像一个漂亮的水晶球，或者是一个美丽的星空，总而言之，它真的非常美！值得你收藏！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/e31eecc0-33c6-4f50-83da-6f80068f1d55.htm][http_www.gbin1.com_gb_debug_e31eecc0-33c6-4f50-83da-6f80068f1d55.htm]

## [使用CSS实现的孔的立体效果][CSS 1] ##

[![使用CSS实现的孔的立体效果][CSS 2]][CSS 1]

深邃的洞穴，有没有想一探究竟的感觉？

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/a0417039-eb65-451f-9851-bbe9a630ecc8.htm][http_www.gbin1.com_gb_debug_a0417039-eb65-451f-9851-bbe9a630ecc8.htm]

## [使用CSS实现的旋转加载效果 ][CSS_ 1] ##

[![使用CSS实现的旋转加载效果][CSS 3]][CSS_ 1]

一款创新的加载效果，快点开来试试吧！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/04ea1677-d0df-4c51-a7eb-4ff23a2833a1.htm][http_www.gbin1.com_gb_debug_04ea1677-d0df-4c51-a7eb-4ff23a2833a1.htm]

## [使用CSS实现的圆圈的组合效果。L.O.V.E ][CSS_L.O.V.E] ##

[![使用CSS 实现的圆圈的组合效果。L.O.V.E][CSS _L.O.V.E]][CSS_L.O.V.E]

程序员们的情人节要来咯，试着用CSS来制作一个求爱短片，相信一定有意想不到的效果！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/3a7ce177-e399-4a9a-af42-9ac059e461be.htm][http_www.gbin1.com_gb_debug_3a7ce177-e399-4a9a-af42-9ac059e461be.htm]

## [纯CSS和JavaScript实现的蔓延效果 ][CSS_JavaScript_] ##

[![纯CSS和JavaScript实现的蔓延效果][CSS_JavaScript]][CSS_JavaScript_]

蔓延效果，使用键盘的上下键可以调整蔓延的前后及快慢。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/7f84c7aa-be02-4685-a20f-635a733ee2f1.htm][http_www.gbin1.com_gb_debug_7f84c7aa-be02-4685-a20f-635a733ee2f1.htm]

## [使用CSS和Javascript实现的黑子的运动效果 ][CSS_Javascript_] ##

[![使用CSS和Javascript实现的黑子的运动效果][CSS_Javascript]][CSS_Javascript_]

黑子的运动效果，如果你的鼠标移动到黑子当中，就会发生排斥的效果，如果你不鼠标，它们又会组成字母。

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/14ebcf16-47f1-46fe-bcb8-f5a00a9b7980.htm][http_www.gbin1.com_gb_debug_14ebcf16-47f1-46fe-bcb8-f5a00a9b7980.htm]

## [使用JavaScript实现的贝塞尔曲线效果 ][JavaScript_ 1] ##

[![使用JavaScript实现的贝塞尔曲线效果][JavaScript 1]][JavaScript_ 1]

贝塞尔曲线效果！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/4da84872-12e5-4a4e-8d69-0ae8c1c63476.htm][http_www.gbin1.com_gb_debug_4da84872-12e5-4a4e-8d69-0ae8c1c63476.htm]

## [使用CSS和javascript实现的2100年城市效果 ][CSS_javascript_2100_] ##

[![使用CSS和javascript实现的2100年城市效果][CSS_javascript_2100]][CSS_javascript_2100_]

让我们来看看未来的城市吧，使用CSS和javascript创建的！

GBdebug在线调试地址：[http://www.gbin1.com/gb/debug/6004509a-6af2-42e3-8310-9cd56ef4717e.htm][http_www.gbin1.com_gb_debug_6004509a-6af2-42e3-8310-9cd56ef4717e.htm]

相关阅读：

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

本期推荐已全部完成，有没有你中意的那款，点开在线调试，你可以从中获取代码。

感谢阅读，欢迎加入[极客社区][Link 1]，第一时间掌握最新信息和内容！

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

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/
[Link 1]: http://www.gbtags.com
[CSS_javascript_]: http://www.gbtags.com/gb/share/1424.htm
[CSS_javascript]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/1.jpg
[http_www.gbin1.com_gb_debug_9bf3b87c-9879-4c54-a4a6-f18ebacbae5b.htm]: http://www.gbtags.com/gb/debug/9bf3b87c-9879-4c54-a4a6-f18ebacbae5b.htm
[CSS_]: http://www.gbtags.com/gb/share/1526.htm
[CSS]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/2.jpg
[http_www.gbin1.com_gb_debug_be85ab71-5310-4f6b-ad35-8a7c8cd150a7.htm]: http://www.gbtags.com/gb/debug/be85ab71-5310-4f6b-ad35-8a7c8cd150a7.htm
[JavaScript_]: http://www.gbtags.com/gb/share/1525.htm
[JavaScript]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/3.jpg
[http_www.gbin1.com_gb_debug_e31eecc0-33c6-4f50-83da-6f80068f1d55.htm]: http://www.gbtags.com/gb/debug/e31eecc0-33c6-4f50-83da-6f80068f1d55.htm
[CSS 1]: http://www.gbtags.com/gb/share/1514.htm
[CSS 2]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/4.jpg
[http_www.gbin1.com_gb_debug_a0417039-eb65-451f-9851-bbe9a630ecc8.htm]: http://www.gbtags.com/gb/debug/a0417039-eb65-451f-9851-bbe9a630ecc8.htm
[CSS_ 1]: http://www.gbtags.com/gb/share/1492.htm
[CSS 3]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/5.jpg
[http_www.gbin1.com_gb_debug_04ea1677-d0df-4c51-a7eb-4ff23a2833a1.htm]: http://www.gbtags.com/gb/debug/04ea1677-d0df-4c51-a7eb-4ff23a2833a1.htm
[CSS_L.O.V.E]: http://www.gbtags.com/gb/share/1471.htm
[CSS _L.O.V.E]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/6.jpg
[http_www.gbin1.com_gb_debug_3a7ce177-e399-4a9a-af42-9ac059e461be.htm]: http://www.gbtags.com/gb/debug/3a7ce177-e399-4a9a-af42-9ac059e461be.htm
[CSS_JavaScript_]: http://www.gbtags.com/gb/share/1470.htm
[CSS_JavaScript]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/7.jpg
[http_www.gbin1.com_gb_debug_7f84c7aa-be02-4685-a20f-635a733ee2f1.htm]: http://www.gbtags.com/gb/debug/7f84c7aa-be02-4685-a20f-635a733ee2f1.htm
[CSS_Javascript_]: http://www.gbtags.com/gb/share/1447.htm
[CSS_Javascript]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/8.jpg
[http_www.gbin1.com_gb_debug_14ebcf16-47f1-46fe-bcb8-f5a00a9b7980.htm]: http://www.gbtags.com/gb/debug/14ebcf16-47f1-46fe-bcb8-f5a00a9b7980.htm
[JavaScript_ 1]: http://www.gbtags.com/gb/share/1444.htm
[JavaScript 1]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/9.jpg
[http_www.gbin1.com_gb_debug_4da84872-12e5-4a4e-8d69-0ae8c1c63476.htm]: http://www.gbtags.com/gb/debug/4da84872-12e5-4a4e-8d69-0ae8c1c63476.htm
[CSS_javascript_2100_]: http://www.gbtags.com/gb/share/1425.htm
[CSS_javascript_2100]: http://www.gbin1.com/technology/javascript/20130819-front-end-demo/10.jpg
[http_www.gbin1.com_gb_debug_6004509a-6af2-42e3-8310-9cd56ef4717e.htm]: http://www.gbtags.com/gb/debug/6004509a-6af2-42e3-8310-9cd56ef4717e.htm
[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/
[10 5]: http://www.gbin1.com/technology/javascript/20130617-front-end-demo/
[Link 2]: http://www.gbin1.com/technology/javascript/20130624-front-end-demo/
[Link 3]: http://www.gbin1.com/technology/javascript/20130711-front-end-demo/index.html
[Link 4]: http://www.gbin1.com/technology/javascript/20130715-front-end-demo/