css骰子布局٩ξ°v°ʔو~
关于骰子布局,顾名思义就是用css来做出一个骰子,只不过是骰子的展开图。 在日常生活中我们知道,骰子相对的面眼数之和为7眼。就是这个样子,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="touzi w1">
<div class="circle1 m1"></div>
</div>
<div class="touzi w2">
<div class="circle2 m2"></div>
<div class="circle2 m3"></div>
</div>
<div class="touzi w3">
<div class="circle3 m4"></div>
<div class="circle3 m5"></div>
<div class="circle3 m6"></div>
</div>
<div class="touzi w4">
<div class="circle4 m7"></div>
<div class="circle4 m8"></div>
<div class="circle4 m9"></div>
<div class="circle4 m10"></div>
</div>
<div class="touzi w5">
<div class="circle5 m11"></div>
<div class="circle5 m12"></div>
<div class="circle5 m13"></div>
<div class="circle5 m14"></div>
<div class="circle5 m15"></div>
</div>
<div class="touzi w6">
<div class="circle6 m16"></div>
<div class="circle6 m17"></div>
<div class="circle6 m18"></div>
<div class="circle6 m19"></div>
<div class="circle6 m20"></div>
<div class="circle6 m21"></div>
</div>
</body>
</html>
class="touzi"即为骰子的的面,用w1——w6来区分面。
而每个面下面有着相应的眼数,即为circle,circle1——6分别是六面各自的眼,每个面之间的眼大小应该相同,而彼此之间位置不同,所以我设置了m用来控制每个眼在自己的面里的位置。
那么如何来确定眼的位置呢,就要用到子绝父相了。他不光可以控制面的位置,也可以控制眼的位置
* {
margin: 0;
padding: 0;
}
.touzi {
/* margin: 20px; */
float: left;
width: 98px;
height: 98px;
border: 1px solid #787878;
background-color: #e2e2e2;
border-radius: 15%;
position: relative;
}
.w1 {
top: 200px;
left: 300px;
}
.w2 {
top: 300px;
left: 100px;
}
.w3 {
top: 300px;
left: 300px;
}
.w4 {
top: 300px;
left: 0;
}
.w5 {
top: 300px;
left: 0;
}
.w6 {
top: 400px;
left: -200px;
}
.circle1 {
width: 50px;
height: 50px;
background-color:beige;
border-radius: 100%;
}
.m1 {
position: absolute;
top: 25px;
left: 25px;
}
.circle2 {
width: 40px;
height: 40px;
background-color: beige;
border-radius: 100%;
}
.m2 {
position: absolute;
top: 5px;
left: 30px;
}
.m3 {
position: absolute;
bottom: 5px;
left: 30px;
}
.circle3 {
width: 30px;
height: 30px;
background-color: beige;
border-radius: 100%;
}
.m4 {
position: absolute;
top: 5px;
left: 5px;
}
.m5 {
position: absolute;
top: 35px;
left: 35px;
}
.m6 {
position: absolute;
bottom: 5px;
right: 5px;
}
.circle4 {
width: 30px;
height: 30px;
background-color: beige;
border-radius: 100%;
}
.m7 {
position: absolute;
top: 5px;
left: 5px;
}
.m8 {
position: absolute;
top: 5px;
right: 5px;
}
.m9 {
position: absolute;
bottom: 5px;
left: 5px;
}
.m10 {
position: absolute;
bottom: 5px;
right: 5px;
}
.circle5 {
width: 30px;
height: 30px;
background-color: beige;
border-radius: 100%;
}
.m11 {
position: absolute;
top: 5px;
left: 5px;
}
.m12 {
position: absolute;
top: 5px;
right: 5px;
}
.m13 {
position: absolute;
top: 35px;
left: 35px;
}
.m14 {
position: absolute;
bottom: 5px;
left: 5px;
}
.m15 {
position: absolute;
bottom: 5px;
right: 5px;
}
.circle6 {
width: 25px;
height: 25px;
background-color: beige;
border-radius: 100%;
}
.m16 {
position: absolute;
top: 5px;
left: 5px;
}
.m17 {
position: absolute;
top: 5px;
right: 5px;
}
.m18 {
position: absolute;
top: 37.5px;
left: 5px;
}
.m19 {
position: absolute;
top: 37.5px;
right: 5px;
}
.m20 {
position: absolute;
bottom: 5px;
left: 5px;
}
.m21 {
position: absolute;
bottom: 5px;
right: 5px;
}
当我只设置了眼的位置时,是这样的
而当我设置了面的位置后,是这样的
在定位面的时候要注意,面的相对位置是根据其原本的位置所进行的改变