第六周复习

dy> 

    <div class="boss">

        <div id='yd' οnclick="ks()"><h4>开始</h4></div>

        <div id='tao'>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zz"></div>

        <div class="zzs"></div>

    </div>

    <div id='zhu'>

        <p>一等奖</p>

        <p>二等奖</p>

        <p>三等奖</p>

        <p>四等奖</p>

        <p>五等奖</p>

        <p>六等奖</p>

        <p>七等奖</p>

        <p>八等奖</p>

        <p>九等奖</p>

        <p>十等奖</p>

    </div>

    <div id='an'>

         <div></div>

    </div>

    </div>

    <h1 href="" style="word-wrap: break-word;width: 5px; font-size: 5px;">1111</h1>

<script>

.boss{

    width: 325px;

    height: 325px;

    margin: 0 auto;

    text-align: center;

    margin-top: 150px;

    position: relative;

    border-radius: 50%;

    border: 3px solid red;

    overflow: hidden;

}

p{

    height: 232px;

    width: 20px;

    font-size: 20px;

    word-wrap: break-word;

    z-index: 1;

    transform-origin: 12px -72px ;

    position: absolute;

    top: 0;

}

#zhu{

    position: absolute;

    top: 218px;

    left: 148px;

}

.zz{

    height: 0;

    width: 0;

    /* background: chocolate; */

    border-width: 0px 54px 166px 54px ;  

    border-style: solid;

    border-color: #0099cc  transparent transparent transparent ;

    /* transform: rotate(90deg); */

    position: absolute;    

    top: 0px;

    z-index: 2;

    transform-origin:top ;

}

.zzs{

    height: 0;

    width: 0;

    border-width: 0px 54px 166px 54px ;  

    border-style: solid;

    border-color:   transparent transparent red transparent ;

    position: absolute;    

    top: 0px;

    z-index: 0;

    transform-origin:top ;

}

.zz:nth-child(1){

    border-color: transparent  transparent #f5a8c2 transparent ;

}

.zz:nth-child(2){

    border-color: transparent  transparent #3ecfd4 transparent ;

}

.zz:nth-child(3){

    border-color: transparent  transparent #49dd98 transparent ;

}

.zz:nth-child(4){

    border-color: transparent  transparent #41e9d2 transparent ;

}

.zz:nth-child(5){

    border-color: transparent  transparent #96f59a transparent ;

}

.zz:nth-child(6){

    border-color: transparent  transparent #dbfa92 transparent ;

}

.zz:nth-child(7){

    border-color: transparent  transparent #e1ec7f transparent ;

}

.zz:nth-child(8){

    border-color: transparent  transparent #e6b4f5 transparent ;

}

.zz:nth-child(9){

    border-color: transparent  transparent #f08960 transparent ;

}

.zz:nth-child(10){

    border-color: transparent  transparent #0099cc transparent ;

}

#tao{

    position: absolute;

    top: 162px;

    left: 109px;

    z-index: 1;

    

}

#yd{

    width: 60px;

    height: 60px;

    border-radius: 50%;

    position: absolute;

    top: 132px;

    left: 132px;

    background-color: rgb(218, 180, 11);

    z-index: 4;

    text-align: center;

}

</script>