CSS 弹性布局 色子的制作.doc

《CSS 弹性布局 色子的制作.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、效果截图:CSS样式及html代码如下:/*清除系统样式及设置盒子模型*/*{margin:0;padding:0;box-sizing:border-box;}/*背景色*/html,body{background:black;}/*清除列表样式*

5、/li{list-style:none;}/*容器设置及动画*/#wrap{width:100px;height:100px;position:relative;margin:150pxauto;}#cube{width:100px;height:100px;background:rgb(221,221,221);transform-style:preserve-3d;transform:rotateX(30deg)rotateY(80deg);animation:dice20sinfinite;animation-timing-function

6、:linear;}@-webkit-keyframesdice{from{transform:rotateX(0deg)rotateY(0deg);}to{transform:rotateX(360deg)rotateY(360deg);}}/*各个面的宽高及样式*/#cubeulli{position:absolute;width:100px;height:100px;background:lightgray;border-radius:10px;display:flex;}/*点的大小及样式*/span{display:block;width

7、:20px;height:20px;background:black;border-radius:10px;}/*设置点数不同颜色*/#cubeulli:nth-child(1)span,#cubeulli:nth-child(2)span,#cubeulli:nth-child(3)span{background:red;}#cubeulli:nth-child(4)span,#cubeulli:nth-child(5)span,#cubeulli:nth-child(6)span{background:blue;}/*各面的位置设置*/#cu

8、beulli:nth-child(1){transform:rotateY(0deg)translateZ(50px);align-it