css3弹性布局骰子

最新推荐文章于 2024-10-09 11:54:57 发布
最新推荐文章于 2024-10-09 11:54:57 发布
阅读量3k 收藏 4
点赞数 1
分类专栏： css 文章标签： css3 弹性布局 骰子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15390961/article/details/73078201
版权

问题：如何在页面上画出骰子

解决方法：使用CSS3的弹性布局和border-radius属性

效果如图：
骰子
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,
    body {
        height: 100%;
        background-color: skyblue;
    }

    ul {
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        list-style: none;
        padding: 0;
        /*兼容处理*/
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        background-color: #fff;
        /*在父元素中开启布局*/
        display: flex;
        margin: 10px;
        float: left;
    }

    li {
        width: 20px;
        height: 20px;
        background-color: #000;
        border-radius: 50%;
        margin: 5px;
    }

    ul:nth-child(2) {
        /*设置子元素在横轴的对齐方式*/
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
    }

    ul:nth-child(3) {
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -o-justify-content: flex-end;
        justify-content: flex-end;
    }

    ul:nth-child(4) {
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -o-justify-content: flex-end;
        justify-content: flex-end;
        /*设置子元素在纵轴的对齐方式*/
        -ms-align-items: center;
        align-items: center;
    }

    ul:nth-child(5) {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -ms-align-items: center;
        align-items: center;
    }

    ul:nth-child(6) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
    }

    ul:nth-child(7) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
    }

    ul:nth-child(7) li:nth-child(2) {
        /*设置子元素自身在纵轴的对齐方式*/
        -ms-align-self: flex-end;
        align-self: flex-end;
    }

    ul:nth-child(8) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
    }

    ul:nth-child(8) li:nth-child(2) {
        -ms-align-self: center;
        align-self: center;
    }

    ul:nth-child(8) li:nth-child(3) {
        -ms-align-self: flex-end;
        align-self: flex-end;
    }

    ul:nth-child(9) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
        /*开启弹性布局后，默认方向是横着放，可以改变其摆放方式*/
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
    }

    ul:nth-child(10) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
        /*弹性布局默认一行排布，子元素过多时，其宽度会发生变化*/
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    ul:nth-child(10) li:nth-child(3) {
        margin-right: 20px;
        -ms-align-self: flex-end;
        align-self: flex-end;
    }

    ul:nth-child(10) li:nth-child(4) {
        -ms-align-self: flex-end;
        align-self: flex-end;
    }

    ul:nth-child(11) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        /*开启换行后，align-items和align-self失去效果，但align-content可以调整其在纵轴的对齐方式*/
        -webkit-align-content: space-between;
        -moz-align-content: space-between;
        -ms-align-content: space-between;
        -o-align-content: space-between;
        align-content: space-between;
    }

    ul:nth-child(11) li:nth-child(3) {
        margin: 0 40px;
    }

    ul:nth-child(12) {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: space-between;
        -moz-align-content: space-between;
        -ms-align-content: space-between;
        -o-align-content: space-between;
        align-content: space-between;
    }
    </style>
</head>

<body>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
码代码的肖邦
关注
专栏目录
css3摇骰子,css3实现掷骰子（无图）
weixin_42144707的博客
08-03 968
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
html5弹性布局两行三列,CSS3弹性布局和多列布局
weixin_29273849的博客
06-09 1772
弹性盒子基础弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性：#box{display: -webkit-flex; //webkit内核浏览器的兼容设置，下同display: flex;}当然还有行内布局的弹性盒子#box{display: -webkit-inline-flex;disp...
CSS3的Flexbox骰子布局的实现及问题讲解
12-30
本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等： 一、First Face我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现： CSS Code复制内容到剪贴板  <section u00a0name=01 class>      <span u00a0class=dot></span>     </section>    face-01 {    display: flex;   
css3 flex 布局——骰子
且听风吟的博客
11-26 694
flex 布局小demo——骰子练习单项目两个项目三个项目四个项目九个项目 单项目 （1） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex 布局——骰子</title> <style type="text/css"...
【H2O2|全栈】关于CSS（12）用flex布局实现骰子的六个面
最新发布
过期的H2O2的博客
10-09 1291
在学习过flex布局的相关知识之后，我们调节成员在容器中的常规位置，比如居左、居中等，就方便很多了。比较典型的例子就是骰子六个面的点的位置调节。
CSS3骰子3D立方体旋转动画
09-19
CSS3骰子3D立方体旋转动画，纯CSS3代码，3D立方体自动循环翻转动画。可以自己设置六个面的文字，大小，颜色。
js css3实现3D骰子特效.zip
07-04
js css3实现3D骰子特效
css3 弹性布局和多列布局
FareBlog
02-10 3658
css3 弹性布局和多列布局弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。弹性盒子基础定义一个弹性盒子在父盒子上定义display属性：#box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: flex; }当然还有行内布局的弹性盒子#box{ display: -
弹性盒布局——骰子布局
qq_52475404的博客
11-07 1235
弹性盒布局-骰子布局 个人认为正常的骰子应该是这样的排布的，不是太复杂，一点应该就是在正中间，不会随便挪动的吧（菜鸡发言hh） 总代码：（每个骰子分别弹性盒布局就好） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
CSS3盒子模型（FLex弹性布局）实例代码全公开
qq_35658349的博客
08-25 3999
前言 CSS3中的盒子模型（Flex弹性布局），是目前最流行的布局方式，相比于传统的Position，FLoat，Table 布局，盒子模型可以用更少的代码，实现更好的效果（比如：各种居中、对齐等）。 本文将把盒子模型中的各种布局方式，全面展示出来，并且直接提供相关代码，供读者使用。 GitHub项目地址：https://github.com/jiangjiaheng/CSS 项目展示 1. 盒...
javascrip家务骰子DIV+CSS
05-23
js版家务骰子DIV+CSS源码下载：DIV+CSS+Javascript所编写，指定摇晃次数，随机选择人物和事件，界面美观大方，模拟芒果手机瓷砖块的界面，动态加载事件，有动画效果（小部分功能不支持IE6）。
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
掷骰子 CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接https://unpkg.com/roll-a-die@1.3.0/dist/roll-a-die.js 。 切记将包裹号更新为最新的。 调用带有其选项的方法。 rollADie({ element, numberOfDice: 2, callback}); 使用npm（和CommonJS构建器） 使用npm安装。 npm install --save roll-a-die 用纱安装。 yarn add roll-a-die 导入图书馆 ES5 const rollADie = require('roll-a-die'); ES6 import rollADie from 'roll-a-die'; 调用方法 rollADie({ element,
弹性盒制作骰子
weixin_30663391的博客
01-19 457
html样式 一、二、三这三个点数很容易，div里面有几个点就加几个span。到了四，就需要进行分组。四分两组，五和六分三组 <div> <span></span> </div> <div> <span></span><span></span> </div> &l...
html css做骰子,用CSS-flex写个骰子
weixin_30735701的博客
06-18 661
上班中午休息时间试着用flex做了一个CSS骰子，效果如下：demo主要是flex布局，写的时候用到的还有scss和一点vue，vue只是用作生成结构。HTMLvar vm = new Vue({el:'#app',data:{cellNumber:6},computed:{numberNum:function(){var old = this.cellNumber;if(old == ''){o...
弹性盒布局--骰子
weixin_46508028的博客
03-22 250
<style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ div{ width: 100px; height: 100px; background: #ccc; margin: 100px; border-radius:10px; box-shado...
弹性布局理解及应用---骰子小案例
qq_42181069的博客
05-23 1392
今天要给大家分享的是css3中非常重要的一个知识点-----弹性布局！！！有多重要了，在PC端可能还看不出来有多好用，但是在移动端这个弹性布局会非常非常的好用在给大家分享这个应用小案例之前，先把弹性布局的知识点给梳理一下：7、案例：骰子的实现&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...
纯css3构建骰子
weixin_38122772的博客
08-15 1798
上一篇（点击查看）用flex构建了骰子的六个面，现在用css3的3D属性把骰子面拼成骰子，如下： flex.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> // 引入fle...
css，html简单骰子/色子代码
weixin_52278161的博客
07-05 6307
简单代码，运用较少css，完整代码放在最后了嗷。最终效果： 思想：相当于给每个骰子里的点分块，再分别处理。（点也是一个块）如图，把每个骰子分成三个部分，分别处理。 分块后分别处理，比如：这样的块中的点可用水平方向居中样式：justify-content:center———————————————————————————————— 这样的块加两个点，用两端环绕justify-content:space-around———————————————————————————————— 这两块分别用居
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值