AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js+css实现骰子的随机转动

2017-11-15 1171
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

网上找的例子，然后增添了新的东西，在这里展示一下......

效果图预览：

 

复制代码 
<!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>js+css3实现3D骰子特效 - 站长素材</title>
<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>
<script src="Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
Aui.ready( function()
{
    if( /ie/g.test( Aui.browser() ) )
    {
        Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！")
                   .setStyle(
                   {
                       "color" : "#000",
                       "text-align" : "center",
                    "font-size" : "50px",
                    "font-weight" : "bolder",
                    "line-height" : "500px"
                   });
    }
    else
    {
        var oDoc = Aui(document),
            docWidth = oDoc.width();
            
        Aui("body").html("<div id=\"hujunzheng\"></h1><div id=\"container\" style=\"left:"+ ( ( docWidth - 240 )*0.5 ) +"px;\"></div><strong id=\"shadow\" style=\"left:"+ ( ( docWidth - 600 )*0.5 ) +"px;\"></strong></div>");
        
        
        var oContainer = Aui.byID("#container")[0],
            AuiCon = Aui( oContainer ),
            AuiShadow = Aui("#shadow"),
            
            transform = function( elem, value, key )
            {
                key = key || "transform";
                
                [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )
                {
                    elem.style[ pre + key ] = value;
                });    
                
                return elem;
            },
            piece = function( value, key )
            {
                var str = "";
                
                key = key || "transform";
                
                [ "-webkit-", "-moz-", "-ms-", "-o-",  "" ].forEach( function( pre )
                {
                    str += ( pre + key + ":" + value );
                    return false;
                });    
                
                return str;
            },
            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 );
            },
            
            addEvent = function ( obj, sEvent, fn )
            {
                if( obj.attachEvent )
                {
                    obj.attachEvent( "on" + sEvent, fn );
                }
                else
                {
                    obj.addEventListener( sEvent, fn, false );
                };
            },
            
            onMouseWheel = function( e )
            {
                if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 )
                {
                    if( pers < 2000 )
                    {
                        pers += 50;
                        _top -= 0.5;
                    };
                }
                else
                {
                    if( pers > 50 )
                    {
                        pers -= 50;
                        _top += 0.5;
                    };
                };
                
                AuiShadow.setStyle( "top", _top );
                transform( oContainer, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );
                
                if( e.preventDefault )
                {
                    e.preventDefault();
                };
                
                return false;
            },
            
            setNum = function( obj, n )
            {
                var arr = [
                    [ 4 ],
                    [ 0, 8 ],
                    [ 0, 4, 8 ],
                    [ 0, 2, 6, 8 ],
                    [ 0, 2, 4, 6, 8 ],
                    [ 0, 2, 3, 5, 6, 8]
                ];
                Aui.each( arr[n], function( i , v )
                {
                    obj.find("li")
                       .eq( v )
                       .html("<span></span>");
                });
            }; 
            
            x = -10,
            y = 45,
            speedX = 0,
            speedY = 0,
            i = 1,
            d_x = 0,
            d_y = 0,
            d_z = 519,
            pers = 2000,
            _top = 400;
            
        while( i < 7 )
        {
            if( i < 5 )
            {
                d_x = 0;
                d_y = i * 90;
            }
            else if( i === 5 )
            {
                d_x = 90;
                d_y = 0;
            }
            else 
            {
                d_x = -90;
                d_y = 0;
            };
            AuiCon.append( "<div id=\"box-"+ i +"\" style=\""+ piece("rotateX(" + d_x + "deg) rotateY(" + d_y + "deg) translateZ(" + d_z + "px) scaleX( 0.4 ) scaleY( 0.4 );") +"opacity:0;\"><div><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>" );
            
            i += 1;
        };
        
        var oDiv = AuiCon.children("div");
        
        Aui.each( oDiv, function( i )
        {
            ( function( d , obj )
            {
                setTimeout( function()
                {
                    obj.style.opacity = 1;
                    
                    setTimeout( function()
                    {
                        setNum( Aui( obj ), d );
                        
                        if( d < 4 )
                        {
                            transform( obj, "rotateX(0deg) rotateY(" + ( i * 90 )+"deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
                        }
                        else if( d === 5 )
                        {
                            transform( obj, "rotateX(90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
                            
                            setTimeout( function()
                            {
                                AuiShadow.fx({ opacity : 1 }, 400 );
                                
                                Aui.each( oDiv, function( x )
                                {
                                    if(  x < 4 )
                                    {
                                        transform( this, "rotateX(0deg) rotateY(" + ( x * 90 )+"deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
                                    }
                                    else if( x === 5 )
                                    {
                                        transform( this, "rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
                                    }
                                    else if( x === 4)
                                    {
                                        transform( this, "rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );
                                    };
                                });
                            }, 400 );
                        }
                        else if( d === 4)
                        {
                            transform( obj, "rotateX(-90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );
                        };
                    } , 100 );
                
                } , d * 200 );
    
            })( i, this );
            
        });
        
        oDoc.mousedown( function( e )
        {
            
            var moveX = e.clientX,
                moveY = e.clientY;
                
            var startX = x;
            var startY = y;
            
            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;
        });
        
        var wheel = function( e )
        {
            onMouseWheel.call( null, e || window.event );
        };
        
        addEvent( oDoc[0], "mousewheel", wheel );
        addEvent( oDoc[0], "DOMMouseScroll", wheel );
    };
    
    /*
        加入之后使得在骰子生成之后开始转动

2s之后执行 每隔100ms执行函数（模拟鼠标的移动位置）
    */
    
    window.setTimeout(function(){
        var cntcc = 0;
        var hjzgg;
        var clientX = Math.ceil(Math.random()*500);
        var clientY = Math.ceil(Math.random()*500);
        var moveX = clientX,
            moveY = clientY;
                
        var startX = x;
        var startY = y;
        
        var lastX = moveX;
        var lastY = moveY;
        
        speedX = speedY = 0;
        hjzgg=window.setInterval(function(){
            ++cntcc;
            y = startY + ( clientX - moveX )/5;
            x = startX - ( clientY - moveY )/5;
            if(cntcc==50){ 
                 window.clearInterval(hjzgg);
            }
            transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );
            
            speedX = Math.ceil( ( clientX - lastX )/2 );
            
            speedY = Math.ceil( ( clientY - lastY )/2 );
            lastX = clientX;
            lastY = clientY;
            clientX = Math.ceil(Math.random()*500);
            clientY = Math.ceil(Math.random()*500);
        }, 100); 
    },2000); 
    
    /*********************************************************/        
});
</script>
</head>

<body>

</body>
</html>









本文转自 小眼儿 博客园博客，原文链接：http://www.cnblogs.com/hujunzheng/p/4780940.html，如需转载请自行联系原作者
文章标签：
前端开发
Web App开发
容器
JavaScript
关键词：
CSS js
JavaScript CSS
JavaScript实现
CSS实现
CSS随机
余二五
目录
相关文章
光明顶阳顶天
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
39 1
大树营养快线
|
25天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
60 15
八百标兵奔北坡
|
15天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能；Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
八百标兵奔北坡
20 1
温轻舟
|
15天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
67 1
蓝易云
|
20天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
34 3
大树营养快线
|
25天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值？
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
大树营养快线
51 5
疯狂的猿
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
94 6
bruce刘晓伟-18435
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce刘晓伟-18435
35 0
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
wishCoding
97 2
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
wishCoding
133 4

热门文章

最新文章

  • 1
    【转】Javascript关键字和保留字
  • 2
    OC与JS互相调用
  • 3
    JavaScript 操作 Cookie
  • 4
    Node.js 中流操作实践
  • 5
    javascript工厂模式和构造方法
  • 6
    如何让你的JavaScript代码更加语义化
  • 7
    js数组遍历some,foreach,map,filter,every对比
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    56
  • 2
    HTML5/CSS3粒子效果进度条代码
    63
  • 3
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    129
  • 4
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    50
  • 5
    CSS外边距重叠：原理、结果
    52
  • 6
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    60
  • 7
    CSS常见用法 以及JS基础语法
    66
  • 8
    css设置内嵌样式阴影
    66
  • 9
    css样式实现一个滑动按钮
    58
  • 10
    wxss和css的区别
    331

    • 相关课程

    更多
  • CSS 快速掌握
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • Python第五讲——关于爬虫如何做js逆向的思路
  • JavaScript面向对象的程序设计
  • JavaScript函数

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月