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

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

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

使用方法
在页面中引入style.css文件。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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元素加载完毕之后,可以通过下面的方法来完成点击主按钮,展开子按钮特效。

1
2
3
4
5
6
7
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);

文件信息:

    1

    发表评论