js+css3实现3D骰子特效.zip资源-CSDN文库

共2个文件

html：1个

js：1个

版权申诉

javascript

html5

jQuery

167 浏览量 2022-11-24 12:31:04 上传评论收藏 11KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

js+css3实现3D骰子特效.zip （2个子文件）

js+css3实现3D骰子特效

jiaoben641

index.html 10KB

Aui-core-1.42-min.js 21KB

<!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("<h1>adam css3学习 - 骰子（滚轮放大可以看骰子里的世界！）</h1><div id=\"container\" style=\"left:"+ ( ( docWidth - 240 )*0.5 ) +"px;\"></div><strong id=\"shadow\" style=\"left:"+ ( ( docWidth - 600 )*0.5 ) +"px;\"></strong>"); 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(

评论收藏

内容反馈

版权申诉