Css3 - 转盘活动

效果图.png

*制作之前先过一遍w3school中的动画介绍

我们理一遍流程,这次主要使用的是 css3 中的 transform: rotate() 旋转效果.

目前这个页面用 jq 做,用 vue/react 也是同理,只是class赋值形式不同而已.

html结构 :

  // html
   <div class="wrap">
        <div class="header">
            <div id="wheel">
                <div class="cursor"></div>
                <div class="point" id="click_point"></div>
                <div class="wheel_all"></div>
            </div>
        </div>
    </div>

css基本样式 :

/* 转盘 Start */
#wheel {
width: 6.3rem;
height: 6.3rem;
margin: 0 auto;
position: relative;
border-radius: 50%;
  }

.wheel_all {
width: 6.3rem;
height: 6.3rem;
border-radius: 50%;
background-size: 6.3rem 6.3rem;
background-position: center;
background-repeat: no-repeat;
background-image: url('../images/xydzp_zp.png');
}

.point {
width: 1.92rem;
height: 1.92rem;
border-radius: 50%;
background-image: url('../images/xydzp_djcjb.png');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
margin-top: -.96rem;
margin-left: -.96rem;
cursor: pointer;
z-index: 9;
transition: all .3s;
}

.cursor {
width: .75rem;
height: .87rem;
background-position: center;
background-size: .75rem .87rem;
background-repeat: no-repeat;
background-image: url('../images/xydzp_zz.png');
position: absolute;
top: 0rem;
left: 50%;
margin-left: -.43rem;
z-index: 9;
}
/* 转盘 End */

Css3 的动画样式 :

.animation_one {
animation: pro_one 5s; /* 动画名字 + 时间 */
animation-fill-mode : forwards; /* 动画结束后停留的帧数 */
}

.animation_two {
animation: pro_two 5s;
animation-fill-mode : forwards;
}

.animation_three {
animation: pro_three 5s;
animation-fill-mode : forwards;
}

.animation_four {
animation: pro_four 5s;
animation-fill-mode : forwards;
  }

.animation_five {
animation: pro_five 5s;
animation-fill-mode : forwards;
}

.animation_six {
animation: pro_six 5s;
animation-fill-mode : forwards;
}

.animation_seven {
animation: pro_seven 5s;
animation-fill-mode : forwards;
}

.animation_eight {
animation: pro_eight 5s;
animation-fill-mode : forwards;
}

.animation_nine {
animation: pro_nine 5s;
animation-fill-mode : forwards;
}


@keyframes pro_one {  /* 定义动画名字 */
    100% {
        transform: rotate(1080deg);
    }
}

@keyframes pro_two {
    100% {
        transform: rotate(1040deg);
    }
}

@keyframes pro_three {
    100% {
        transform: rotate(1000deg);
    }
}

@keyframes pro_four {
    100% {
    transform: rotate(960deg);
    }
}

@keyframes pro_five {
    100% {
        transform: rotate(920deg);
    }
}

@keyframes pro_six {
    100% {
        transform: rotate(880deg);
    }
}

@keyframes pro_seven {
    100% {
        transform: rotate(840deg);
    }
}

@keyframes pro_eight {
    100% {
        transform: rotate(800deg);
    }
}

@keyframes pro_nine {
    100% {
        transform: rotate(760deg);
    }
}

请求后台返回的参数,进行匹配赋值

每次点击后不需要重置,animation_num更改自动匹配,具体内容配合活动业务逻辑做就好.

switch(lottery.count) {
    case 1:
        $(".wheel_all").addClass("animation_one");
        break;
    case 2:
        $(".wheel_all").addClass("animation_two");
        break;
    case 3:
        $(".wheel_all").addClass("animation_three");
        break;
    case 4:
        $(".wheel_all").addClass("animation_four");
        break;
    case 5:
        $(".wheel_all").addClass("animation_five");
        break;
    case 6:
        $(".wheel_all").addClass("animation_six");
        break;
    case 7:
        $(".wheel_all").addClass("animation_seven");
        break;
    case 8:
        $(".wheel_all").addClass("animation_eight");
        break;
    case 9:
        $(".wheel_all").addClass("animation_nine");
        break;

    default:
        console.log('格式错误')
        break;
}