筛子y骰子 6个点

最新推荐文章于 2024-09-17 22:59:44 发布

kqi augety

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量33

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_64827594/article/details/134569657

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
align-content: center;
background: -webkit-linear-gradient(top, #222, #333);
background: linear-gradient(top, #222, #333);
}
/*骰子形状*/
.dice{
margin: 16px;
padding: 4px;
background-color: #e7e7e7;
width: 104px;
height: 104px;
-o-object-fit: contain;
object-fit: contain;
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
border-radius: 10%;
}
/*骰子的点*/
.pip {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
.flex_center{
display: flex;
justify-content: center;
align-items: center;
}
.flex_between{
display: flex;
justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
align-self: flex-end;
}
.third-face .pip:nth-of-type(2) {
align-self: center;
}
.third-face .pip:nth-of-type(3) {
align-self: flex-end;
}
.fifth-face .column:nth-of-type(2) {
justify-content: center;
}
.column{
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>


<div class="flex_center dice">
<span class="pip"></span>
</div>

<div class="flex_between second-face dice">
<span class="pip"></span>
<span class="pip"></span>
</div>

<div class="flex_between third-face dice">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>

<div class="flex_between fourth-face dice">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>

<div class="flex_between fifth-face dice">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>

<div class="flex_between sixth-face dice">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
</body>
</html>