CSS+JS实现随机大小骰子

Posted wanerwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS+JS实现随机大小骰子相关的知识,希望对你有一定的参考价值。

CSS部分

  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>

html部分

 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>

JS部分

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

 


以上是关于CSS+JS实现随机大小骰子的主要内容,如果未能解决你的问题,请参考以下文章

立体骰子(css3和js)

如何使用 html css js 生成用于排序可视化器目的的随机大小数组?

骰子传奇

angularJS使用ocLazyLoad实现js延迟加载

Frida HOOK微信实现骰子作弊

css 如何实现随机背景图?