css3弹性布局骰子

最新推荐文章于 2022-02-23 20:03:14 发布
最新推荐文章于 2022-02-23 20:03:14 发布
阅读量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 937
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
html5弹性布局两行三列,CSS3弹性布局和多列布局
weixin_29273849的博客
06-09 1735
弹性盒子基础弹性盒子(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 679
flex 布局小demo——骰子练习单项目两个项目三个项目四个项目九个项目 单项目 （1） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex 布局——骰子</title> <style type="text/css"...
CSS3骰子3D立方体旋转动画
09-19
CSS3骰子3D立方体旋转动画，纯CSS3代码，3D立方体自动循环翻转动画。可以自己设置六个面的文字，大小，颜色。
js css3实现3D骰子特效.zip
07-04
js css3实现3D骰子特效
css3 弹性布局和多列布局
FareBlog
02-10 3626
css3 弹性布局和多列布局弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。弹性盒子基础定义一个弹性盒子在父盒子上定义display属性：#box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: flex; }当然还有行内布局的弹性盒子#box{ display: -
弹性盒布局——骰子布局
qq_52475404的博客
11-07 1214
弹性盒布局-骰子布局 个人认为正常的骰子应该是这样的排布的，不是太复杂，一点应该就是在正中间，不会随便挪动的吧（菜鸡发言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 3902
前言 CSS3中的盒子模型（Flex弹性布局），是目前最流行的布局方式，相比于传统的Position，FLoat，Table 布局，盒子模型可以用更少的代码，实现更好的效果（比如：各种居中、对齐等）。 本文将把盒子模型中的各种布局方式，全面展示出来，并且直接提供相关代码，供读者使用。 GitHub项目地址：https://github.com/jiangjiaheng/CSS 项目展示 1. 盒...
javascrip家务骰子DIV+CSS
05-23
js版家务骰子DIV+CSS源码下载：DIV+CSS+Javascript所编写，指定摇晃次数，随机选择人物和事件，界面美观大方，模拟芒果手机瓷砖块的界面，动态加载事件，有动画效果（小部分功能不支持IE6）。
弹性盒制作骰子
weixin_30663391的博客
01-19 451
html样式 一、二、三这三个点数很容易，div里面有几个点就加几个span。到了四，就需要进行分组。四分两组，五和六分三组 <div> <span></span> </div> <div> <span></span><span></span> </div> &l...
html css做骰子,用CSS-flex写个骰子
weixin_30735701的博客
06-18 650
上班中午休息时间试着用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 235
<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 1381
今天要给大家分享的是css3中非常重要的一个知识点-----弹性布局！！！有多重要了，在PC端可能还看不出来有多好用，但是在移动端这个弹性布局会非常非常的好用在给大家分享这个应用小案例之前，先把弹性布局的知识点给梳理一下：7、案例：骰子的实现&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...
纯css3构建骰子
weixin_38122772的博客
08-15 1784
上一篇（点击查看）用flex构建了骰子的六个面，现在用css3的3D属性把骰子面拼成骰子，如下： flex.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> // 引入fle...
flex弹性布局-制作色子
weixin_30906425的博客
09-21 167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .first-face { display: flex; ju...
骰子布局
weixin_43837268的博客
06-04 4386
一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表...
flex布局(骰子布局)
weixin_54420874的博客
02-23 2199
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
快速掌握CSS3 FlexBox弹性布局
"这篇文章主要介绍了如何在10分钟内理解CSS3 FlexBox弹性布局，包括其基本概念、特点、工作原理以及如何通过设置不同的属性来实现各种布局效果。" CSS3 FlexBox弹性布局是现代网页设计中一种强大的布局工具，它简化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值