如何用CSS弹性布局实现一个正方形骰子效果？-html教程-PHP中文网

如何用CSS弹性布局实现一个正方形骰子效果？

心靈之曲

发布： 2025-03-03 10:04:23

原创

638人浏览过

利用css 弹性布局制作正方形骰子效果

本文介绍如何使用CSS弹性布局创建一个始终保持正方形的骰子。目标是利用CSS代码，生成一个类似于示例图片的骰子，并确保其显示区域始终为正方形。

如何用CSS弹性布局实现一个正方形骰子效果？

我们采用以下HTML结构和CSS样式：

HTML结构：

<div class="dice">
  @@##@@
  <ul class="spots">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active"></li>
  </ul>
</div>

登录后复制

div.dice作为容器，包含一个用于背景或阴影的图片img.shadow和一个无序列表ul.spots表示骰子点数。列表项li代表点数，class="active"表示显示的点数。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

立即学习“前端免费学习笔记（深入）”；

CSS样式：

.dice {
  max-width: 500px;
  width: 100%;
  border: 1px solid #000;
  margin: auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden; /* 隐藏超出容器内容 */

  img {
    display: block;
    width: 100%;
    height: 100%; /* 保证图片填充容器 */
    object-fit: cover; /* 图片缩放填充容器 */
  }

  .spots {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    li {
      width: 30%;
      height: 30%;
      border-radius: 50%; /* 点为圆形 */
      background-color: transparent; /* 默认透明 */

      &.active {
        background-color: skyblue;
      }
    }
  }
}

登录后复制

box容器设置最大宽度、居中显示和圆角边框。spots使用弹性布局，flex-wrap: wrap允许元素换行，justify-content: space-between和align-content: space-between确保列表项均匀分布。每个列表项li设置宽度和高度，保持骰子正方形，&.active选择器设置选中点的样式。img元素使用object-fit: cover确保图片填充容器，作为背景。通过以上HTML和CSS，即可实现一个始终保持正方形的骰子效果。点数的显示可以通过JavaScript动态控制li.active类来实现。

以上就是如何用CSS弹性布局实现一个正方形骰子效果？的详细内容，更多请关注php中文网其它相关文章！