HTML+CSS+JS发光开关按钮

果如图：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现发光开关切换按钮DEMO演示</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body style="background-color: #1c1d1f;">
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>
</body>
</html>

index2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Switch Button #3 - CodePen</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<label class="button"><input type="checkbox"><span></span><span></span></input></label>
<script src="js/index.js"></script>
</body>
</html>

style.css

*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #1c1d1f;
}
.button {
display: block;
width: 400px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
display: block;
position: absolute;
top: 6px;
width: 194px;
height: 108px;
background-color: #1c1d1f;
-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: "Open Sans";
font-weight: 800;
font-size: 48px;
-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}
.button span:after {
content: "";
width: 4px;
height: 108px;
position: absolute;
top: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.button span:first-of-type {
left: 6px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
-webkit-transform-style: preserve3d;
transform-style: preserve3d;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: perspective(2000px) rotateY(40deg);
transform: perspective(2000px) rotateY(40deg);
box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);
}
.button span:first-of-type:before {
content: "ON";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button span:first-of-type:after {
left: -1px;
}
.button span:last-of-type {
right: 6px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button span:last-of-type:before {
content: "OFF";
color: #ff4847;
text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.button span:last-of-type:after {
right: -1px;
opacity: 0;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
-webkit-transform: none;
-ms-transform: none;
transform: none;
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
color: #93c913;
text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:after {
opacity: 0;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
-webkit-transform: perspective(2000px) rotateY(-40deg);
transform: perspective(2000px) rotateY(-40deg);
box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:after {
opacity: 1;
}

style.less

@background: #1C1D1F;
@button: #1C1D1F;
@light-on: #93C913;
@light-off: #FF4847;
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
box-sizing: border-box
}
body {
background-color: @background;
}
.button {
display: block;
width: 400px;
height: 120px;
position: absolute;
top: 50%;
left: 50%; 
transform: translate(-50%, -50%);
background-color: darken(@button, 50%);
box-shadow: 0 -1px 0 fade(white, 20%) inset;
border-radius: 20px;
overflow: hidden;
cursor: pointer; 
-webkit-tap-highlight-color: fade(black, 0%);
span {
display: block;
position: absolute;
top: 6px;
width: 194px;
height: 108px;
background-color: @button;
transition:
transform 300ms ease,
box-shadow 300ms ease;
&:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Open Sans";
font-weight: 800;
font-size: 48px;
transition:
text-shadow 800ms ease 100ms,
color 800ms ease 100ms;
}
&:after {
content: "";
width: 4px;
height: 108px;
position: absolute;
top: 0; 
background: radial-gradient(ellipse at center, fade(white, 50%) 0%, transparent 50%);
transition: opacity 300ms ease;
} 
&:first-of-type {
left: 6px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
transform-style: preserve3d;
transform-origin: right center;
transform:
perspective(2000px)
rotateY(40deg);
box-shadow:
-1px 0 1px fade(white, 10%) inset,
4px 0 8px fade(white, 10%) inset,
1px 0 0 fade(white, 10%) inset,
-10px 0 8px fade(lighten(@button, 5%), 90%),
-20px 0 8px fade(@button, 70%),
-30px 0 8px fade(@button, 40%);
&:before {
content: "ON";
color: fade(black, 50%);
text-shadow:
1px 4px 6px @button,
0 0 0 black,
1px 4px 6px @button;
}
&:after {
left: -1px;
}
}
&:last-of-type {
right: 6px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
transform-origin: left center;
box-shadow:
-1px 1px 1px fade(white, 10%) inset,
2px 0 2px fade(white, 5%) inset;
&:before {
content: "OFF";
color: @light-off;
text-shadow: 0 0 24px fade(@light-off, 60%);
}
&:after {
right: -1px;
opacity: 0;
}
}
}
input[type="checkbox"] {
display: none;
&:checked ~ span {
&:first-of-type {
transform: none;
box-shadow:
1px 1px 1px fade(white, 10%) inset,
-2px 0 2px fade(white, 5%) inset;
&:before {
color: @light-on;
text-shadow: 0 0 24px fade(@light-on, 60%);
}
&:after {
opacity: 0;
} 
}
&:last-of-type {
transform:
perspective(2000px)
rotateY(-40deg);
box-shadow:
1px 0 1px fade(white, 10%) inset,
-4px 0 8px fade(white, 10%) inset,
-1px 0 0 fade(white, 10%) inset,
10px 0 8px fade(lighten(@button, 5%), 90%),
20px 0 8px fade(@button, 70%),
30px 0 8px fade(@button, 40%);
&:before {
color: fade(black, 50%);
text-shadow:
1px 4px 6px @button,
0 0 0 #000,
1px 4px 6px @button;
}
&:after {
opacity: 1;
}
}
}
}
}

内容转至网络，若侵权，联系删除

载说明：原创不易，未经授权，谢绝任何形式的转载

俗话说得好，兴趣是最好的老师。本篇文章搜集了几个漂亮的宇宙风格按钮动画效果的代码，希望它们能够激发你对 CSS 的热爱。作为前端开发者，我们不仅仅是制作写页面和与后端 API 打交道，偶尔也需要调味剂。废话不多说，让我们一起来解读这些 CSS 代码吧。

1、粒子动画效果的按钮

HTML部分

<button class="btn" type="button">
  <strong>SPACE</strong>
  <div id="container-stars">
    <div id="stars"></div>
  </div>

  <div id="glow">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</button>

CSS部分

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: 'Avalors Personal Use';
  font-size: 12px;
  letter-spacing: 5px;
  color: #FFFFFF;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1)
}

.btn:active {
  border: double 4px #FE53BB;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #FE53BB;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

代码解释

按钮的文字是“SPACE”，使用了strong标签来加粗字体。
按钮背景是一个渐变色背景，使用了linear-gradient函数来实现。
按钮边框是一个空心的圆角矩形，使用了border属性来实现。
按钮内部有一个含有星星动画效果的div，使用了position:fixed来实现全屏，以及两个伪元素before和after来生成星星。
按钮内部还有一个发光的圆形动画效果，使用了两个.circle元素，以及animation属性和filter属性来实现。
当鼠标悬停在按钮上时，星星背景会出现，并且按钮会放大。
当按钮被点击时，发光效果变成粉色，并且渐变色背景和星星动画效果都停止。

@keyframes pulse_3011

这个动画定义了一个名为“pulse_3011”的关键帧动画。在该动画中，元素从开始状态缩小到0.75倍，同时有一个0.7不透明度的黑色阴影。在动画执行的70％处，元素扩大到原始大小，同时黑色阴影消失。最终，元素再次缩小到0.75倍，而黑色阴影再次消失。该动画无限重复。

stars::before 和 stars::after 相关的代码是实现星星循环动画的关键，设置了背景为一个由白色和透明颜色交替组成的径向渐变色，这样就形成了一些闪闪发光的小星星。通过 animation 属性设置了动画效果，其中 animStar 是一个移动动画，设置了 60s 的动画时间，并且使用 linear 动画函数，使得小星星以匀速向上移动的方式出现在屏幕上，并且使用 infinite 让其循环播放。这样就形成了一些往上移动的小星星，从而实现了整个星空的动态效果。

月亮和太阳效果切换的按钮

HTML部分

<button>
<div id="moon" class="state"> Moony</div>
<div id="sun" class="state">Sunny</div>
<span class="border border1"></span>
<span class="border border2"></span>
</button>

CSS部分

button {
  --sunGradient: linear-gradient(to right, #fa709a 0%, #fee140 100%);
  --moonGradient: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 85px;
  height: 85px;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 70px;
  background-color: transparent;
  transition: 0.09s;
  box-shadow: 0 20px 30px black;
  overflow: hidden;
}

button:hover {
  transform: rotate(360deg);
}

button:active {
  transform: rotate(360deg) scale(1.2);
  box-shadow: -15px -15px 500px white,inset 0 0 5px black, 0px -15px 20px white;
}

.state {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  width: 90%;
  height: 90%;
  border: 4px groove black;
}

#sun {
  display: none;
  transition: 2s;
  background: var(--sunGradient);
}

#moon {
  background: var(--moonGradient);
}

button:hover #sun {
  display: flex;
}

button:active #moon {
  display: none;
}

.border {
  position: absolute;
  transition: 0.4s;
  z-index: -1;
  border-radius: inherit;
  background: var(--moonGradient);
}

button:hover .border {
  background: var(--sunGradient);
}

.border1 {
  width: 45px;
  height: 100px;
  animation: 1s linear reverse infinite rotation_91;
}

.border2 {
  width: 200px;
  height: 35px;
  animation: 3s linear reverse infinite rotation_91;
}

@keyframes rotation_91 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

代码解释：

这段代码实现了一个状态切换的动画按钮效果，它包含两个状态：一个是太阳状态，另一个是月亮状态。当鼠标悬停在按钮上时，太阳状态会出现，月亮状态会消失。当用户点击按钮时，按钮会放大并旋转，并且太阳状态会替换成月亮状态，月亮状态则替换成太阳状态。

具体实现的逻辑如下：

HTML部分：

一个<button>元素，作为容器来包含按钮的其他元素。
两个状态元素：<div id="sun" class="state">和<div id="moon" class="state">，它们分别表示太阳和月亮状态，并且它们都有一个state类，用于设置它们的共同样式。
两个边框元素：<span class="border border1"></span>和<span class="border border2"></span>，它们用于设置按钮的边框样式。

CSS部分：

设置按钮的基本样式：它是一个圆形的容器，它的背景颜色是透明的。它有一个黑色的描边，以及一个白色的阴影。
当用户悬停在按钮上时，它会旋转360度。
当用户点击按钮时，它会放大并旋转360度，并且它的阴影会变成白色的。
两个状态元素的共同样式：它们的位置是绝对定位的，它们都是圆形的，它们都有一个4像素的黑色描边，它们的宽度和高度都是按钮的90%。
太阳状态元素的样式：它的背景是一个渐变，当用户悬停在按钮上时，它会显示出来。
月亮状态元素的样式：它的背景也是一个渐变。
当用户悬停在按钮上时，它的边框会变成太阳状态元素的渐变颜色。
两个边框元素的样式：它们的位置是绝对定位的，它们的颜色是按钮的月亮状态的渐变颜色，它们分别有两个不同的大小和不同的动画，它们都是无限循环的动画。
最后，使用keyframes关键字定义两个动画rotation_91，使它们旋转360度。

3、小行星光圈带环绕

HTML部分

<button>
  Button
</button>

CSS部分：

button {
  position: relative;
  padding: 18px 55px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
  background-size: 600% 600%;
  border: 3px solid #7743db;
  border-radius: 8px;
  /* filter: drop-shadow(0 0 4px #9F73AB); */
  box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
  cursor: pointer;
  transition: all 0.5s;
  animation: GradientAnimation 25s ease infinite;
}

button::after {
  content: "";
  position: absolute;
  width: 202px;
  height: 54px;
  top: 0;
  left: -17px;
  border: 5px solid #453c67;
  border-width: 0 2px 4px 0;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
  transform: rotate(-30deg);
  animation: LinerAfter 15s ease infinite;
}

button::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 50px;
  top: 0;
  left: -20px;
  border: 5px solid #6d67e4;
  border-width: 0 12px 8px 4px;
  border-radius: 100%;
  filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
  /* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
  transform: rotate(-30deg);
  transition: all 0.5s;
  animation: LinerBefore 15s ease infinite;
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes LinerAfter {
  0% {
    left: -27px;
    height: 54px;
  }

  50% {
    left: -7px;
    height: 37px;
  }

  100% {
    left: -27px;
    height: 54px;
  }
}

@keyframes LinerBefore {
  0% {
    left: -30px;
    height: 50px;
  }

  50% {
    left: -10px;
    height: 33px;
  }

  100% {
    left: -30px;
    height: 50px;
  }
}

代码解释：

CSS代码设置了按钮的样式，包括位置、内边距、字体大小、加粗程度、颜色、背景、边框、圆角、光标形状、过渡效果、动画等。其中background属性使用了线性渐变，border属性设置了3px宽度的实线边框，border-radius属性设置了8px的圆角。box-shadow属性设置了两个阴影效果，一个是内阴影，另一个是外阴影。button::after和button::before是button的伪元素，分别表示按钮前面和后面的圆圈。这两个圆圈都是绝对定位，大小、位置、边框、圆角等属性不同，但都使用了drop-shadow滤镜和rotate旋转变换效果。动画效果分别由GradientAnimation、LinerAfter和LinerBefore三个关键帧动画控制，分别设置了不同的属性变化规则，实现了按钮和圆圈的不同的动态效果。

结束

今天的内容就分享到这里，太多了就不利于我们去理解，虽然就三个案例，但是需要我们去慢慢消化和理解，才能成为自己的知识，建议大家还是亲自实现下上述的按钮动画效果，这些案例虽然我们在平常的工作中很少用到，但是如果你接到酷炫的项目，比如某品牌的宣传站点时，我相信这些效果还是能派上用场的。

如果你喜欢这样的文章，请点赞支持下，后续我会持续分享这类的内容，如果太少，我会觉得大家不太喜欢这样的文章，我只能自己私藏了，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

网页设计工作中，我们可以给很多元素添加发光的动画效果，举几个例子，“输入框”、“文字”、“进度条”等。给这些元素加上的发光特效会让整个网页变得更加炫酷。今天陕西优就业小编就为大家搜集整理了8款炫酷的HTML发光动画，这些都可以用作Web前端开发工作中，可以为你节省很多开发时间。

1.HTML5 Canvas五彩缤纷的3D发光水晶球动画

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

2.jQuery/CSS3实现漂亮字体发光特效

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

3.超绚丽CSS3多色彩发光立方体旋转动画

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

4.纯CSS3实现发光开关切换按钮

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

5.纯CSS3和SVG鼠标滑过灯泡发光特效

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

6.HTML5 Canvas发光Loading动画

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

7.CSS3发光Loading加载动画

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

8.纯CSS3实现发光动画按钮特效

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

陕西优就业：http://www.ujiuye.com/shaanxi/

IT学习交流：468910291

在线咨询

上一篇：乐视手机还有救，官方教你如何登陆账号
下一篇：聊一聊CSS文本两端对齐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML+CSS+JS发光开关按钮

1、粒子动画效果的按钮

月亮和太阳效果切换的按钮

3、小行星光圈带环绕

结束

您的项目需求