骰子

骰子效果图

骰子代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{

            background:#292929;

        }

    .box{

            width: 1000px;

            height:300px;

            background:#666;

            margin:50px auto;

            display:flex;

            justify-content: space-around;

            align-items: center;

        }

        .box>div{

            width: 104px;

            height: 104px;

            background: #e7e7e7;

            border-radius:10px;

            box-shadow: 0 -5px #bbbbbb inset,0 5px #fff inset ,5px 0 #d7d7d7 inset,-5px 0 #d7d7d7 inset;

            display: flex;

            box-sizing: border-box;

            padding:8px;

        }

        .box>div span{

            width: 25px;

            height: 25px;

            background: #333333;

            border-radius: 50%;

            box-shadow: 0 -3px #4f4f4f inset, 0 3px #0a0a0a inset;

        }

        .box>div:nth-child(1){

            justify-content: center;

            align-items: center;

        }

        .box>div:nth-child(2){

            justify-content: space-between;

        }

        .box>div:nth-child(2) span:nth-child(2){

            align-self: flex-end;

        }

        .box>div:nth-child(3){

            justify-content: space-between;

        }

        .box>div:nth-child(3) span:nth-child(2){

            justify-content: center;

            align-self: center;

        }

        .box>div:nth-child(3) span:nth-child(3){

            align-self: flex-end;

        }

        .box>div:nth-child(4),.box>div:nth-child(5),.box>div:nth-child(6){

            justify-content: space-between;

            flex-direction: column;

        }

        .box>div:nth-child(4) p,.box>div:nth-child(5) p,.box>div:nth-child(6) p{

            display: flex;

            justify-content: space-between;

        }

        .box>div:nth-child(5) p:nth-child(2){

            align-self: center;

        }

    </style>

</head>

<body>

    <div class="box">

        <div>

            <span></span>

        </div>

        <div>

            <span></span>

            <span></span>

        </div>

        <div>

            <span></span>

            <span></span>

            <span></span>

        </div>

        <div>

            <p>

                <span></span>

                <span></span>

            </p>

            <p>

                <span></span>

                <span></span>

            </p>

        </div>

        <div>

            <p>

                <span></span>

                <span></span>

            </p>

            <p>

                <span></span>

            </p>

            <p>

                <span></span>

                <span></span>

            </p>

        </div>

        <div>

            <p>

                <span></span>

                <span></span>

            </p>

            <p>

                <span></span>

                <span></span>

            </p>

            <p>

                <span></span>

                <span></span>

            </p>

        </div>

    </div>

</body>

</html>

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 3,242评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,939评论 0 6
  • CSS3掷骰子动画 练习一下css3的弹性盒布局,做了一个骰子,随便扔一下吧骰子.gif 一、拆分模块,先分别做出...
    learninginto阅读 1,254评论 0 9
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,238评论 0 1
  • <!DOCTYPE html> *{margin: 0;padding: 0;}.main{displa...
    小飞侠zzr阅读 353评论 0 0
  • 2017年的第一天,一切都变成了开始,一切都归为了0,我想这就是伟大之处吧!时间流转,生命不休,奋斗不止。 和阿猫...
    聂一一阅读 45评论 0 0
  • 当一两个人说我胖时,我不以为然,但是当越来越多的人说我胖时,我知道了事情的严重性,骗子真是越来越多了!
    大夢想家阅读 97评论 0 0
  • 人生这场戏的最终结局,其实就是一个个选择和坚持叠加起来的总和。 关于沟通中的心理问题,传播者容易产生支持性的态度和...
    TooJo阅读 259评论 0 3
  • 人生不能靠心情活着,而要靠心态去生活。心情像六月的天气,阴晴不定。一个人的生活如果要依赖于心情,他一定也是善变的,...
    城南已花开的晴天阅读 106评论 0 1