投稿 搜索

热门文章

当前位置: 站长天下 / 界面UI滚动 / js和CSS3移动手机霓虹灯环形按钮特效插件

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-14
    阅读:

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