翻滚吧骰子！——flex布局加css3动画综合练习

我们需要实现的效果如链接https://codepen.io/shug0/pen/XJJGeW。

这里面的代码直接复制过来是会报错的，运行也不正常。。还是第一次见选择器里面还能包含其他的选择器的方式，

所有用自己的方式写一遍，详细代码如下：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子</title>
    <link rel="stylesheet" href="骰子.css">
</head>
<body>
<ul>
    <!--第一个面一点-->
    <li class="one">
        <span class="dot"></span>
    </li>
    <!--第二个面3个点-->
    <li class="two">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </li>
    <!--第三个面4个点-->
    <li class="three">
        <div class="left">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="right">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </li>
<!--第四个面5个点-->
    <li class="four">
        <div class="left">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="middle">
            <span class="dot"></span>
        </div>
        <div class="right">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </li>
    <!--第5个面两个点-->
    <li class="five">
        <span class="dot"></span>
        <span class="dot"></span>
    </li>
    <!--第六个面六个点-->
    <li class="six">
        <div class="left">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="right">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </li>
</ul>
</body>
</html>

View Code

css部分：

@charset "UTF-8";
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    background: #444;
}

.dot {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #333;
    display: block;
    box-shadow: 0 -2px 0 1px #666 inset, 0 2px 0 1px #111 inset;
}

ul {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    animation: move 5s infinite linear alternate;
}

ul:hover {
    animation-play-state: paused;
}

li {
    width: 200px;
    height: 200px;
    border: 2px  solid #000;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    opacity: 0.9;
    padding: 20px;
    box-sizing: border-box;
}

/*一个点 */
.one {
    transform: rotateX(90deg) translateZ(100px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*2个点 */
.five {
    transform: translateZ(100px);
    display: flex;
    justify-content: space-between;
}

.five span:nth-child(2) {
    align-self: flex-end;
}
/*4个点*/
.three {
    transform: translateX(-100px) rotateY(90deg);
    display: flex;
    justify-content: space-between;
}
.three  .right,
.three  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*3个点*/
.two {
     transform: translateX(100px) rotateY(90deg);
    display: flex;
    justify-content: space-between;
}

.two span:nth-child(2) {
    align-self: center;
}

.two span:nth-child(3) {
    align-self: flex-end;
}


/*5个点*/
.four {
    transform: rotateX(180deg) translateZ(100px);
    display: flex;
    justify-content: space-between;
}
.four .right,
.four .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.four .middle {
    align-self: center;
}

/*6个点*/
.six {
    transform: rotateX(270deg) translateZ(100px);
    display: flex;
    justify-content: space-between;
}
.six .right,
.six .left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@keyframes move {
from {
transform: translateX(0) rotateX(0deg) rotateY(0deg);
}
to {
transform: translateX(500px) rotateX(360deg) rotateY(180deg);
}
}

View Code

跑起来点数是跟实际骰子一样de ~

一、先构建基础的html代码

1.写出正方体的基本结构（我这里用的是ul列表绝对定位的方式来做立方体）

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

2.写出每个面有多少个点数

比如第4面是5个点数的：

 <li class="four">
        <div class="left">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="middle">
            <span class="dot"></span>
        </div>
        <div class="right">
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </li>

二、css的编写

1.先给立方体的父元素加个保留3d的样式：

transform-style: preserve-3d;

2.搭建好html之后就开始写立方体的样式，写好每个面需要旋转和平移的距离，距离需要根据父元素的距离进行确定，比如第3面：

transform: translateX(100px) rotateY(90deg);

3.写好每个点的通用样式：

.dot {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #333;
    display: block;
    box-shadow: 0 -2px 0 1px #666 inset, 0 2px 0 1px #111 inset;
}

4.可以开始写骰子的点数了！利用我们的display：flex；关于各个面色子的实现可以参考阮老师的文章：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

display: flex;
    flex-direction: column;
    justify-content: space-between;

其中要做一些小的改变，这个大家自己去试试~

另外强烈建议先纸上画好一个色子，确定好每个面的点数，这次我差点就被自己弄晕了。。。。

好的啦，今天写了两个flex的练习，对flex的理解又深刻多了~欢迎大家交流指正！~

欢迎前端学习者一起加入前端交流群啊~883726280！

秒客网

翻滚吧骰子！——flex布局加css3动画综合练习

一、先构建基础的html代码

二、css的编写

相关文章