CSS：flex实现骰子的6个面

最新推荐文章于 2023-06-13 20:28:31 发布
最新推荐文章于 2023-06-13 20:28:31 发布
阅读量1.7k 收藏
点赞数 2
文章标签： python
原文链接：http://www.cnblogs.com/ycherry/p/8184125.html
版权

用flex实现骰子的六个面，实现效果如下：

实现代码如下：

<html>
    <head>
        <style>
            body {
                background-color: #000000;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            [class $= 'face'] {
                margin: 16px;
                padding: 4px;
                background-color: #e7e7e7;
                width: 104px;
                height: 104px;
                -o-object-fit: contain;
                object-fit: contain;
                -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
                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;
                -webkit-box-shadow: inset 0 3px #111, inset 0 -3px #555;
                box-shadow: inset 0 3px #111, inset 0 -3px #555;
            }

            .first-face {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .second-face, 
            .third-face,
            .forth-face,
            .fifth-face,
            .sixth-face {
                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;
            }
            .forth-face .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .fifth-face .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .fifth-face .column:nth-of-type(2) {
                align-self: center;
            }
            .sixth-face .column {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        </style>
    </head>
    <body>
        <div class="first-face">
            <span class="pip"></span>
        </div>
        <div class="second-face">
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="third-face">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </div>
        <div class="forth-face">
            <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="fifth-face">
            <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="sixth-face">
            <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>

 

转载于:https://www.cnblogs.com/ycherry/p/8184125.html

yuxiaoyu.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用flex布局实现六个骰子
Roronna_Zoro的博客
01-24 1486
一、初步布局 1、我们先设立一个外部盒子用flex布局将子代居中 .father { display: flex; margin: 200px auto; border-top: 2px solid #828384; width: 1200px; height: 300px; justify-content: space-around; } 再使用亲代选择器设置骰子盒子css .father>di
网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
weixin_35545345的博客
06-15 1899
主要是利用flex的一些特性来写的，掌握好flex基础，写出筛子的几个页面不是问题。推荐去我写的一个博客中有flex的小练习 线上练习flex布局htmlcss.shaizi {width: 1400px;height: 600px;margin: auto;border: 2px solid #ddd;border-radius: 10px;padding: 20px;display: flex...
用flex布局画骰子的六个面
yikina_tiyoko的博客
03-31 458
直接暴力主轴侧轴垂直居中就好,为更直观的体现效果，以下代码忽略了样式写法，参考flex部分即可。将主轴（横轴）改为平分，横向上保持骰子间距，侧轴center居中，纵向上确定距离。主轴先设置space-between贴近两边，侧轴依此为子元素设置。两者实现方式一致，每行item数量修改即可。
flex布局—骰子的六个平面
前端菜鸟
08-05 600
使用纯CSS写的骰子的六个平面。
详解flex布局做骰子案例
yun_shuo的博客
12-26 6027
详解flex布局做骰子案例 上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~ 首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
CSS3新增布局之: flex详解
11-20
将属性和属性值（display:flex; ）写在哪个标签样式中，谁就是 容器；它的所有子元素自动成为容器成员，称为项目。 当一个元素的display 取值为flex，所有项目(子元素)会在一行显示；如果所有项目的尺寸之和大于容器...
Flex.less:一套用于CSS3 Flex布局的Less mixins
05-26
22中，您需要将以下代码段添加到您设置的display: flex每个元素中display: flex 。 /* * Legacy Firefox implementation treats all flex containers * as inline-block elements. */ @-moz-document url-...
css3 flex布局实现平均分配元素的示例代码
11-20
本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下： 例子一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex ...
CSS3的Flexbox骰子布局的实现及问题讲解
12-30
一、First Face我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现： CSS Code复制内容到剪贴板  class> <span u00a0class=dot></span> ...
骰子的6个面和1个无点面图片
03-24
骰子的6个面和1个无点面，可以用来做小游戏
HTML5生成骰子的页面
07-11
自己写的HTML5骰子的代码，希望大家喜欢
flex布局实现骰子的6种布局
叶小桃的博客
06-13 1550
思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后将第二个子元素居中对齐align-self: center，第三个子元素靠后对齐align-self: end。整个页面分为6骰子的面，分别为点数1到6。点数1：典型的居中布局。
Flex弹性盒子布局实现骰子6点
彭世瑜的博客
09-28 4766
1、基础样式 h2{ text-align: center; } .main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between; } .container{ display: flex; width: 320px; heigh...
如何用flex定位写出骰子的六个面
Xxxcxyz的博客
07-18 593
注：class=“face”设置的为骰子的样式 仅写一次 每个骰子都添加了class为face的属性名 一点时 body： <div class="face face1"> <span></span> </div> css： .face{ float: left; margin: 16px...
js实现只显示一个骰子页面，其余的不显示（HTML使用栅格布局实现六种筛子的样式）
南 墙
06-03 1437
页面开始的时候就运行，效果图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .big { width: 100px; height: 100px; background: skyblue; display: flex;
自动旋转的骰子代码html,HTML使用栅格布局实现六种筛子样式的代码详解
weixin_39995108的博客
05-30 2283
先上效果图下面附上代码.big {width: 100px;height: 100px;background: skyblue;display: flex;margin-top: 20px;}.small {width: 10px;height: 10px;background: purple;border-radius: 5px;}.one {display: flex;justify-cont...
一个骰子，6面，1个面是 1， 2个面是2， 3个面是3，问平均掷多少次能使1、2、3都至少出现一次
ccfeng
09-25 2562
题目：一个骰子，6面，1个面是 1， 2个面是2， 3个面是3，问平均掷多少次能使1、2、3都至少出现一次。 解：（没学过《组合数学》的请略过） 设P（N=n）表示第n次（n>2）抛出后1，2，3都出现的概率，问题要求n的期望E(N=n).掷1的概率p=1/6,掷2的概率q=1/3,掷3的概率r=1/2. C++编程实现如下: #include using namesp
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
weixin_39905500的博客
06-15 775
1 Flex 布局首先聊聊Flex 布局，Flex 布局又称“弹性布局”，任何容器都可以指定为Flex布局，设置Flex布局会使得子元素的float、clear、vertical-align失效1.1 Flex属性1.1.1 flex-direction：决定项目的排列方向，默认自左向右水平排列.box {flex-direction: row | row-reverse | column | c...
使用flex实现骰子的五点布局
最新发布
09-09
使用Flex布局实现骰子的五点布局可以通过以下步骤进行： 1. 创建HTML结构： ```html <div class="dice-container"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> ``` 2. 添加CSS样式： ```css .dice-container { display: flex; width: 100px; height: 100px; background-color: white; border: 1px solid black; flex-wrap: wrap; } .dot { width: 30%; height: 30%; background-color: black; border-radius: 50%; margin: 5%; } .dot:nth-child(1), .dot:nth-child(5) { align-self: center; } .dot:nth-child(2), .dot:nth-child(4) { align-self: flex-start; } .dot:nth-child(3) { align-self: flex-end; } .dot:nth-child(2), .dot:nth-child(3), .dot:nth-child(4), .dot:nth-child(5) { justify-self: center; } ``` 3. 解释CSS样式： - `.dice-container` 是骰子容器，使用Flex布局，并设置宽度、高度、背景色和边框。 - `.dot` 是每个点的样式，设置宽度、高度、背景色、圆角和外边距。 - 使用 `nth-child` 选择器来对每个点进行定位。 - `align-self` 属性用于垂直对齐，`flex-start` 将点向上对齐，`flex-end` 将点向下对齐，`center` 将点居中对齐。 - `justify-self` 属性用于水平对齐，`center` 将点水平居中对齐。 这样就可以实现骰子的五点布局了。根据需要可以调整容器和点的大小、颜色等样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值