1，效果图
2，源码
<!DOCTYPE html><html><head><meta charset="utf-8" /><mate name="viewport" content="width=device-width,initial-scale=1.0"><mate http-equiv="X-UA-Compatible" content="ie=edge"><script src="js/jquery-3.4.1.min.js"></script><title>萤火虫动态按钮</title><style type="text/css">@font-face {font-family:'firefly';src: url(ZCOOLKuaile-Regular.ttf);}* {padding: 0;margin: 0;}body {height: 100vh;background: url(img/1.jpg) no-repeat;background-size: cover;}ul {list-style: none;}button{outline: none;border: none;}.firefly{width: 180px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: linear-gradient(to right,#6eb46e 10%,#55b455);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: #f5dd8f;font-size: firefly;opacity: .88;}.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%;}}</style></head><body><button class="firefly"><p>萤火虫</p><div class="lightning"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></button></body><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></html>
记录每一个前端小案例！！！！
如果觉得《HTML+CSS+JS炫酷按钮特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
