CSS+JS实现随机大小骰子

 ?1 ????<style> ?2 ????????* { ?3 ????????????margin: 0; ?4 ????????????padding: 0 ?5 ????????} ?6 ????????:root{ ?7 ????????????background: #666; ?8 ????????} ?9 ?10 ????????#content { 11 ????????????/* display: flex; */ 12 ????????????/* width: 1200px; */ 13 ????????????/* height: 200px; */ 14 ????????????width: 134px; 15 ????????????height: 134px; 16 ????????????/* justify-content: space-around; */ 17 ????????????/* align-items: center; */ 18 ????????????/* margin: 20px auto; */ 19 ????????????transform-style: preserve-3d; 20 ????????????transform: ?rotateY(30deg) rotateX(-20deg); 21 ?22 ????????????/* transition: all 2s 5s; */ 23 ????????????position: absolute; 24 ????????????left:0; 25 ????????????top: 0; 26 ????????????right: 0; 27 ????????????bottom: 0; 28 ????????????margin: auto; 29 ????????} 30 ?31 ????????/* #content:hover{ 32 ????????????transform: rotateY(360deg) rotateX(20deg) 33 ????????} ????????*/ 34 ?35 ????????@keyframes move1{ 36 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 37 ????????????20%{transform: rotateY(3600deg) rotateX(3600deg)} 38 ????????????90%{transform: rotateY(3600deg) rotateX(3600deg)} 39 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 40 ????????} 41 ????????@keyframes move2{ 42 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 43 ????????????20%{transform: rotateY(3510deg) rotateX(3600deg)} 44 ????????????90%{transform: rotateY(3510deg) rotateX(3600deg)} 45 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 46 ????????} 47 ????????@keyframes move3{ 48 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 49 ????????????20%{transform: rotateY(3690deg) rotateX(3600deg)} 50 ????????????90%{transform: rotateY(3690deg) rotateX(3600deg)} 51 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 52 ????????} 53 ????????@keyframes move4{ 54 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 55 ????????????20%{transform: rotateY(3780deg) rotateX(3600deg)} 56 ????????????90%{transform: rotateY(3780deg) rotateX(3600deg)} 57 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 58 ????????} 59 ????????@keyframes move5{ 60 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 61 ????????????20%{transform: rotateY(3600deg) rotateX(3690deg)} 62 ????????????90%{transform: rotateY(3600deg) rotateX(3690deg)} 63 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 64 ????????} 65 ????????@keyframes move6{ 66 ????????????0%{transform: ?rotateY(30deg) rotateX(-20deg);} 67 ????????????20%{transform: rotateY(3600deg) rotateX(3510deg)} 68 ????????????90%{transform: rotateY(3600deg) rotateX(3510deg)} 69 ????????????100%{transform: ?rotateY(30deg) rotateX(-20deg);} 70 ????????} 71 ?72 ????????#content>div{ 73 ????????????width: 100px; 74 ????????????height: 100px; 75 ????????????padding: 15px; 76 ????????????display: flex; 77 ????????????background: #fff; 78 ????????????border-radius: 15px; 79 ????????????position: absolute; 80 ????????????/* box-shadow: 2px 1px 5px #333; */ 81 ????????????border: 2px solid #eee; 82 ????????} ?????83 ?84 ????????#content span{ 85 ????????????width: 25px; 86 ????????????height: 25px; 87 ????????????display: block; 88 ????????????border-radius: 50%; 89 ????????????background: #c33; 90 ????????}
　　　　　　　　//筛子布局 ???????????91 ????????/* 1 */ 92 ????????#content>div:nth-child(1){ 93 ????????????justify-content: center; 94 ????????????align-items: center; 95 ????????????transform: translateZ(65px) 96 ????????} 97 ?98 ????????/* 2 */ 99 ????????#content>div:nth-child(2){100 ????????????justify-content: space-between;101 ????????????align-items: center;102 ????????????transform: translateZ(-65px)103 ????????}104 ????????/* 3 */105 ????????#content>div:nth-child(3){106 ????????????justify-content: space-between;107 ????????????transform: rotateX(90deg) translateZ(65px)108 ????????}109 110 ????????#content>div:nth-child(3) span:nth-child(2){111 ????????????align-self: center;112 ????????} ????113 ????????114 ????????#content>div:nth-child(3) span:nth-child(3){115 ????????????align-self: flex-end;116 ????????} ???117 ????????/* 4 */118 ????????#content>div:nth-child(4){119 ????????????transform: rotateX(90deg) translateZ(-65px);120 ????????????justify-content: space-between;121 ????????}122 123 ????????#content>div:nth-child(4) div{124 ????????????display: flex;125 ????????????flex-direction: column;126 ????????????justify-content: space-between;127 ????????}128 ????????/* 5 */129 ????????#content>div:nth-child(5){130 ????????????transform: rotateY(90deg) translateZ(65px);131 ????????????justify-content: space-between;132 ????????}133 134 ????????#content>div:nth-child(5) div{135 ????????????display: flex;136 ????????????flex-direction: column;137 ????????????justify-content: space-between;138 ????????} ???????139 140 ????????#content>div:nth-child(5) div:nth-child(2){141 ????????????justify-content: center;142 ????????}143 ????????/* 6 */144 ????????#content>div:nth-child(6){145 ????????????transform: rotateY(90deg) translateZ(-65px);146 ????????????justify-content: space-between;147 ????????}148 149 ????????#content>div:nth-child(6) div{150 ????????????display: flex;151 ????????????flex-direction: column;152 ????????????justify-content: space-between;153 ????????} ???????154 155 ????</style>

 1 <body> 2 ????<div id="content"> 3 ????????<!-- 第一个筛子 --> 4 ????????<div> 5 ????????????<span></span> 6 ????????</div> 7 ?8 ????????<!-- 第二个筛子 --> 9 ????????<div>10 ????????????<span></span>11 ????????????<span></span>12 ????????</div>13 14 ????????<!-- 第三个筛子 -->15 ????????<div>16 ????????????<span></span>17 ????????????<span></span>18 ????????????<span></span>19 ????????</div>20 21 ????????<!-- 第四个 -->22 23 ????????<div>24 ????????????<div>25 ????????????????<span></span>26 ????????????????<span></span>27 ????????????</div>28 ????????????<div>29 ????????????????<span></span>30 ????????????????<span></span>31 ????????????</div>32 ????????</div>33 ????????<!-- 第五个 -->34 ????????<div>35 ????????????<div>36 ????????????????<span></span>37 ????????????????<span></span>38 ????????????</div>39 ????????????<div>40 ????????????????<span></span>41 ????????????</div>42 ????????????<div>43 ????????????????<span></span>44 ????????????????<span></span>45 ????????????</div>46 ????????</div>47 　　　　　<!-- 第六个-->48 ????????<div>49 ????????????<div>50 ????????????????<span></span>51 ????????????????<span></span>52 ????????????????<span></span>53 ????????????</div>54 ????????????<div>55 ????????????????<span></span>56 ????????????????<span></span>57 ????????????????<span></span>58 ????????????</div>59 ????????</div>60 ????</div>61 </body>

1 ????$("#content").click(function(){2 ????????var num = parseInt(1+Math.random()*6)3 ????????$("#content").css("animation","move"+num+" 5s ease-in-out 1")