这是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);

源码来源：https://codepen.io/tiansial/pen/JZdXLV

在线预览 网盘下载