js和CSS3移动手机霓虹灯环形按钮特效

这是一款js和CSS3移动手机霓虹灯环形按钮特效。该特效中，按钮使用CSS3制作霓虹灯效果，当点击主按钮时，三个子按钮会围绕主按钮依次展开。

使用方法

在页面中引入style.css文件。

<link rel="stylesheet" href="css/style.css">
                

HTML结构

该霓虹灯环形按钮特效的HTML结构如下。

<div class="button-container">
    <div class="button-wrapper">
        <div class="button">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="button-child-wrapper">
            <div class="button-child">
                
            </div>
            <div class="button-child">

            </div>
            <div class="button-child">

            </div>
        </div>
    </div>
</div>
<div class="overlay"></div>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来完成点击主按钮，展开子按钮特效。

var buttonContainer = document.querySelector('.button-container');
var overlay = document.querySelector('.overlay');
var mobileCanvas = document.querySelector('.mobile-canvas')

buttonContainer.addEventListener('click', function() {
    buttonContainer.classList.toggle('open');
    mobileCanvas.classList.toggle('open');
}, false);                 
                

该霓虹灯环形按钮特效的codepen地址为：https://codepen.io/tiansial/pen/JZdXLV