Свернутый текст

https://forumuploads.ru/uploads/0019/3c/8c/2/984802.jpg

Командная дуэль
Как играть?
Собираемся , минимум 4 человека, в случайном , рандомном порядке, посредством кубика( который для чистоты результата, бросит администратор) , распределяемся на команды , и бьемся в ежедневных соревнованиях неделю .
Результаты, мы записываем и плюсуем команде , если не попали в топ 150, приносите скрин , пожалуйста .
Неважно, что это , монеты или комнаты, боссы или коллекции, важны только итоговые цифры, с которыми Вы в топе ежедневных соревнований, все они плюсуются в общий счёт команды .
У той команды, у которой счёт больше, та и победила .

❣⚜❣⚜❣Всем добра и счастья ❣⚜❣⚜❣
[html] <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="background"></div>
<div id="wrapper">
  <input id="secondroll" name="roll" type="checkbox">
  <input id="roll" name="roll" type="checkbox">
  <label for="roll">Roll it!</label>
  <label for="secondroll"><span>Stop!</span></label>
  <div id="platform">
    <div id="dice">
      <div class="side front">
        <div class="dot center"></div>
      </div>
      <div class="side front inner"></div>
      <div class="side top">
        <div class="dot dtop dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side top inner"></div>
      <div class="side right">
        <div class="dot dtop dleft"></div>
        <div class="dot center"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side right inner"></div>
      <div class="side left">
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side left inner"></div>
      <div class="side bottom">
        <div class="dot center"></div>
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
      </div>
      <div class="side bottom inner"></div>
      <div class="side back">
        <div class="dot dtop dleft"></div>
        <div class="dot dtop dright"></div>
        <div class="dot dbottom dleft"></div>
        <div class="dot dbottom dright"></div>
        <div class="dot center dleft"></div>
        <div class="dot center dright"></div>
      </div>
      <div class="side back inner"></div>
      <div class="side cover x"></div>
      <div class="side cover y"></div>
      <div class="side cover z"></div>
    </div>
  </div>
</div>

<style>
body {
  font-size:.9em;
  font-family:sans-serif;
}
@keyframes spin {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
    33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
    50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes spin-duplicate {
    0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
    33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
    50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
@keyframes roll {
    0% { transform: translate3d(-200px,-50px,-400px) }
    12% { transform: translate3d(0px,0,-100px) }
    25% { transform: translate3d(200px,-50px,-400px) }
    37% { transform: translate3d(0px,-100px,-800px) }
    50% { transform: translate3d(-200px,-50px,-400px) }
    62% { transform: translate3d(0px,0,-100px) }
    75% { transform: translate3d(200px,-50px,-400px) }
    87% { transform: translate3d(0px,-100px,-800px) }
    100% { transform: translate3d(-200px,-50px,-400px) }
}
#roll:checked ~ #platform > #dice {
    animation: spin-duplicate 2s infinite linear;
}
#roll:checked ~ #platform {
    width:200px;
    height:200px;
    transform-style: preserve-3d;
    animation: roll 1.6s infinite linear;
}
#secondroll:checked ~ #roll:checked ~ #platform > #dice,
#secondroll:checked ~ #roll:checked ~ #platform {
    animation-play-state: paused;
}
#wrapper {
    position: relative;
    width: 200px;
    padding-top: 100px;
    margin: 0 auto;
    perspective: 1200px;
}
#platform {
  margin-top:100px;
}
#dice span {
    position:absolute;
    margin:100px 0 0 100px;
    display: block;
    font-size: 2.5em;
    padding: 10px;
}
#dice {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: spin 50s infinite linear;
}
.side {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow:inset 0 0 40px #ccc;
    border-radius: 40px;
}
#dice .cover, #dice .inner {
    background: #e0e0e0;
    box-shadow: none;
}
#dice .cover {
    border-radius: 0;
    transform: translateZ(0px);
}
#dice .cover.x {
    transform: rotateY(90deg);
}
#dice .cover.z {
    transform: rotateX(90deg);
}
#dice .front  {
    transform: translateZ(100px);
}
#dice .front.inner  {
    transform: translateZ(98px);
}
#dice .back {
    transform: rotateX(-180deg) translateZ(100px);
}
#dice .back.inner {
    transform: rotateX(-180deg) translateZ(98px);
}
#dice .right {
    transform: rotateY(90deg) translateZ(100px);
}
#dice .right.inner {
    transform: rotateY(90deg) translateZ(98px);
}
#dice .left {
    transform: rotateY(-90deg) translateZ(100px);
}
#dice .left.inner {
    transform: rotateY(-90deg) translateZ(98px);
}
#dice .top {
    transform: rotateX(90deg) translateZ(100px);
}
#dice .top.inner {
    transform: rotateX(90deg) translateZ(98px);
}
#dice .bottom {
    transform: rotateX(-90deg) translateZ(100px);
}
#dice .bottom.inner {
    transform: rotateX(-90deg) translateZ(98px);
}
.dot {
    position:absolute;
    width:46px;
    height:46px;
    border-radius:23px;
    background:#444;
    box-shadow:inset 5px 0 10px #000;
}
.dot.center {
    margin:77px 0 0 77px;
}
.dot.dtop {
    margin-top:20px;
}
.dot.dleft {
    margin-left:134px;
}
.dot.dright {
    margin-left:20px;
}
.dot.dbottom {
    margin-top:134px;
}
.dot.center.dleft {
    margin:77px 0 0 20px;
}
.dot.center.dright {
    margin:77px 0 0 134px;
}

#background {
    position:fixed;
    z-index:-1;
    width:100%;
    height:100%;
    background: #071a1e;
    background: -moz-linear-gradient(top, #071a1e 0%, #274249 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#071a1e), color-stop(100%,#274249));
    background: -webkit-linear-gradient(top, #071a1e 0%,#274249 100%);
    background: linear-gradient(to bottom, #071a1e 0%,#274249 100%);
}
label, input[type=checkbox]:before {
    position: absolute;
    overflow:hidden;
    top:40px;
    left:40px;
    display:block;
    width:120px;
    padding-top:9px;
    height:31px;
    cursor:pointer;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
    color:#fff;
    border-radius:6px;
    border:1px solid;
}
input[type=checkbox]:before {
    background:transparent;
    border-color:transparent;
}
input[type=checkbox] {
    display:none;
}
label {
    opacity:.5;
    transition:all .3s ease;
}
label:hover {
    opacity:1;
    box-shadow:0 0 18px rgba(255,255,255,.5);
}
label[for=roll] {
    z-index:1;
    text-shadow:0 -1px 0 #006699;
    border-color:#17C7EC;
    background: -moz-linear-gradient(top, #0099CC 0%, #006699 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099CC), color-stop(100%,#006699));
    background: -webkit-linear-gradient(top, #0099CC 0%,#006699 100%);
    background: linear-gradient(to bottom, #0099CC 0%,#006699 100%);
}
label[for=secondroll] {
    margin-top:-100px;
    text-shadow:0 -1px 0 #CC0033;
    border-color:#FF8298;
    background: -moz-linear-gradient(top, #FF6666 0%, #CC0033 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6666), color-stop(100%,#CC0033));
    background: -webkit-linear-gradient(top, #FF6666 0%,#CC0033 100%);
    background: linear-gradient(to bottom, #FF6666 0%,#CC0033 100%);
}
#roll:checked ~ label[for=roll] {
    margin-top:-100px;
}
#roll:checked ~ label[for=secondroll] {
    margin-top:0px;
}
#secondroll:checked ~ label[for=secondroll] {
    text-shadow:0 -1px 0 #336633;
    border-color:#66FF99;
    background: -moz-linear-gradient(top, #66CC66 0%, #336633 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66CC66), color-stop(100%,#336633));
    background: -webkit-linear-gradient(top, #66CC66 0%,#336633 100%);
    background: linear-gradient(to bottom, #66CC66 0%,#336633 100%);
}
#secondroll:checked ~ label[for=secondroll] span {
    display:none;
}
#secondroll:checked ~ label[for=secondroll]:after {
    content:"Keep rollin'!";
}
           </style> [/html]