问题描述
通常我们在HTML表单中使用button元素，是通过<button>标签定义一个按钮，再在button元素内部来放置内容，动态发光按钮原理类似。动态发光按钮是通过CSS工具使按钮呈现颜色渐变效果，最后引入JavaScript使得按钮发光的一种效果。
解决方案
制作动态发光按钮时，要注意以下细节：
使用background: linear-gradient标签来设置按钮颜色的渐变效果。
制作过程：
（1）设置页面背景，使用背景图片填充网页。使图片的高度height:100vh;让网页高度撑满，background标签后面加上no-repeat让背景不重复，使用background-size: cover;把背景图像扩展至足够大，让背景图像完全覆盖背景区域。
* {
padding: 0;
margin: 0;
}
body {
height: 100vh; /*让高度页面撑满*/
background: url(fg1.jpg) no-repeat;
background-size: cover;
}
ul {
list-style: none;
}
button {
outline: none;
border: none;
}
（2）创建一个容器class="firefly"的按钮，并为它添加CSS效果。
.firefly {
width: 180px; /*宽度*/
height: 60px; /*高度*/
position: absolute; /*绝对定位*/
top: 50%;/*网页顶部距离*/
left: 50%;/*网页左边距离*/
transform: translate(-50%, -50%);/*实现水平垂直居中*/
background: linear-gradient(to right, #55c3a0 10%, #f7d66e);/*background-images:linear-gradient(位置，颜色1，颜色2…颜色n);*/
border-radius: 40px;/*设置圆角*/
opacity: .88;/*透明程度*/
cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
transition: 1s;/*平滑过渡的时间*/
}
.firefly:hover { /*鼠标移上按钮时*/
box-shadow: 0 0 10px #B4FFB4; /*阴影大小，颜色*/
}
.firefly p {
line-height: 60px; /*行高：与高度相同时，文字呈现在按钮中心*/
font-size: 22px;
color: #e4e4d5;
font-family: firefly;
opacity: .88;
}
（3）为按钮设置发光内边框和发光气泡点。
<div><!--气泡-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.lightning {
width: 95%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 40px;
transition: .8s;
overflow: hidden;/*隐藏溢出，清除浮动*/
}
.firefly:hover .lightning {
box-shadow: 0 0 4px #B4FFB4 inset;/*鼠标上移时，按钮内边框的大小颜色*/
}
.lightning ul {
opacity: 0;
transition: .8s;
}
.firefly:hover ul {
opacity: .8;
}
.lightning ul li { /*气泡*/
width: 5px;
height: 5px;
background-color: #91FA91;/*气泡颜色*/
position: absolute;
bottom: 10%;/*距按钮底部距离*/
border-radius: 50%;
opacity: .6;
animation: fireflymove infinite linear;/*动画：动画名称 间隔时间 动画的速度曲线*/
}
@keyframes fireflymove {/*设置动画效果*/
100% {
bottom: 100%; /*要实现的css样式*/
}
}
（4）引入JavaScript，为按钮内气泡设置不同的高低位置和运行速度。
<script>
var lgh = $('.lightning li').length;
$('.lightning li').each(function(i) {
$(this).css({
left: i * (100/lgh) + '%',
bottom: randomNum(-20, 10) + '%', //为气泡设置不同高度
animationDuration: randomNum(1, 5) + 's'//动画
});
});
// 随机数方法：
function randomNum(max, min) {
var num = Math.floor(Math.random() * (max-min+1) + min);
return num;
}
</script>
效果图：
图1
图2
结语
本篇文章中用到的前端效果是通过网上视频教学来完成的。其中的重点是用@keyframes和animation结合的动画效果以及其中的JavaScript代码，如有错误还请指正。
END实习主编 | 王楠岚
责 编 | 江南沐雪
where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
