抽奖demo

2019年8月31日 153次阅读 来源: 新新

以下是运用一个单页面html画的抽奖demo

结果如图所示，代码以下所示

《抽奖demo》
<style>

html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
}
.circle {
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    background: pink;
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

#left{
        clip: rect(0px 100px 200px 0px);
        position: absolute;
        right: 0px;
        width: 100px;
        height: 200px;
        overflow: hidden;
    }
#right{
    clip: rect(0px 100px 200px 0px);
    position: absolute;
    left: 0px;
    width: 100px;
    height: 200px;
    overflow: hidden;
}

    .circle-left {
        width: 100px;
        height: 200px;
        border-radius: 0px 100px 100px 0px;
        position: absolute;
        right: 0;
        transform-origin: 0 50%;
        line-height: 59px;
        text-align: center;
    }

    .circle2 {
        background: blue;
    }

    .circle3 {
        background: yellow;
        transform: rotate(45deg);
    }

    .circle4 {
        background: lightblue;
        transform: rotate(90deg);
    }

    .circle5 {
        background: lightcoral;
        transform: rotate(135deg);
    }

    .circle-right{
        width: 100px;
        height: 200px;
        border-radius:  100px 0px 0px 100px ;
        position: absolute;
        right: 0;
        transform-origin: 100% 50%;
        line-height: 59px;
        text-align: center;
    }

    .circle6{
        background-color: #3b2e7e;
        transform: rotate(-135deg);
    }
     .circle7{
        background-color: #ff2121;
        transform: rotate(-90deg);
    }
     .circle8{
        background-color: #16a951;
        transform: rotate(-45deg);
    }
    .circle9{
        background-color: #e0eee8;
    }

    .center1 {
        background: pink;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        position: absolute;
        margin-left: -25px;
        margin-top: -25px;
        border-radius: 50px;
        z-index: 1;
        text-align: center;
        line-height: 50px;
        font-size: 42px;
        text-align: center;
        /* animation: rotateF 1s infinite linear ;
        -webkit-animation: rotateF 1s infinite linear ; */
        animation: rotateF 1s steps(10) alternate infinite ;
        -webkit-animation: rotateF 1s steps(10) alternate infinite ;
        animation-play-state: paused;
        /* background-image: url(arrow.png);
        background-size: 100% 100%; */
    }

    .arrow {
        background-image: url(arrow.png);
        background-size: 100% 100%;
        display: none;
    }

    @keyframes rotateF{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
    }

</style>
<body>

<div class="circle">
    <div id="arrow" class="arrow center1" onclick="grade()"></div>
    <div id="center" class="center1" onclick="chou()">抽</div>
    <div id="left">
        <div class="circle-left circle2">1</div>
        <div class="circle-left circle3">2</div>
        <div class="circle-left circle4">3</div>
        <div class="circle-left circle5">4</div>
    </div>
    <div id="right">
        <div class="circle-right circle9">5</div>
        <div class="circle-right circle8">6</div>
        <div class="circle-right circle7">7</div>
        <div class="circle-right circle6">8</div>
    </div>
</div>

</body>

<script>

function chou() {
    let center = document.getElementById('center');
    let arrow = document.getElementById('arrow');
    center.style.display = 'none';
    arrow.style.display = 'block';
    arrow.style.WebkitAnimationPlayState = 'running';
    arrow.style.AnimationPlayState = 'running';
    let time = Math.random()*10000
    setTimeout(()=>{
        arrow.style.WebkitAnimationPlayState = 'paused'
        arrow.style.AnimationPlayState = 'paused'
    },time);
}

function grade() {
    let arrow = document.getElementById('arrow');
    let time = Math.random()*10000
    arrow.style.WebkitAnimationPlayState = 'running';
    arrow.style.AnimationPlayState = 'running';
    setTimeout(()=>{
        arrow.style.WebkitAnimationPlayState = 'paused'
        arrow.style.AnimationPlayState = 'paused'
    },time);
}

</script>
</html>
做了一个抽奖运动的小demo, 用于好好明白css动画。中心种种百度进修了他人的代码，因而本身写了个小 demo，愿望人人支撑。自学小前端一枚。。。

    原文作者：新新
    原文地址: https://segmentfault.com/a/1190000018311151
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞