HTML5技术

玩骰子麽 - webNick

字号+ 作者:H5之家 来源:H5之家 2016-11-30 11:00 我要评论( )

本demo应用了css3 transition animate,若有兼容性问题,请升级你的浏览器! 这次先让大家玩玩! 结构层 ul骰子容器包裹6个面li;每个面里面包裹一个点数容器div.c-num用于position;最后就是调点数p的样式了。 ullidivp/p/div/lilidivp/pp/pp/p/div/lilidiv

本demo应用了css3 transition animate,若有兼容性问题,请升级你的浏览器!

这次先让大家玩玩!

结构层 ul骰子容器包裹6个面li;每个面里面包裹一个点数容器div.c-num用于position;最后就是调点数p的样式了。

<ul> <li> <div> <p></p> </div> </li> <li> <div> <p></p> <p></p> <p></p> </div> </li> <li> <div> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </li> <li> <div> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </li> <li> <div> <p></p> <p></p> </div> </li> <li> <div> <p></p> <p></p> <p></p> <p></p> </div> </li> </ul>

表现层

ul,li,div,p{margin:0;padding:0;} .container{ position:relative; list-style:none; }

先将容器ul相对定位,在将li绝对定位,则每个面li都在左上角便于rotate

transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);

过渡xy方向以及旋转 参考W3C

transform-style:preserve-3d;

嵌套元素以3d展示

transform-origin:50px 50px;

旋转中心位置

animation:nickAnimate 5s ease infinite;

动画调用

animation-fill-mode:forwards;

规定动画完成后停留在最后一帧

animation-play-state:paused;

默认为paused,不然页面刷新会自动执行动画的

@keyframes nickAnimate{/*动画定义*/ 0%{ transform:translate(100px,100px) rotateX(0deg) rotateY(0deg); } 100%{ transform:translate(130px,120px) rotateX(1360deg) rotateY(1360deg); } }

动画的属性值可以随便调。

.container>li{ position:absolute; width:100px;height:100px; border-radius:15px; background:#DDDBE6; overflow:hidden; border:1px solid #ddd; }

骰子的每个面的公共样式 将每个面rotate成一个立方体

.lf{ transform:rotateY(90deg) translateZ(-50px); } .rt{ transform:translateX(100px) rotateY(90deg) translateZ(-50px); } .top{ transform:translateY(-50px) rotateX(90deg); } .btm{ transform:translateY(50px) rotateX(90deg); } .in{ transform:translateZ(50px); } .out{ transform:translateZ(-50px); }

现在可以看到一个立方体了吧,下面就是一些定位样式渲染成骰子的样子 点数容器的公共样式

.c-num{/*点数容器*/ position:relative; width:100%; height:100%; background:radial-gradient(#fff 35%,#DDDBE6); }

点数公用样式 我把每个点都居中了,然后在translate,其实直接translate或者position也可以,仁者见仁智者见智吧

p[class^='num']{ position:absolute; width:20px; height:20px; background-color:red; border-radius:50%; top:50%;left:50%; margin-top:-5px; margin-left:-5px; }

下面就是点数p的样式微调了

/*点数1的面已经居中*/ .lf .num1{} /*点数2的面translate慢慢调吧*/ .in .num1{ transform:translate(-5px,-20px); } .in .num2{ transform:translate(-5px,20px); } /*点数3的面*/ .rt .num1{ transform:translate(-5px,-30px); } .rt .num2{ transform:translateX(-5px); } .rt .num3{ transform:translate(-5px,30px); } /*点数4的面*/ .out .num1{ transform:translate(-20px,20px); } .out .num2{ transform:translate(-20px,-20px); } .out .num3{ transform:translate(20px,20px); } .out .num4{ transform:translate(20px,-20px); } /*点数5的面*/ .top .num1{ transform:translate(25px,-30px); } .top .num2{ transform:translate(-25px,-30px); } .top .num4{ transform:translate(-25px,25px); } .top .num5{ transform:translate(25px,25px); } /*点数6的面*/ .btm .num1{ transform:translate(-25px,30px); } .btm .num2{ transform:translate(-25px,0px); } .btm .num3{ transform:translate(-25px,-30px); } .btm .num4{ transform:translate(15px,30px); } .btm .num5{ transform:translate(15px,0px); } .btm .num6{ transform:translate(15px,-30px); }

行为层

document.getElementsByClassName('run')[0].onclick=function(){ document.getElementsByClassName('container')[0].style.animationPlayState='running'; }; document.getElementsByClassName('paused')[0].onclick=function(){ document.getElementsByClassName('container')[0].style.animationPlayState='paused'; };

摇啊摇、暂停按钮就是控制animate的运行状态
ok!上完整代码有兴趣的玩玩吧!

css3 骰子 animate nick ul,li,div,p .container{ position list-style transform transform-style transform-origin animation animation-fill-mode animation-play-state @keyframes nickAnimate 0%{ transform 100%{ transform } .container>li{ position width border-radius background overflow border .lf{ transform .rt{ transform .top{ transform .btm{ transform .in{ transform .out{ transform .c-num position width height background p[class^='num'] position width height background-color border-radius top margin-top margin-left .lf .num1 .in .num1{ transform .in .num2{ transform .rt .num1{ transform .rt .num2{ transform .rt .num3{ transform .out .num1{ transform .out .num2{ transform .out .num3{ transform .out .num4{ transform .top .num1{ transform .top .num2{ transform .top .num4{ transform .top .num5{ transform .btm .num1{ transform .btm .num2{ transform .btm .num3{ transform .btm .num4{ transform .btm .num5{ transform .btm .num6{ transform摇啊摇暂停(){ document.getElementsByClassName(; }; document.getElementsByClassName((){ document.getElementsByClassName(; };

View Code

   毕竟还年少,自我感觉至少如此,有些玩心,大家有什么新奇好的想法可以给我留言或在我的博客首页qq交流,愿我们在娱乐的过程中共同进步!
 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • ENGLISH抠脚童鞋的福利--GitHub汉化插件 - webNick

    ENGLISH抠脚童鞋的福利--GitHub汉化插件 - webNick

    2016-11-14 13:00

  • css3 transition animation nick - webNick

    css3 transition animation nick - webNick

    2016-11-07 13:00

  • canvas刮刮乐和画笔 - webNick

    canvas刮刮乐和画笔 - webNick

    2016-11-04 16:00

  • AngularJs之Scope作用域 - webNick

    AngularJs之Scope作用域 - webNick

    2016-11-02 18:00

网友点评