css3动画简单demo——掷骰子

最新推荐文章于 2024-01-16 21:04:57 发布
最新推荐文章于 2024-01-16 21:04:57 发布
阅读量1.9k 收藏 6
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38436883/article/details/100084204
版权

简单模仿掷骰子的情景，正面的数字是随机的

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>掷骰子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            background-color: #000;
        }

        .wrap {
            position: absolute;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-animation: myanimal 6s forwards;
            -webkit-perspective: 0px;
        }

        /* 先将骰子各个面显示在界面中心点 */
        .num {
            position: absolute;
            height: 200px;
            width: 200px;
            font-size: 48px;
            text-align: center;
            line-height: 200px;
            top: 50%;
            left: 50%;
            color: wheat;
            margin: -100px 0 0 -100px;
        }

        /* 移动六个面的位置，形成立体空间 */
        .num6 {
            -webkit-transform: translatez(100px);
        }

        .num1 {
            -webkit-transform: translatez(-100px);
        }

        .num4 {
            -webkit-transform: rotatex(90deg) translatez(100px);
        }

        .num3 {
            -webkit-transform: rotatex(-90deg) translatez(100px);
        }

        .num5 {
            -webkit-transform: rotatey(-90deg) translatez(100px);
        }

        .num2 {
            -webkit-transform: rotatey(90deg) translatez(100px);
        }

        /* 画出为每个面点数 */
        [class$="dice"] {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            background: #e7e7e7;
            border: 1px solid #000;
            padding: 10%;
            -webkit-animation: diceanimal 1s forwards;
        }

        .circle {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #000;
        }

        .first-dice {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .second-dice,
        .third-dice {
            display: flex;
            justify-content: space-between;
        }

        .second-dice .circle:nth-of-type(2) {
            align-self: flex-end;
        }

        .third-dice .circle:nth-of-type(2) {
            align-self: center;
        }

        .third-dice .circle:nth-of-type(3) {
            align-self: flex-end;
        }

        .fourth-dice,
        .fifth-dice,
        .sixth-dice {
            display: flex;
            justify-content: space-between;
        }

        .fourth-dice .column,
        .fifth-dice .column,
        .sixth-dice .column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .fifth-dice .column:nth-of-type(2) {
            justify-content: center;
        }

        /* 为了实现随机显示数字，动画的代码在Js里面添加 */
        /* @-webkit-keyframes myanimal {
            0% {
                -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
                -webkit-transform-origin: 40% 40%;
                left: 0%;
                top: -50%;
            }
            40% {
                left: 40%;
                top: 30%;
            }
            70% {
                left: 50%;
                top: 10%;
            }

            100% {
                -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
                -webkit-transform-origin: center center;
                left: 50%;
                top: 25%;
            } 
        }*/
    </style>
</head>

<body>

    <!-- 前6后1 上4下3 左5右2 -->
    <div class="wrap">
        <!-- 点数1 -->
        <div class="num1 num">
            <div class="first-dice">
                <span class="circle"></span>
            </div>
        </div>

        <!-- 点数2 -->
        <div class="num2 num">
            <div class="second-dice">
                <span class="circle"></span>
                <span class="circle"></span>
            </div>
        </div>

        <!-- 点数3 -->
        <div class="num3 num">
            <div class="third-dice">
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
            </div>
        </div>

        <!-- 点数4 -->
        <div class="num4 num">
            <div class="fourth-dice">
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
            </div>
        </div>

        <!-- 点数5 -->
        <div class="num5 num">
            <div class="fifth-dice">
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
                <div class="column">
                    <span class="circle"></span>
                </div>
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
            </div>
        </div>

        <!-- 点数6 -->
        <div class="num6 num">
            <div class="sixth-dice">
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
                <div class="column">
                    <span class="circle"></span>
                    <span class="circle"></span>
                    <span class="circle"></span>
                </div>
            </div>
        </div>
    </div>

    <script>


        //设置旋转的角度随机，必须是90的倍数结束时才能是立正的状态，
        //以90为基数是为了保证骰子会转动
        let endRotateX = 90 + Math.floor(Math.random() * 5) * 90;
        endRotateY = 90 + Math.floor(Math.random() * 5) * 90;
        endRotateZ = 90 + Math.floor(Math.random() * 5) * 90;

        //实现动画效果
        document.styleSheets[0].insertRule(
            "@-webkit-keyframes myanimal {" +
            " 0% {-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);" +
            // "-webkit-transform-origin: 40% 40%;" +
            "left: 0%;top: -50%; }" +
            "30% {left: 30%;top: 20%;-webkit-transform: rotateX(10)}" +
            "75% {left: 48%;top: 15%;-webkit-transform: rotateX(10)}" +
            "95% {left: 50%;top: 20%;-webkit-transform: rotateX(90) rotateY(90) rotateZ(10);}" +
            "100% {-webkit-transform: rotateX(" + endRotateX + "deg) rotateY(" + endRotateY + "deg) rotateZ(" + endRotateZ + "deg);" +
            "-webkit-transform-origin: center center;" +
            "left: 50%;top: 20%;}}"
        )

    </script>
</body>

</html>

效果图

 

 

Micky丶
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3 里面的动画——帧动画
Meatball_MMY的博客
05-09 387
1.属性解释 动画名称： animation-name: 起个名字; 动画执行时间： animation-duration: 写个时间; 动画执行方式： animation-timing-function linear 匀速 ease 开始时慢，然后加快，在结束前再次变慢 ease-in 以低速开始 ease-out 以低速结束 ease-in-ou...
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接...
gif骰子动画打包下载筛子gif，png1到6，高清下载，免费下载
09-19
gif骰子，动画打包，下载筛子，gif，png1到6，高清下载，免费下载 gif骰子，动画打包，下载筛子，gif，png1到6，高清下载，免费下载
jquery投色子动画
u011927449的博客
07-08 196
可以点击这里体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/26.htm 效果图： 代码如下： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery掷色子并显示随机结果-可乐义</title> 6 <style type="text/css"> 7 #main_kele
html5写骰子 css
qq_59846534的博客
08-03 867
【代码】html5写骰子 css。
Python基础案例练习：掷骰子小游戏
Python案例分享，B站视频教程：https://space.bilibili.com/523606542
08-31 3112
前言 骰子是我们经常能看到的小玩意儿，今天我们来做一个模拟掷骰子过程的文字版小游戏，送给新接触Python的初学者们~ 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 幻想编程岛 | 作者 码里奥编程 | 来源 代码解析 1、导入需要的随机数库 2、创建Die类 骰子属性sides（面数）默认为6面； 定义一个名为roll_die()的方法打印位于（1，骰子面数）之间的随机数； 定义一个名为upd..
制作骰子动画&指定投掷数字
konglingbin66的专栏
10-26 1164
... 内容太多，大家自行下载学些吧 原代码和制作教程请下载附件: 链接：https://pan.baidu.com/s/1-AIEU1yxx8Cq_r_4KCwNnA 提取码：1n5g
jQuery掷骰子动画特效
07-24
总的来说，"jQuery掷骰子动画特效"是一个很好的实例，展示了jQuery如何与CSS3结合，以创建具有互动性的、引人入胜的Web内容。对于初学者而言，这是一个很好的实践项目，可以帮助他们掌握基本的前端开发技能，尤其是...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
CSS3动画特效demo.rar
06-17
在本资源"CSS3动画特效demo.rar"中，包含了利用CSS3（层叠样式表第三版）技术创建的各种酷炫动画效果。CSS3是Web设计领域的重要里程碑，它极大地扩展了CSS2.1的功能，特别是在视觉表现和动态效果方面。通过深入学习...
Flash源文件 掷骰子比大小小游戏
07-11
这是一个猜大小的小游戏，11点以下为小，以上为大，三个相同为豹子。
【初中数学flssh动画素材】掷骰子
03-04
【初中数学flssh动画素材】掷骰子
CSS3骰子3D立方体旋转动画特效代码
03-20
**CSS3概述** CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能...以上就是关于“CSS3骰子3D立方体旋转动画特效代码”的详细知识点介绍，通过理解并实践这些概念，你可以创建出更具吸引力和动态性的网页元素。
Android 自定义View之3D骰子Loading 动画
Android 开发架构
01-10 1296
你可以指定立方体中每一面骰子的点数，颜色和背景，同时也可以指定执行的动画时间和动画插值器 免费获取安卓开发架构的资料（包括Fultter、高级UI、性能优化、架构师课程、 NDK、混合式开发（ReactNative+Weex）和一线互联网公司关于android面试的题目汇总可以加群：936332305 / 群链接：点击链接加入群聊【安卓开发架构】：https://jq.qq.com/?_w...
android开发骰子动画,Android实现掷骰子效果
weixin_35330796的博客
05-25 757
本文实例为大家分享了Android实现掷骰子效果的具体代码，供大家参考，具体内容如下利用handler接受子线程的消息完成骰子点数的不断更替演示START:开始游戏STOP:停止游戏RECOVER:重置色子到初始状态代码package com.example.homeworkten;import androidx.annotation.NonNull;import androidx.appcomp...
css 3D立体动画效果怎么转这个骰子才能看到5
最新发布
lulei5153的博客
01-16 579
css 3D立体动画效果怎么转这个骰子才能看到5。
【flutter】骰子游戏
qq_56132766的博客
04-14 275
flutter 骰子游戏
flutter多个定时器销毁不了的问题
weixin_44911775的博客
08-12 1193
如果定义了多个定时器，但是有一些定时器没用到，在dispose的时候又销毁它，那么那段代码就会出错，下面的代码就不会运行了，所以剩下的定时器就不会关闭了，所以可以在initState时用一遍就可以了。......
iOS--手把手教你一步一步完成摇骰子动画
weixin_34013044的博客
06-01 638
写在前面 去年就已经上了摇骰子功能，今年把这个模块总结一下 ，用到的知识点很多，但都是比较基础的。 我先罗列一下知识点，骰子的数量可控， 根据不同的玩法返回对应的数值，要涉及到去重，摇一摇开启动画 1，UIImageView的动画 --旋转动画 2，高级动画--组动画 3，玩法组合--随机数产生，骰子数值回调 4，加入系统摇一摇功能 5，闭包回调，枚举类型运用 这里只列出了部分代码，完整代码，请移...
CSS3动画与JavaScript跨域实操指南
本PPT深入探讨了CSS3动画和JavaScript跨域的相关知识，适合软件工程专业的学生和开发人员参考。它由zxh计算机科学与工程学院在2016年8月24日分享，旨在提升对这两个领域的理解。 CSS3动画部分首先介绍了动画的基础...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值