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

当前位置:主页 > CSS3库 > UI界面设计 > js和CSS3移动手机霓虹灯环形按钮特效
js和CSS3移动手机霓虹灯环形按钮特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-13
    阅读:
简要教程

这是一款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