当前位置:   article > 正文

css 弹性盒子实现骰子的效果_弹性盒子写五点筛子

弹性盒子写五点筛子

效果图:

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. html,body{
  14. height: 100%;
  15. }
  16. body {
  17. display: flex;
  18. align-items: center;
  19. justify-content: center;
  20. flex-wrap: wrap;
  21. align-content: center;
  22. background: -webkit-linear-gradient(top, #222, #333);
  23. background: linear-gradient(top, #222, #333);
  24. }
  25. /*骰子形状*/
  26. .dice{
  27. margin: 16px;
  28. padding: 4px;
  29. background-color: #e7e7e7;
  30. width: 104px;
  31. height: 104px;
  32. -o-object-fit: contain;
  33. object-fit: contain;
  34. box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
  35. border-radius: 10%;
  36. }
  37. /*骰子的点*/
  38. .pip {
  39. display: block;
  40. width: 24px;
  41. height: 24px;
  42. border-radius: 50%;
  43. margin: 4px;
  44. background-color: #333;
  45. box-shadow: inset 0 3px #111, inset 0 -3px #555;
  46. }
  47. .flex_center{
  48. display: flex;
  49. justify-content: center;
  50. align-items: center;
  51. }
  52. .flex_between{
  53. display: flex;
  54. justify-content: space-between;
  55. }
  56. .second-face .pip:nth-of-type(2) {
  57. align-self: flex-end;
  58. }
  59. .third-face .pip:nth-of-type(2) {
  60. align-self: center;
  61. }
  62. .third-face .pip:nth-of-type(3) {
  63. align-self: flex-end;
  64. }
  65. .fifth-face .column:nth-of-type(2) {
  66. justify-content: center;
  67. }
  68. .column{
  69. display: flex;
  70. flex-direction: column;
  71. justify-content: space-between;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <!--推荐使用google浏览器-->
  77. <!--一点-->
  78. <div class="flex_center dice">
  79. <span class="pip"></span>
  80. </div>
  81. <!--两点-->
  82. <div class="flex_between second-face dice">
  83. <span class="pip"></span>
  84. <span class="pip"></span>
  85. </div>
  86. <!--三点-->
  87. <div class="flex_between third-face dice">
  88. <span class="pip"></span>
  89. <span class="pip"></span>
  90. <span class="pip"></span>
  91. </div>
  92. <!--四点-->
  93. <div class="flex_between fourth-face dice">
  94. <div class="column">
  95. <span class="pip"></span>
  96. <span class="pip"></span>
  97. </div>
  98. <div class="column">
  99. <span class="pip"></span>
  100. <span class="pip"></span>
  101. </div>
  102. </div>
  103. <!--五点-->
  104. <div class="flex_between fifth-face dice">
  105. <div class="column">
  106. <span class="pip"></span>
  107. <span class="pip"></span>
  108. </div>
  109. <div class="column">
  110. <span class="pip"></span>
  111. </div>
  112. <div class="column">
  113. <span class="pip"></span>
  114. <span class="pip"></span>
  115. </div>
  116. </div>
  117. <!--六点-->
  118. <div class="flex_between sixth-face dice">
  119. <div class="column">
  120. <span class="pip"></span>
  121. <span class="pip"></span>
  122. <span class="pip"></span>
  123. </div>
  124. <div class="column">
  125. <span class="pip"></span>
  126. <span class="pip"></span>
  127. <span class="pip"></span>
  128. </div>
  129. </div>
  130. </body>
  131. </html>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号