Vue+Sass 实现转盘效果

前言

1.sass实现多个圆点围绕成圆圈，并添加动画。
2.sass及js实现转盘效果

来个效果图

全部代码

实现多个圆点围绕成圆圈、转盘中的文本、以及旋转动画，关键在于使用sass中的@for循环来实现效果

css中rem()单位可修改为px/rem/em...
emm...这里我懒得改...
使用rem()是为了更好的适配屏幕,可以看看使用Vue-cli创建项目及常用配置里面有详细的写法。

<template>
    <div class="lucky wapper_header">
        <div class="lucky_base">
            <!--圆点-->
            <div class="flashing" ref="flashing">
                <b v-for="light in lights">
                    <i></i>
                </b>
            </div>
            <!--转盘-->
            <div class="dial_con" ref='dial'>
                <div v-for="(item,i) in items">
                    <p v-if="item.type==1">
                        <b>{{item.txt}}</b>
                        <strong>{{item.num}}<span>元</span></strong>
                    </p>
                    <p v-else class="sad">
                        <b>{{item.txt}}</b>
                    </p>
                </div>
            </div>
            <!--按钮-->
            <button class="btn btn_dial" @click="lottery" :disabled="lotteryAbled">
                <strong>GO</strong>
            </button>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                lights:30,
                items:[{id:0,type:1,txt:'现金奖励',num:'100'
                    },{id:1,type:1,txt:'现金奖励',num:'100'
                    },{id:2,type:1,txt:'现金奖励',num:'100'
                    },{id:3,type:1,txt:'现金奖励',num:'100'
                    },{id:4,type:0,txt:'谢谢参与'
                    },{id:5,type:1,txt:'现金奖励',num:'100'
                    },{id:6,type:1,txt:'现金奖励',num:'100'
                    },{id:7,type:0,txt:'谢谢参与'
                }],
                lotteryAbled:false,
            }
        },
        methods:{
            lottery(){
                this.lotteryAbled=true;
                let childs = this.$refs.flashing.childNodes;
                let _this = this;
                let j=2;
                this.$refs.dial.className = 'dial_con';
                setTimeout(()=>{
                    this.$refs.dial.className = `dial_con dial_${j}`;
                },0)
                var i=0;
                let time = setInterval(()=>{
                    childs[i].className='flashing_light';
                    i++;
                    if(i >= _this.lights){
                        this.$refs.flashing.className = 'flashing flashing_parent';
                        clearInterval(time);
                    }
                },80);
            },
        }
    };
</script>
<style scoped lang='scss'>
    @import "../../assets/css/reset.scss";
    .lucky{
        min-height: 100vh;
        width: 100%;
        background: #f4f1bb;
        padding-top: rem(100);
    }
    .lucky_base{
        width: rem(650);
        height: rem(650);
        position: relative;
        z-index: 1;
        background: #ed6a5a;
        border-radius: 50%;
        margin: auto;
    }
    .flashing{
        position: absolute;
        width: rem(650);
        height: rem(650);
        left: 50%;
        margin-left: rem(-325);
        b{
            width: rem(20);
            height: rem(323);
            margin-top: rem(3);
            margin-left: rem(-10);
            position: absolute;
            transform: rotate(0deg);
            transform-origin:  center bottom;
            /*background: #eeeeee77;*/
        }
        i{
            position: absolute;
            width: rem(14);
            height: rem(14);
            background: white;
            left: 50%;
            top: rem(10);
            border-radius: 50%;
            display: block;
            box-shadow: 0 0 rem(15) rem(6) rgba(255,255,255,0);
        }
        img{
            position: absolute;
            width: rem(10);
            top: rem(-2);
            left: 50%;
            margin-left: rem(-5);
            
        }
        .flashing_light{
            i{
                box-shadow: 0 0 rem(15) rem(6) rgba(255,255,255,1);
            }
        }
    }
    .flashing_parent b i{
        animation: twinkle .8s .2s linear infinite;
    }
    $base_deg:12deg;
    @for $i from 1 through 40 {
        .flashing b:nth-of-type(#{$i}) {
            transform: rotate($base_deg *$i);
        }
    }
    .dial_con{
        width: rem(570);
        height: rem(570);
        background: url('../../assets/img/mine/task/dial_bg2.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        left: 50%;
        margin-left: rem(-285);
        top: rem(40);
        div{
            color: #dfa500;
            position:absolute;
            height:rem(285);
            left:50%;
            top:0;
            transform: translate(-50%) rotate(0deg);
            transform-origin:  center bottom;
            padding-top: rem(40);
            b{
                font-size: $size_default;
            }
            strong{
                font-size: rem(36);
                display: block;
                padding: rem(6) 0 ;
            }
            img{
                width: rem(46);
            }
        }
        .sad{
            b{
                display: block;
                padding: rem(20) 0 ;
            }
        }
    }
    @for $i from 0 through 7 {
        .dial_#{$i} {
            animation: dial#{$i} 6s cubic-bezier(.2,0,0,.9) forwards;
        }
    }
    @for $i from 0 through 7 {
        .dial_con div:nth-of-type(#{$i}) {
            transform: translate(-50%) rotate(45deg *$i);
        }
    }
    .btn_dial,.btn_dial[disabled]{
        width: rem(158);
        height: rem(202);
        border: 0;
        background: url('../../assets/img/mine/task/dial_pointer1.png') no-repeat;
        background-size: 100%;
        position: absolute;
        top: rem(210);
        left: 50%;
        margin-left: rem(-79);
        z-index: 3;
        color: white;
        padding: 0;
        padding-top: rem(56);
        strong{
            display: block;
            font-size: rem(52);
            line-height: rem(60);
        }
        b{
            display: block;
            margin: auto;
            margin-top: rem(-15);
            white-space: nowrap;
            max-width: 80%;
            @include ellipsis;
        }
    }
    @keyframes twinkle{
        0%{box-shadow: 0 0 rem(15) rem(6) rgba(255,255,255,0);}
        50%{box-shadow: 0 0 rem(15) rem(6) rgba(255,255,255,1);}
        100%{box-shadow: 0 0 rem(15) rem(6) rgba(255,255,255,0);}
    }
    @for $i from 0 through 7 {
        @keyframes dial#{$i} {
            0%{transform: rotate(0deg);}
            100%{transform: rotate(1800deg + 45deg*$i);}
        }
    }
</style>

By : Yimi-shan