赞
踩
效果图:
代码:
- <!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>
- <!--推荐使用google浏览器-->
- <!--一点-->
- <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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。