在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

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

分类:插件代码 更新时间:2018-07-23 浏览次数:665

代码简介

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

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. 引入文件:

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

    

2. html:

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


3. js:

varbuttonContainer = document.querySelector('.button-container');
varoverlay = document.querySelector('.overlay');
varmobileCanvas = document.querySelector('.mobile-canvas')
 
buttonContainer.addEventListener('click',function() {
    buttonContainer.classList.toggle('open');
    mobileCanvas.classList.toggle('open');
},false);  

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!