css3制作色子

最新推荐文章于 2023-08-03 20:46:54 发布
最新推荐文章于 2023-08-03 20:46:54 发布
阅读量3.8k 收藏 1
点赞数 2
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongjiea/article/details/39400377
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友Adam‘分享用Aui-core+CSS3实用3D骰子JS特效</title>
<meta name="Keywords" content="网友Adam‘分享用Aui-core+CSS3实用3D骰子JS特效,Jquery插件,Jquery原创,Jquery资源,Jquery特效,div+css,JquerySchool" />
<meta name="description" content="JquerySchool是一个专门分享jquery资源、jquery插件、jquery特效的一个网站,完全开放源代码,把实际开发中应用最多、最实用的Jquery资源抽取出来再加以精心编排,让广大网友能以最短的时间、花最少的精力去真正掌握jQuery开发的知识。" />
<style>
* { margin:0; padding:0; }

body { background:#efefef; overflow:hidden; }

h1 { 
    text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40px; color:#fff;

}

#shadow {
    height:300px; width:600px; position:absolute; top:400px; left:0; z-index:0;
    background:-webkit-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
    background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
    background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
    background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
    background:radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );
    -webkit-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    -moz-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    -ms-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    -o-transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    transform:perspective(100px) rotateX(60deg) rotateY(0deg);
    opacity:0;
}

#container {
    /*background:black;*/
    height:240px; width:240px; position:absolute; top:180px; z-index:1;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -moz-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -ms-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    -o-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
    transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;
}
#container p {
    position:absolute;
    top:40%;
    left:35%;
    padding:5px;
    word-spacing:0.2em;
    line-height:20px;
    background:black;
    color:#fff;
    text-align:center;
}
#container div { 
     height:240px; width:240px; position:absolute; left:0; top:0; color:#fff; line-height:240px; text-align:center; font-weight:bold; font-size:80px; cursor:pointer; 
     background:rgba( 239,239,239, 1 );
     -webkit-transition:500ms all ease;
     -moz-transition:500ms all ease;
     -ms-transition:500ms all ease;
     -o-transition:500ms all ease;
     transition:500ms all ease;
}
#container div div {
    border:1px solid #fff; /* rgba( 255,255,255, 1 ) */
    box-shadow:1px 0 3px #fff,1px 0px 10px #efefef;
    border-radius:8px;
    background:-webkit-radial-gradient(center, #d81002, #b20c00 );
    background:-moz-radial-gradient(center, #d81002, #b20c00 );
    background:-ms-radial-gradient(center, #d81002, #b20c00 );
    background:-o-radial-gradient(center, #d81002, #b20c00 );
    background:radial-gradient(center, #d81002, #b20c00 );
}
#container div div:hover {
    background:-webkit-radial-gradient(center, #f00, #b20c00 );
    background:-moz-radial-gradient(center, #f00, #b20c00 );
    background:-ms-radial-gradient(center, #f00, #b20c00 );
    background:-o-radial-gradient(center, #f00, #b20c00 );
    background:radial-gradient(center, #f00, #b20c00 );
}
#container div ul {
    list-style:none;
    margin:30px;
}
#container div li {
    width: 60px;
    height:60px;
    float:left;
    overflow:hidden;
    -webkit-transition:500ms all ease;
    -moz-transition:500ms all ease;
    -ms-transition:500ms all ease;
    -o-transition:500ms all ease;
    transition:500ms all ease;
}

#container div li span  { 
    width:50px; height:50px; margin:5px auto;
    display:block;
    background:-webkit-linear-gradient(top, #eee, #fff );
    background:-moz-linear-gradient(top, #eee, #fff );
    background:-ms-linear-gradient(top, #eee, #fff );
    background:-o-linear-gradient(top, #eee, #fff );
    background:linear-gradient(top, #eee, #fff );
    border-radius:25px;
    box-shadow:-1px -1px 2px #000;
}
</style>

</head>

<body>
<div id="container" style="left: 400px; -webkit-transform: perspective(2000px) rotateX(-23.07009431989053deg) rotateY(50.400000000000006deg); transform: perspective(2000px) rotateX(-23.07009431989053deg) rotateY(50.400000000000006deg);">
    <div id="box-1" style="-webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div id="box-2" style="-webkit-transform: rotateX(0deg) rotateY(90deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(90deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <div id="box-3" style="-webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(180deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <div id="box-4" style="-webkit-transform: rotateX(0deg) rotateY(270deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(0deg) rotateY(270deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <div id="box-5" style="-webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
    <div id="box-6" style="-webkit-transform: rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); transform: rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX(0.6) scaleY(0.6); opacity: 1;">
        <div>
            <ul>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
                <li></li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </div>
</div>

<strong id="shadow" style="left: 220px; opacity: 1; top: 400px;"></strong>

<!-- <script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
 -->
 <script src="js/zepto.min.js" language="javascript" type="text/javascript"></script>

 <script>
    var oContainer = $("#container"),
        pers = 2000;
    var transform = function( elem, value, key )
            {
                key = key || "transform";
                var arr=[ "-webkit-", "-moz-", "-ms-", "-o-", "" ];
                // for( var pre in arr ){
                //     elem.style[ arr[pre] + key ] = value;
                // }; 
                for (var i = 0; i < arr.length; i++) {
                    //elem.style.arr[i]+key = value;
                    elem.css(arr[i]+key,value);
                };
                
                return elem;
            },
            startMove = function startMove( obj )
            {
                obj.timer = obj.timer || null;
                
                clearInterval( obj.timer );
                
                obj.timer = setInterval (function ()
                {
                    x -= speedY;
                    y += speedX;
                    
                    speedY *= 0.95;
                    speedX *= 0.95;
                    
                    if( Math.abs( speedX ) < 0.1 && Math.abs( speedY ) < 0.1 )
                    {
                        stopMove( obj.timer );
                    };
                    
                    transform( obj, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );
                    
                }, 30);
            },
            
            stopMove = function( t )
            {
                clearInterval( t );
            };
    var oDoc = $(document),
            docWidth = oDoc.width();
    oDoc.mousedown( function( e ){          
    var moveX = e.clientX,
        moveY = e.clientY;              
    var startX = 0;
    var startY = 0;         
    var lastX = moveX;
    var lastY = moveY;          
    speedX = speedY = 0;    
    oDoc.mousemove( function( e ){  
        y = startY + ( e.clientX - moveX )/5;
        x = startX - ( e.clientY - moveY )/5;                   
        transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );              
        speedX = Math.ceil( ( e.clientX - lastX )/2 );              
        speedY = Math.ceil( ( e.clientY - lastY )/2 );              
        lastX = e.clientX;
        lastY = e.clientY;              
    });         
    oDoc.mouseup( function(){
        this.onmousemove = null;
        this.onmouseup = null;
        startMove( oContainer );
    });         
    stopMove( oContainer.timer );           
    return false;
});

</script>
</body>
</html>

kongjiea
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3制作3D骰子旋转动画特效特效代码
03-20
【CSS3制作3D骰子旋转动画特效特效代码】是一个利用CSS3的强大功能来实现的交互式网页元素。在这个项目中，我们主要关注的是CSS3的3D转换和动画效果，这两个特性使得开发者能够创建出丰富的视觉体验，而无需依赖...
html简单骰子展示
是建威啊的博客
06-23 2331
html绘制骰子
html5写骰子 css
最新发布
qq_59846534的博客
08-03 861
【代码】html5写骰子 css。
css，html简单骰子/色子代码
weixin_52278161的博客
07-05 5986
简单代码，运用较少css，完整代码放在最后了嗷。最终效果： 思想：相当于给每个骰子里的点分块，再分别处理。（点也是一个块）如图，把每个骰子分成三个部分，分别处理。 分块后分别处理，比如：这样的块中的点可用水平方向居中样式：justify-content:center———————————————————————————————— 这样的块加两个点，用两端环绕justify-content:space-around———————————————————————————————— 这两块分别用居
制作一个简易骰子
dzwsg的博客
05-12 1021
先利用css和html写出一个简易的骰子 先确定骰子的六个面 <div id="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div
css-筛子
常蓬的博客
03-27 271
骰子 一饼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一饼</title> <style> .one{ width: 150px; height: 200px; background: gr...
CSS3制作3D骰子旋转动画特效
06-24
在本教程中，我们将深入探讨如何使用CSS3创建一个3D骰子旋转动画特效，这是一种交互式的视觉效果，用户可以通过鼠标移动来控制正方体的旋转。CSS3是层叠样式表的最新版本，它引入了许多强大的新特性，包括3D变换和...
CSS3制作3D骰子旋转动画特效.zip
11-17
在本项目中，"CSS3制作3D骰子旋转动画特效.zip"，我们将探讨如何利用前端技术，特别是CSS3，来实现一个具有3D旋转动画效果的骰子。这个项目涉及了HTML5、CSS3、JavaScript和jQuery的综合运用，为网页添加动态交互...
css3实现3D色子翻转特效
09-25
主要介绍了css3实现3D色子翻转特效的制作过程及示例代码，非常的不错，效果也非常棒，这里推荐给大家。
js+css3实现3D骰子特效特效代码
03-20
【标题】"js+css3实现3D骰子特效特效代码"主要涵盖了JavaScript和CSS3在Web前端开发中的应用，特别是涉及到3D图形渲染和动态效果的创建。在这个项目中，开发者利用这两种技术来模拟一个3D骰子的翻转和滚动动画，以...
掷骰：使用CSS3动画的简单3D骰子掷骰
01-28
掷骰子 CSS3 Animation提供的简单3D骰子滚动动画制作器。 香草JS 将dist / roll-a-die.js复制到您的库文件夹中将其加载到HTML脚本中 [removed][removed] 您可以使用链接https://unpkg.com/roll-a-die@1.3.0/dist/roll-a-die.js 。 切记将包裹号更新为最新的。 调用带有其选项的方法。 rollADie({ element, numberOfDice: 2, callback}); 使用npm（和CommonJS构建器） 使用npm安装。 npm install --save roll-a-die 用纱安装。 yarn add roll-a-die 导入图书馆 ES5 const rollADie = require('roll-a-die'); ES6 import rollADie from 'roll-a-die'; 调用方法 rollADie({ element,
CSS3骰子3D立方体旋转动画
09-19
CSS3骰子3D立方体旋转动画，纯CSS3代码，3D立方体自动循环翻转动画。可以自己设置六个面的文字，大小，颜色。
css3摇骰子,css3实现掷骰子（无图）
weixin_42144707的博客
08-03 895
抽奖或游戏之类的动画很多时候用到掷骰子，一般采用gif图片格式实现动画效果。gif图片占内存较大，用户体验不好，下面用css3实现的掷骰子效果，骰子点数、面和转动效果都是有css，css3完成的。截图gif图如下：骰子.gif；这个特么的有点快啊动态图；打开可见效果：链接网页http://htmlpreview.github.io/?https://github.com/buwu/simple/b...
css中的弹性盒筛子的制作
等待のL先森的博客
12-03 605
css中的弹性盒筛子的制作 运用简单的flex的基本属性，做成六个筛子的面；后面还有动态的筛子； 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css中的弹性盒筛子的
html css做骰子,纯 CSS 制作摇骰子（随机结果）
weixin_30616309的博客
06-18 3503
大家好，我是 Steven。这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。素材准备首先，我们要准备一张图片：里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。HTML 的部分打开 CodePen 编辑器，在 HTML 的部分新增一个 ，class 是 dice。C...
flex布局案例
weixin_43837268的博客
10-18 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l.
html色子的页面布局,弹性布局（骰子）.html
weixin_42615290的博客
06-29 627
* {margin: 0;padding: 0;}ul {margin: 10px;list-style: none;width: 50px;height: 50px;display: -webkit-box;display: -webkit-flex;display: flex;border: 1px solid gray;border-radius: 8px;padding: 4px;-web...
css3动画简单demo——掷骰子
weixin_38436883的博客
08-26 1935
简单模仿掷骰子的情景，正面的数字是随机的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>掷骰子</title> <style> * { margin: 0; ...
html css做骰子,用CSS-flex写个骰子
weixin_30735701的博客
06-18 619
上班中午休息时间试着用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...
CSS制作骰子角度
06-02
要制作一个骰子，你可以使用CSS的transform属性来控制旋转和倾斜。下面是一个简单的示例代码，可以制作一个立方体骰子： ```css .dice { width: 100px; height: 100px; position: relative; transform-style: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值