美文网首页视觉艺术
CSS3掷骰子动画

CSS3掷骰子动画

作者: learninginto | 来源:发表于2020-01-30 22:03 被阅读0次

    CSS3掷骰子动画

    • 练习一下css3的弹性盒布局，做了一个骰子，随便扔一下吧

      骰子.gif

    一、拆分模块，先分别做出骰子的6个面

    1.png

    • HTML

      <div id="container">
    <!-- 1 -->
    <div id="page1">
        <span></span>
    </div>
    <!-- 2 -->
    <div id="page2">
        <span></span>
        <span></span>
    </div>
    <!-- 3 -->
    <div id="page3">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!-- 4 -->
    <div id="page4">
        <div>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
        </div>
    </div>
    <!-- 5 -->
    <div id="page5">
        <div>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
        </div>
    </div>
    <!-- 6 -->
    <div id="page6">
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

      点数1是最简单的，只需要设置父元素为弹性盒之后，主轴与侧轴都居中即可。

      #container>div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}
      2.png

      点数2，在这里我们调整了主轴方向为侧轴并space-around自动分配距离

      display: flex;
flex-direction: column;
/* 在侧轴居中 */
align-items: center;
/* 左右边上有边距 */
justify-content: space-around;
      3.png

      点数3，中间和最后的点都需要单独设置，这里用到了nth-child() 选择器

      单独设置的点需要用到align-self属性，分别设置为center和flex-end，第一个点没有设置是因为默认就是flex-start。

      #container>div:nth-child(3) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(3) span:nth-child(2) {
    align-self: center;
}

#container>div:nth-child(3) span:nth-child(3) {
    align-self: flex-end;
}
      4.png

      从点数4开始，布局就和之前的123不同（见文章开始的html部分）

      每组的div容器先采用了弹性盒，space-between两端对齐，中间自动分配

      在各自的弹性盒中再次设置弹性布局

      #container>div:nth-child(4) {
    display: flex;
    justify-content: space-between;

}

#container>div:nth-child(4) div:nth-child(1),
#container>div:nth-child(4) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
      5.png

      点数5，与点数4基本相同，同样是采用嵌套的弹性盒模式，在中间增加了一个居中的点。

      #container>div:nth-child(5) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(1),
#container>div:nth-child(5) div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
      6.png

      点数6，通常习惯将它两两一组，分成三组。

      在这里我们将它三个一组，分成两组，侧轴改为主轴，两端对齐即可。

      #container>div:nth-child(6) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(6) div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    二、将6个面拼接成立方体

    之前在上一篇文章中已经介绍过，两种CSS3拼接立方体的方法，这里就不赘述了。

    三、最后，设置旋转动画

    @keyframes scroll {
    0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    25% {
        transform: rotateY(0deg) rotateX(90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(180deg) rotateZ(180deg);
    }

    75% {
        transform: rotateY(180deg) rotateX(270deg) rotateZ(270deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
    }
    • 完整的css代码
    * {
    margin: 0;
    padding: 0;
}

#container {
    height: 140px;
    width: 140px;
    position: relative;
    margin: 200px auto;
    transform-style: preserve-3d;
    /* display: flex; */
    justify-content: space-around;
    /* 设置旋转的基准点 */
    transform-origin: 50% 50% -70px;
    -webkit-animation: scroll 3s linear 0s infinite;
}

#container>div {
    width: 100px;
    height: 100px;
    background: #eee;
    border-radius: 10px;
    padding: 20px;
    position: absolute;
}

#container span {
    width: 25px;
    height: 25px;
    background: #000;
    border-radius: 50%;
    display: block;
    box-shadow: inset 3px 3px 5px #fff;
}

#container #page1 span {
    width: 35px;
    height: 35px;
    background: #f00;
}

/* 第一个 */
#container>div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2 */
#container>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    /* 在侧轴居中 */
    align-items: center;
    /* 左右边上有边距 */
    justify-content: space-around;
}

/* 3 */
#container>div:nth-child(3) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(3) span:nth-child(2) {
    align-self: center;
}

#container>div:nth-child(3) span:nth-child(3) {
    align-self: flex-end;
}

/* 4 */
#container>div:nth-child(4) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(4) div:nth-child(1),
#container>div:nth-child(4) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5 */
#container>div:nth-child(5) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(1),
#container>div:nth-child(5) div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container>div:nth-child(5) div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 6 */
#container>div:nth-child(6) {
    display: flex;
    justify-content: space-between;
}

#container>div:nth-child(6) div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container #page2 {
    transform-origin: right;
    /*点数为2的面以右边为转轴转动*/
    transform: rotateY(-90deg);
    /*绕Y轴逆时针转动90度*/
    -webkit-transform-origin: right;
    -webkit-transform: rotateY(-90deg);
    -moz-transform-origin: right;
    -moz-transform: rotateY(-90deg);
}

#container #page3 {
    transform-origin: left;
    /*点数为3的面以左边为转轴转动*/
    transform: rotateY(90deg);
    /*绕Y轴顺时针转动90度*/
    -webkit-transform-origin: left;
    -webkit-transform: rotateY(90deg);
    -moz-transform-origin: left;
    -moz-transform: rotateY(90deg);
}

#container #page4 {
    transform-origin: top;
    /*点数为4的面以上边为转轴转动*/
    transform: rotateX(-90deg);
    /*绕X轴逆时针转动90度*/
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: top;
    -moz-transform: rotateX(-90deg);
}

#container #page5 {
    transform-origin: bottom;
    /*点数为5的面以下边为转轴转动*/
    transform: rotateX(90deg);
    /*绕X轴顺时针转动90度*/
    -webkit-transform-origin: bottom;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: bottom;
    -moz-transform: rotateX(90deg);
}

#container #page6 {
    transform: translateZ(-140px);
    /*点数为6的面沿Z轴向后平移140px*/
    -webkit-transform: translateZ(-140px);
    -moz-transform: translateZ(-140px);
}

@keyframes scroll {
    0% {
        transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    25% {
        transform: rotateY(0deg) rotateX(90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(0deg) rotateX(180deg) rotateZ(180deg);
    }

    75% {
        transform: rotateY(180deg) rotateX(270deg) rotateZ(270deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
    }
}

    相关文章

      网友评论

        本文标题：CSS3掷骰子动画

        本文链接：https://www.haomeiwen.com/subject/iyewthtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        视觉艺术

        关于我们|服务条款|联系我们|CSS3掷骰子动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！