css3 实现大转盘

头像
anchovy
    阅读 9 分钟

    效果
    图片描述

    完整代码

    <!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="wap-font-scale" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />  

    <title>大转盘</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
    /* 大转盘 */
    .turntable-wrap{position: relative;background: url(../images/bg-turntable.jpg) no-repeat center top #030406;background-size: 100% auto;}
    .turntable-wrap .turntable-times{position: absolute;z-index: 3;left: 1rem;right: 1rem;top: 75%;font-size: 3rem;color: #fff;text-align: center;}
    .turntable-wrap .turntable-times strong{color: #f00;}
    .turntable-wrap .turntable-logo{position: absolute;z-index: 2;left: 50%;bottom: 2rem;width: 40%;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);}
    .turntable-wrap .turntable-main{position: absolute;z-index: 4;left: 0;top: 14%;width: 100%;}
    .turntable-wrap .turntable-main [class^="awards-"]{position: absolute;left: 50%;top: 0;z-index: 2;width: 12.5%;height: 50%;font-size: 1.8rem;font-weight: bold;color: #444;text-align: center;-webkit-transform: translate(-50%, 0) rotate(0);-ms-transform: translate(-50%, 0) rotate(0);transform: translate(-50%, 0) rotate(0);-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;}
    .turntable-wrap .turntable-main [class^="awards-"]:before{content: "";display: block;height: 25%;}
    .turntable-wrap .turntable-main .awards-1{-webkit-transform: translate(-50%, 0) rotate(22.5deg);-ms-transform: translate(-50%, 0) rotate(22.5deg);transform: translate(-50%, 0) rotate(22.5deg);color: #f00;}
    .turntable-wrap .turntable-main .awards-2{-webkit-transform: translate(-50%, 0) rotate(67.5deg);-ms-transform: translate(-50%, 0) rotate(67.5deg);transform: translate(-50%, 0) rotate(67.5deg);}
    .turntable-wrap .turntable-main .awards-3{-webkit-transform: translate(-50%, 0) rotate(112.5deg);-ms-transform: translate(-50%, 0) rotate(112.5deg);transform: translate(-50%, 0) rotate(112.5deg);color: #f00;}
    .turntable-wrap .turntable-main .awards-4{-webkit-transform: translate(-50%, 0) rotate(157.5deg);-ms-transform: translate(-50%, 0) rotate(157.5deg);transform: translate(-50%, 0) rotate(157.5deg);}
    .turntable-wrap .turntable-main .awards-5{-webkit-transform: translate(-50%, 0) rotate(202.5deg);-ms-transform: translate(-50%, 0) rotate(202.5deg);transform: translate(-50%, 0) rotate(202.5deg);color: #f00;}
    .turntable-wrap .turntable-main .awards-6{-webkit-transform: translate(-50%, 0) rotate(247.5deg);-ms-transform: translate(-50%, 0) rotate(247.5deg);transform: translate(-50%, 0) rotate(247.5deg);}
    .turntable-wrap .turntable-main .awards-7{-webkit-transform: translate(-50%, 0) rotate(292.5deg);-ms-transform: translate(-50%, 0) rotate(292.5deg);transform: translate(-50%, 0) rotate(292.5deg);color: #f00;}
    .turntable-wrap .turntable-main .awards-8{-webkit-transform: translate(-50%, 0) rotate(337.5deg);-ms-transform: translate(-50%, 0) rotate(337.5deg);transform: translate(-50%, 0) rotate(337.5deg);}
    .turntable-wrap .turntable-main .turntable-rotate{position: relative;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;}
    .turntable-wrap .turntable-main .turntable-img{display: block;width: 90%;margin: 0 auto;}
    .turntable-wrap .turntable-main .turntable-pointer{position: absolute;z-index: 3;left: 50%;top: 50%;width: 25%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
    .turntable-wrap .turntable-main .turntable-pointer .go{display: block;position: relative;z-index: 2;width: 100%;}
    .turntable-wrap .turntable-main .turntable-pointer .pointer{position: absolute;z-index: 1;left: 50%;top: -12%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 20%;}
    .turntable-wrap .dialog{visibility: hidden;opacity: 0;position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);-webkit-transition: all .3s ease-out;transition: all .3s ease-out;}
    .turntable-wrap .dialog.active{visibility: visible;opacity: 1;}
    .turntable-wrap .dialog-main{position: absolute;z-index: 2;left: 5%;right: 5%;top: 50%;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);}
    .turntable-wrap .dialog-main .dialog-bg{display: block;width: 100%;}
    .turntable-wrap .dialog-main .dialog-close{position: absolute;z-index: 2;right: 0;top: -0.5rem;width: 15%;}
    .turntable-wrap .dialog-main p{position: absolute;z-index: 3;left: 10%;top: 50%;width: 80%;font-size: 1.8rem;color: #fff;text-align: center;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);}
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="turntable-wrap">
        <div class="turntable-main">
            <div class="turntable-pointer">
                <img class="pointer" src="images/img-turntable-pointer.png" alt="">
                <img class="go" src="images/img-turntable-go.png" alt="">
            </div>
            <div class="turntable-rotate">
                <img class="turntable-img" src="images/img-turntable.png" alt="">
                <strong class="awards-1">20元</strong>
                <strong class="awards-2">2元</strong>
                <strong class="awards-3">200元</strong>
                <strong class="awards-4">4元</strong>
                <strong class="awards-5">100元</strong>
                <strong class="awards-6">6元</strong>
                <strong class="awards-7">50元</strong>
                <strong class="awards-8">8元</strong>
            </div>
        </div>
        <div class="turntable-times">您有<strong></strong>次抽状机会</div>
        <img class="turntable-logo" src="images/img-turntable-logo.png" alt="">
        
        <div class="dialog">
            <div class="dialog-main">
                <p>恭喜您获得 <em></em> 元<br>将在公众号发放微信红包</p>
                <img class="dialog-close" src="images/img-turntable-dialog-close.png" alt="">
                <img class="dialog-bg" src="images/img-turntable-dialog.png" alt="">
            </div>
        </div>
    </div>

    <script>
        // 实始化高度
        $('.turntable-wrap').css('min-height', $(window).height());

        // 对应奖项
        function awards(rotate) {
            switch(rotate) {
                case 337.5:
                    return '20';
                    break;
                case 292.5:
                    return '2';
                    break;
                case 247.5:
                    return '200';
                    break;
                case 202.5:
                    return '4';
                    break;
                case 157.5:
                    return '100';
                    break;
                case 112.5:
                    return '6';
                    break;
                case 67.5:
                    return '50';
                    break;
                case 22.5:
                    return '8';
                    break;
            }
        }

        // 中状机率(如果想改机率可以*200然后计算)
        function probability() {
            var random = Math.random()*100;
            if(random==1) {  // 200元(1%)
                return 247.5;
            } else if(1<random && random<=3) { // 100元(2%)
                return 157.5;
            } else if(3<random && random<=6) { // 50元(3%)
                return 67.5;
            } else if(6<random && random<=10) { // 20元(4%)
                return 337.5;
            } else if(10<random && random<=15) { // 8元(5%)
                return 22.5;
            } else if(15<random && random<=22) { // 6元(7%)
                return 112.5;
            } else if(22<random && random<=32) { // 4元(10%)
                return 202.5;
            } else {                             // 2元(68%)
                return 292.5;
            }
        }

        // 转盘逻辑
        var originRotate = 0;
        function handleTurntable() {
            var rotate = originRotate+(360-originRotate%360)+360+probability();
            $('.turntable-rotate').css({
                '-webkit-transform': 'rotate('+rotate+'deg)',
                '-ms-transform': 'rotate('+rotate+'deg)',
                'transform': 'rotate('+rotate+'deg)'
            });
            setTimeout(function() {
                $('.dialog').addClass('active').find('p').html('恭喜您获得 <em>'+awards(rotate%360)+'</em> 元<br>将在公众号发放微信红包');
                $('.turntable-pointer').removeClass('disable');
            }, 1000);
            originRotate = rotate;
        }
        // 点击
        var times = 3; // 3次机会
        $('.turntable-times strong').text(times);
        $('.turntable-pointer').click(function() {
            if(!$(this).hasClass('disable')) {
                $(this).addClass('disable');
                times--;
                if(times >= 0) {
                    $('.turntable-times strong').text(times);
                    handleTurntable();
                } else {
                    $('.dialog').addClass('active').find('p').text('机会已用完！');
                    $('.turntable-pointer').removeClass('disable');
                }
            }
        });

        // 关闭dialog
        $('.dialog-close').click(function() {
            $(this).parents('.dialog').removeClass('active');
        });
    </script>
</body>
</html>

    随心写写，希望有帮助~~

    javascript
    anchovy
    1.9k 声望89 粉丝
    « 上一篇
    css3 translate 完美诠释表头固定
    下一篇 »
    高德地图计算两点间的角度、当前坐标

    引用和评论

    推荐阅读
    头像
    react useRef的两层用法，开眼界了

    anchovy阅读 1.9k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新