前端入坑紀 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 領紅包，領到大紅包的小伙伴趕緊使用哦晦譬！

支持你我，掃一掃紅包