问题描述
通常我们在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代码，如有错误还请指正。
