前端|动态发光按钮

问题描述

通常我们在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