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

川长思鸟来 2022-03-18 12:07 237阅读 0赞

来源：[GBin1.com][]

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

## [使用jQuery开发一个互动的过程图 ][jQuery_] ##

[![特效][1.jpg]][jQuery_]

这个演示使用了[jQuery][]来生成一个阶段的展示效果图，点击每个阶段，会有动画的执行效果。

在线调试： [ http://www.gbtags.com/gb/debug/667f0061-c769-4d73-b193-a84548e92631.htm][http_www.gbtags.com_gb_debug_667f0061-c769-4d73-b193-a84548e92631.htm]

## [Javascript/css实现的液体效果 ][Javascript_css_] ##

[![Javascript/css实现的液体效果][Javascript_css]][Javascript_css_]

可以自有定义里面颗粒的颜色与数量。 非常方便使用。

在线调试：[http://www.gbtags.com/gb/debug/6c49ff93-f1e8-46cf-b15e-238a958239ce.htm][http_www.gbtags.com_gb_debug_6c49ff93-f1e8-46cf-b15e-238a958239ce.htm]

## [头像闪亮掠过效果][Link 2] ##

[![头像闪亮掠过效果][3.jpg]][Link 2]

使用[CSS3][]实现的一个头像闪亮掠过效果，相信如果应用到你的头像上，绝对非常的有趣！

在线调试：[http://www.gbtags.com/gb/debug/02efca3e-40c8-4901-a761-9f0b5e9e88a0.htm][http_www.gbtags.com_gb_debug_02efca3e-40c8-4901-a761-9f0b5e9e88a0.htm]

## [一个CSS实现的开关按钮 ][CSS_] ##

[![一个CSS实现的开关按钮][CSS]][CSS_CSS]

非常有趣的一组[按钮设计][Link 3]，强烈的按键感绝对会让你眼前一亮！

在线调试：[http://www.gbtags.com/gb/debug/5faa17b0-6f8b-4b5f-bd22-1d36c6f71182.htm][http_www.gbtags.com_gb_debug_5faa17b0-6f8b-4b5f-bd22-1d36c6f71182.htm]

## [燃烧的火焰效果！（JavaScript） ][JavaScript_] ##

[![燃烧火焰的效果][5.jpg]][JavaScript_]

如果你还不了解如果使一个火焰燃烧起来，那你一定不要错过！

在线调试：[http://www.gbtags.com/gb/debug/ba0d5820-915a-4de6-b01e-4c4378fd1345.htm][http_www.gbtags.com_gb_debug_ba0d5820-915a-4de6-b01e-4c4378fd1345.htm]

## [CSS3实现的几何图形黄金角度效果 ][CSS3_] ##

[![CSS3实现的几何图形效果][CSS3 1]][CSS3_]

几何图形不光可以使用在数学中，如果做成效果图，绝对吸引眼球！

在线调试：[http://www.gbtags.com/gb/debug/22672d64-a642-4340-9a65-eb5522162a7e.htm][http_www.gbtags.com_gb_debug_22672d64-a642-4340-9a65-eb5522162a7e.htm]

# [CSS实现的动画品牌LOGO][CSS_LOGO] #

[![CSS实现的动态品牌logo][CSS_logo]][CSS_LOGO]

如果你还在用一个平面单一色调的品牌[logo][]，看来你已经out了，快来看看这套现代感十足的[logo][]设计吧！

[在线调试：http://www.gbtags.com/gb/debug/fd3da311-71bd-4da7-8b6f-f79bc687ccb5.htm][http_www.gbtags.com_gb_debug_fd3da311-71bd-4da7-8b6f-f79bc687ccb5.htm]

## [CSS实现盛开的莲花效果 ][CSS_ 1] ##

[![CSS实现的莲花盛开效果][CSS 1]][CSS_ 1]

非常漂亮的且能自定义颜色的莲花，你也可以做到！

[ 在线调试：http://www.gbtags.com/gb/debug/09d37770-991c-40ce-966d-075d4a6a40a2.htm][http_www.gbtags.com_gb_debug_09d37770-991c-40ce-966d-075d4a6a40a2.htm]

## [JavaScript实现的可以自转的圈圈组合 ][JavaScript_ 1] ##

[![javascript实现会自转的圈圈组合效果][javascript]][JavaScript_ 1]

可自定义色彩的自转效果。

[在线调试：http://www.gbtags.com/gb/debug/5bfe7bf7-4e5a-445b-a6e9-5f869bc17465.htm][http_www.gbtags.com_gb_debug_5bfe7bf7-4e5a-445b-a6e9-5f869bc17465.htm]

## [JavaScript实现的漂亮的灯光背景 ][JavaScript_ 2] ##

[![JavaScript实现的漂亮的灯光背景][JavaScript]][JavaScript_ 2]

使用[javascript][javascript 1]，支持自定义背景光效果的一款特效。

[在线调试：http://www.gbtags.com/gb/debug/be79f5f9-9943-4758-91ed-dc36894611e0.htm][http_www.gbtags.com_gb_debug_be79f5f9-9943-4758-91ed-dc36894611e0.htm]

via [ 极客社区][Link 1]

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

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/
[Link 1]: http://www.gbtags.com
[jQuery_]: http://gbtags.com/gb/share/684.htm
[1.jpg]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/1.jpg
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery
[http_www.gbtags.com_gb_debug_667f0061-c769-4d73-b193-a84548e92631.htm]: http://gbtags.com/gb/debug/667f0061-c769-4d73-b193-a84548e92631.htm
[Javascript_css_]: http://gbtags.com/gb/share/584.htm
[Javascript_css]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/2.jpg
[http_www.gbtags.com_gb_debug_6c49ff93-f1e8-46cf-b15e-238a958239ce.htm]: http://gbtags.com/gb/debug/6c49ff93-f1e8-46cf-b15e-238a958239ce.htm
[Link 2]: http://gbtags.com/gb/share/592.htm
[3.jpg]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/3.jpg
[CSS3]: http://www.gbin1.com/bloghome.html?tag=css3
[http_www.gbtags.com_gb_debug_02efca3e-40c8-4901-a761-9f0b5e9e88a0.htm]: http://gbtags.com/gb/debug/02efca3e-40c8-4901-a761-9f0b5e9e88a0.htm
[CSS_]: http://gbtags.com/gb/share/602.htm
[CSS]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/4.jpg
[CSS_CSS]: http://www.gbtags.com/gb/share/602.htm
[Link 3]: http://www.gbin1.com/bloghome.html?tag=button
[http_www.gbtags.com_gb_debug_5faa17b0-6f8b-4b5f-bd22-1d36c6f71182.htm]: http://gbtags.com/gb/debug/5faa17b0-6f8b-4b5f-bd22-1d36c6f71182.htm
[JavaScript_]: http://gbtags.com/gb/share/607.htm
[5.jpg]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/5.jpg
[http_www.gbtags.com_gb_debug_ba0d5820-915a-4de6-b01e-4c4378fd1345.htm]: http://www.gbtags.com/gb/debug/ba0d5820-915a-4de6-b01e-4c4378fd1345.htm
[CSS3_]: http://gbtags.com/gb/share/622.htm
[CSS3 1]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/6.jpg
[http_www.gbtags.com_gb_debug_22672d64-a642-4340-9a65-eb5522162a7e.htm]: http://gbtags.com/gb/debug/46b4460c-f4ad-4ce0-bbb9-e0c32ddfcb9c.htm
[CSS_LOGO]: http://gbtags.com/gb/share/643.htm
[CSS_logo]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/7.jpg
[logo]: http://www.gbin1.com/bloghome.html?tag=logo
[http_www.gbtags.com_gb_debug_fd3da311-71bd-4da7-8b6f-f79bc687ccb5.htm]: http://gbtags.com/gb/debug/fd3da311-71bd-4da7-8b6f-f79bc687ccb5.htm
[CSS_ 1]: http://gbtags.com/gb/share/647.htm
[CSS 1]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/8.jpg
[http_www.gbtags.com_gb_debug_09d37770-991c-40ce-966d-075d4a6a40a2.htm]: http://gbtags.com/gb/debug/09d37770-991c-40ce-966d-075d4a6a40a2.htm
[JavaScript_ 1]: http://gbtags.com/gb/share/682.htm
[javascript]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/9.jpg
[http_www.gbtags.com_gb_debug_5bfe7bf7-4e5a-445b-a6e9-5f869bc17465.htm]: http://gbtags.com/gb/debug/5bfe7bf7-4e5a-445b-a6e9-5f869bc17465.htm
[JavaScript_ 2]: http://gbtags.com/gb/share/683.htm
[JavaScript]: http://www.gbin1.com/technology/javascript/20130403-gbtags-front-end-demo/10.jpg
[javascript 1]: http://www.gbin1.com/bloghome.html?tag=javascript
[http_www.gbtags.com_gb_debug_be79f5f9-9943-4758-91ed-dc36894611e0.htm]: http://gbtags.com/gb/debug/be79f5f9-9943-4758-91ed-dc36894611e0.htm