环绕按钮动画———原生javascript手作

前端入坑纪 58

今天来分享昨天和小伙伴聊到的一个效果

好，详解如下！

OK，first things first！ 点我查看实际效果

集齐7颗召唤神龙吧，骚年

HTML 结构

    <div class="mainWrp">
        <div class="navs">
            <div class="roller" id="rob">
                <a href="javascript:;"><em>B1</em></a>
                <a href="javascript:;"><em>B2</em></a>
                <a href="javascript:;"><em>B3</em></a>
                <a href="javascript:;"><em>B4</em></a>
                <a href="javascript:;"><em>B5</em></a>
                <a href="javascript:;"><em>B6</em></a>
                <a href="javascript:;"><em>B7</em></a>
                <button class="rob" id="rollout">ROT</button>
            </div>
        </div>
    </div>

所有的按钮都是包裹在div.roller 里，div.roller 的底色与底部条颜色相同，以制造凸的效果

CSS 结构

        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        button {
            background: none;
            border: none;
            outline: none
        }

        a {
            color: #333;
            text-decoration: none
        }

        .navs {
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 99;
            height: 60px;
            background-color: aliceblue;
        }

        .roller {
            position: absolute;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background-color: aliceblue;
            top: -20px;
            left: 50%;
            transform: translateX(-50%)
        }

        .roller a {
            display: block;
            opacity: 0;
            position: absolute;
            top: 3px;
            left: 3px;
            text-align: center;
            height: 44px;
            width: 44px;
            border-radius: 50%;
            background-color: tomato;
            color: #fff;
            font-size: 15px;
            line-height: 44px;
            transition: all 500ms ease;
            transform-origin: center center;
        }

        .roller a em {
            display: block;
            font-style: normal;
            text-shadow: 0 0 #fff;
        }

        .rob {
            display: block;
            height: 46px;
            width: 46px;
            line-height: 46px;
            border-radius: 50%;
            margin: 2px;
            position: absolute;
            background-color: blanchedalmond
        }

        button.rob:active {
            background-color: azure
        }

按钮基本都是采用绝对定位布局position:absolute，整条底部的div.navs则是position:fixed布局

JavaScript 结构

        var linkas = document.querySelector('#rob').querySelectorAll('a')
        var rollout = document.querySelector('#rollout')
        var arc = 180 / linkas.length
        var bolt = 0

        function hide() {
            linkas.forEach((item, index) => {
                item.querySelector('em').style.transform = 'rotateZ(' + arc * (index + 0.5) + 'deg)'
                item.style.transform = 'rotateZ(-' + arc * (index + 0.5) + 'deg) translateX(0)'
                item.style.opacity = '0'
            })
        }
        function show(){
            linkas.forEach((item, index) => {
                item.style.transform = 'rotateZ(-' + arc * (index + 0.5) + 'deg) translateX(100px)'
                item.style.opacity = '1'
            })
        }

        hide()

        rollout.addEventListener('click', function () {
            if(bolt){
                hide()
                bolt=0
            }else{
                show()
                bolt=1
            }
        })

这里需要注意的是按钮旋转时的角度计算，180平分成n个扇形，然后把按钮放在每个分好的扇形中间，所以是从arc * (index + 0.5) 开始计算。并且旋转了每个a后，记得把里面的em也要对应旋转回来，不然字也跟着转歪了

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包