12个炫酷实用的HTML5带发光动画

刺骨的言语ヽ痛彻心扉 2022-05-26 08:52 688阅读 0赞

在网页设计中，很多元素都可以实现发光的动画效果，比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用的HTML5带发光动画，这里的很多应用都是可以在不少项目中使用，可以为你节省很多前端开发时间。

## 1、纯CSS3实现超炫酷的萤火虫动画 ##

今天要为大家带来一款很有意思的纯CSS3动画，这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫，和之前分享的[纯CSS3蚱蜢][CSS3]与[纯CSS3打火机][CSS3 1]类似，这只萤火虫也是用CSS3绘制，并且点击萤火虫可以关闭和打开它的翅膀，同时萤火虫的闪闪发光也可以控制。

[![css3-firefly][]][css3-firefly 1]

[在线演示][css3-firefly 1] / [源码下载][Link 1]

## 2、HTML5 Canvas五彩缤纷的3D发光水晶球动画 ##

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画，就像是酒吧里的那种水晶球射灯一样，不停地随机变换射出光线的颜色，给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成，利用CSS3的相关特性使其能够出现五彩缤纷的发光动画，而且可以通过鼠标滚轮来放大缩小这个水晶球，不得不说HTML5真的是非常强大。

[![html5-canvas-crystal-ball][]][html5-canvas-crystal-ball 1]

[在线演示][html5-canvas-crystal-ball 1] / [源码下载][Link 2]

## 3、jQuery/CSS3实现漂亮字体发光特效 ##

今天我们要来分享一款很酷的jQuery/CSS3文字发光特效，首先是加载了谷歌的公共字体库，因此字体非常特别和漂亮，另外利用了jQuery和CSS3的相关特性，当鼠标滑过文字时，文字将会出现发光的动画特效，非常漂亮。

[![jquery-css3-text-shine][]][jquery-css3-text-shine 1]

[在线演示][jquery-css3-text-shine 1] / [源码下载][Link 3]

## 4、超绚丽CSS3多色彩发光立方体旋转动画 ##

之前我们分享过几个不错的CSS3立方体动画，比如这款[HTML5 3D立方体旋转动画][HTML5 3D]和[HTML5 3D立方体图片切换动画][HTML5 3D 1]。今天要分享的也是一款基于CSS3的3D立方体旋转动画，不同的是，这款立方体的每一个面都有不同的色彩，并且会带有绚丽的发光特效。

[![css3-shine-cube][]][css3-shine-cube 1]

[在线演示][css3-shine-cube 1] / [源码下载][Link 4]

## 5、纯CSS3实现发光开关切换按钮 ##

前段时间我们向大家分享过一款[牛奶般剔透的CSS3 3D开关按钮][CSS3 3D]，效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，可以左右切换。另外开关上的文字还有发光的特效，整体看上去很有立体感。

[![pure-css3-shine-switch-button][]][pure-css3-shine-switch-button 1]

[在线演示][pure-css3-shine-switch-button 1] / [源码下载][Link 5]

## 6、纯CSS3和SVG鼠标滑过灯泡发光特效 ##

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

[![pure-css3-svg-shine-effect][]][pure-css3-svg-shine-effect 1]

[在线演示][pure-css3-svg-shine-effect 1] / [源码下载][Link 6]

## 7、HTML5 Canvas发光Loading动画 ##

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

[![html5-canvas-shine-loading][]][html5-canvas-shine-loading 1]

[在线演示][html5-canvas-shine-loading 1] / [源码下载][Link 7]

## 8、CSS3发光Loading加载动画 ##

今天我们要分享一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果：[HTML5 Canvas实现超酷Loading动画][HTML5 Canvas_Loading]、[很有个性的CSS3弹跳Loading动画][CSS3_Loading]。

[![css3-shine-loading][]][css3-shine-loading 1]

[在线演示][css3-shine-loading 1] / [源码下载][Link 8]

## 9、纯CSS3实现发光动画按钮特效 ##

这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如[纯CSS3 3D开关按钮][CSS3 3D 1]、[纯CSS3实现动感弹性按钮][CSS3 2]等，都非常不错，也有HTML5动画按钮，大家可以自己看看。

[![pure-css3-shine-button][]][pure-css3-shine-button 1]

[在线演示][pure-css3-shine-button 1] / [源码下载][Link 9]

## 10、HTML5 Canvas 3D旋转物体动画 模糊发光特效 ##

HTML5 3D动画应用非常广泛，我们之前也分享过很多炫酷的[HTML5动画][HTML5]应用。今天要介绍的这款HTML5 3D动画是一个旋转的物体，并且利用CSS3的特性，物体会发出模糊和发光的动画特效，旋转起来效果特别酷。

[![html5-3d-rotation-with-shine][]][html5-3d-rotation-with-shine 1]

[在线演示][html5-3d-rotation-with-shine 1] / [源码下载][Link 10]

## 11、HTML5/CSS3发光搜索表单 超酷CSS3表单 ##

之前我们分享过一款纯[CSS3实现的发光登录表单][CSS3 3]，发光特效非常不错。今天我们要再来分享一款放光表单，是一款CSS3发光搜索表单，表单整体是黑色的风格，搜索框被激活时，输入框就会发光，由于黑色的背景，整个搜索表单就显得格外绚丽光亮。

[![html5-css3-shine-search-form][]][html5-css3-shine-search-form 1]

[在线演示][html5-css3-shine-search-form 1] / [源码下载][Link 11]

## 12、CSS3 3D发光切换按钮 模拟效果很逼真 ##

现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

[![css3-shine-switch-button][]][css3-shine-switch-button 1]

[在线演示][css3-shine-switch-button 1] / [源码下载][Link 12]

以上就是12个炫酷实用的HTML5带发光动画，欢迎收藏分享。转载请注明原文链接：[http://www.html5tricks.com/12-html5-shining-animation.html][http_www.html5tricks.com_12-html5-shining-animation.html]

[CSS3]: http://www.html5tricks.com/css3-grasshopper.html
[CSS3 1]: http://www.html5tricks.com/pure-css3-lighter.html
[css3-firefly]: /images/20220526/ac1726d8af0d4e6b93d79afae260fb19.png
[css3-firefly 1]: http://www.html5tricks.com/demo/css3-firefly/index.html
[Link 1]: http://www.html5tricks.com/css3-firefly.html
[html5-canvas-crystal-ball]: /images/20220526/e51fbcbb5e7f4d23ab959124d32655f0.png
[html5-canvas-crystal-ball 1]: http://www.html5tricks.com/demo/html5-canvas-crystal-ball/index.html
[Link 2]: http://www.html5tricks.com/html5-canvas-crystal-ball.html
[jquery-css3-text-shine]: /images/20220526/ee9a7a420b734e9bb358e8d58b2b5f43.png
[jquery-css3-text-shine 1]: http://www.html5tricks.com/demo/jquery-css3-text-shine/index.html
[Link 3]: http://www.html5tricks.com/jquery-css3-text-shine.html
[HTML5 3D]: http://www.html5tricks.com/html5-3d-cube.html
[HTML5 3D 1]: http://www.html5tricks.com/html5-3d-cube-image-slider.html
[css3-shine-cube]: /images/20220526/7ff760309c1b441e955b492a481dd2f2.png
[css3-shine-cube 1]: http://www.html5tricks.com/demo/css3-shine-cube/index.html
[Link 4]: http://www.html5tricks.com/css3-shine-cube.html
[CSS3 3D]: http://www.html5tricks.com/css3-3d-milk-style-button.html
[pure-css3-shine-switch-button]: /images/20220526/ad438e6e4bd04f3293db060ec2d7e533.png
[pure-css3-shine-switch-button 1]: http://www.html5tricks.com/demo/pure-css3-shine-switch-button/index.html
[Link 5]: http://www.html5tricks.com/pure-css3-shine-switch-button.html
[pure-css3-svg-shine-effect]: /images/20220526/0c440554bc7b4150b4446a0b6102d438.png
[pure-css3-svg-shine-effect 1]: http://www.html5tricks.com/demo/pure-css-svg-hover-interaction/index.html
[Link 6]: http://www.html5tricks.com/pure-css3-svg-shine-effect.html
[html5-canvas-shine-loading]: /images/20220526/ba90fd1bd14b490dafa8351c14449070.png
[html5-canvas-shine-loading 1]: http://www.html5tricks.com/demo/html5-canvas-shine-loading/index.html
[Link 7]: http://www.html5tricks.com/html5-canvas-shine-loading.html
[HTML5 Canvas_Loading]: http://www.html5tricks.com/html5-canvas-loading.html
[CSS3_Loading]: http://www.html5tricks.com/css3-loading-jump.html
[css3-shine-loading]: /images/20220526/6382ff62969a443ea6bf20aa00b03834.png
[css3-shine-loading 1]: http://www.html5tricks.com/demo/css3-shine-loading/index.html
[Link 8]: http://www.html5tricks.com/css3-shine-loading.html
[CSS3 3D 1]: http://www.html5tricks.com/css3-3d-switch-button.html
[CSS3 2]: http://www.html5tricks.com/css3-gelatin-button.html
[pure-css3-shine-button]: /images/20220526/7678ae896dd34a8fb700b850751b2097.png
[pure-css3-shine-button 1]: http://www.html5tricks.com/demo/pure-css3-shine-button/index.html
[Link 9]: http://www.html5tricks.com/pure-css3-shine-button.html
[HTML5]: http://www.html5tricks.com/tag/html5%E5%8A%A8%E7%94%BB
[html5-3d-rotation-with-shine]: /images/20220526/980b4aaad81448b4bed329d7b6ce388e.png
[html5-3d-rotation-with-shine 1]: http://www.html5tricks.com/demo/html5-3d-rotation-with-shine/index.html
[Link 10]: http://www.html5tricks.com/html5-3d-rotation-with-shine.html
[CSS3 3]: http://www.html5tricks.com/css3-golden-shine-login-form.html
[html5-css3-shine-search-form]: /images/20220526/5637fb44703e4384809eb45cd46c2ece.png
[html5-css3-shine-search-form 1]: http://www.html5tricks.com/demo/html5-css3-shine-search-form/index.html
[Link 11]: http://www.html5tricks.com/html5-css3-shine-search-form.html
[css3-shine-switch-button]: /images/20220526/c28e12f6c62942fb9f290a77645e54b9.png
[css3-shine-switch-button 1]: http://www.html5tricks.com/demo/css3-shine-switch-button/index.html
[Link 12]: http://www.html5tricks.com/css3-3d%E5%8F%91%E5%85%89%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE-%E6%A8%A1%E6%8B%9F%E6%95%88%E6%9E%9C%E5%BE%88%E9%80%BC%E7%9C%9F.html
[http_www.html5tricks.com_12-html5-shining-animation.html]: http://www.html5tricks.com/12-html5-shining-animation.html