返回首页 | 新开户送体验金的娱乐城

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

[编码]使用css3实现骰子动画

时间:2017-07-31 编辑:admin

思路:骰子有6个面,那么创建6个div为6个面,然后用css3的旋转属性旋转每个面到相应位置,每个面里面的点使用绝对定位确实位置。骰子旋转写一个动画改变rotate值。
效果预览:。
结构html:

 div 
 div 
 div /div 
 /div 
 div /div 
 div 
 div /div 
 div /div 
 /div 
 div /div 
 div 
 div /div 
 div /div 
 div /div 
 /div 
 div /div 
 div 
 div /div 
 div /div 
 div /div 
 div /div 
 /div 
 div /div 
 div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 /div 
 div /div 
 div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 div /div 
 /div 
 div /div 
 dov /dov 
 dov /dov 
 dov /dov 
 /div 

css样式:

 body {
 background-color: darkkhaki;
 perspective: 500px;
 .diceWrap {
 position: relative;
 transform-style: preserve-3d;
 animation: roll infinite 10s; 
 width: 100px;
 height: 100px;
 left: 50%;
 top: 200px;
 .diceWrap .dice {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 position: absolute;
 background-color: black;
 box-shadow: #D2D2D2 0px 0px 10px 0px inset;
 .dice.dice1 {
 transform: translateZ(50px);
 .dice.dice1.inner {
 transform: translateZ(49px);
 .dice.dice2 {
 transform: rotateX(-180deg) translateZ(50px);
 .dice.dice2.inner {
 transform: rotateX(-180deg) translateZ(49px);
 .dice.dice3 {
 transform: rotateX(90deg) translateZ(50px);
 .dice.dice3.inner {
 transform: rotateX(90deg) translateZ(49px);
 .dice.dice4 {
 transform: rotateX(-90deg) translateZ(50px);
 .dice.dice4.inner {
 transform: rotateX(-90deg) translateZ(49px);
 .dice.dice5 {
 transform: rotateY(90deg) translateZ(50px);
 .dice.dice5.inner {
 transform: rotateY(90deg) translateZ(49px);
 .dice.dice6 {
 transform: rotateY(-90deg) translateZ(50px);
 .dice.dice6.inner {
 transform: rotateY(-90deg) translateZ(49px);
 .diceWrap .dice .dot {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 .diceWrap .dice1 .dot {
 left: 50%;
 top: 50%;
 margin-left: -10px;
 margin-top: -10px;
 background-color: red;
 .diceWrap .dice2 .dot {
 background-color: orange;
 .diceWrap .dice2 .dot:nth-child(1) {
 left: 5%;
 top: 5%;
 .diceWrap .dice2 .dot:nth-child(2) {
 right: 5%;
 bottom: 5%;
 .diceWrap .dice3 .dot {
 background-color: yellow;
 .diceWrap .dice3 .dot:nth-child(1) {
 left: 5%;
 top: 5%;
 .diceWrap .dice3 .dot:nth-child(2) {
 left: 50%;
 top: 50%;
 margin-left: -10px;
 margin-top: -10px;
 .diceWrap .dice3 .dot:nth-child(3) {
 right: 5%;
 bottom: 5%;
 .diceWrap .dice4 .dot {
 background-color: green;
 .diceWrap .dice4 .dot:nth-child(1) {
 left: 5%;
 top: 5%;
 .diceWrap .dice4 .dot:nth-child(2) {
 left: 5%;
 bottom: 5%;
 .diceWrap .dice4 .dot:nth-child(3) {
 right: 5%;
 top: 5%;
 .diceWrap .dice4 .dot:nth-child(4) {
 right: 5%;
 bottom: 5%;
 .diceWrap .dice5 .dot {
 background-color: greenyellow;
 .diceWrap .dice5 .dot:nth-child(1) {
 left: 5%;
 top: 5%;
 .diceWrap .dice5 .dot:nth-child(2) {
 left: 5%;
 bottom: 5%;
 .diceWrap .dice5 .dot:nth-child(3) {
 left: 50%;
 top: 50%;
 margin-left: -10px;
 margin-top: -10px;
 .diceWrap .dice5 .dot:nth-child(4) {
 right: 5%;
 top: 5%;
 .diceWrap .dice5 .dot:nth-child(5) {
 right: 5%;
 bottom: 5%;
 .diceWrap .dice6 .dot {
 background-color: purple;
 .diceWrap .dice6 .dot:nth-child(1) {
 left: 5%;
 top: 5%;
 .diceWrap .dice6 .dot:nth-child(2) {
 left: 5%;
 bottom: 5%;
 .diceWrap .dice6 .dot:nth-child(3) {
 left: 5%;
 top: 50%;
 margin-top: -10px;
 .diceWrap .dice6 .dot:nth-child(4) {
 right: 5%;
 top: 5%;
 .diceWrap .dice6 .dot:nth-child(5) {
 right: 5%;
 top: 50%;
 margin-top: -10px;
 .diceWrap .dice6 .dot:nth-child(6) {
 right: 5%;
 bottom: 5%;
 .diceWrap .cover, .diceWrap .inner {
 background: rgb(65,65,65);
 box-shadow: none;
 .diceWrap .cover {
 border-radius: 0;
 transform: translateZ(0px);
 .diceWrap .cover.x {
 transform: rotateY(90deg);
 .diceWrap .cover.z {
 transform: rotateX(90deg);
 @keyframes roll {
 0% {
 -webkit-transform: rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(0.5, 0.5, 0.5);
 transform: rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(0.5, 0.5, 0.5);
 50% {
 -webkit-transform: rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1);
 transform: rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1);
 100% {
 -webkit-transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg) scale3d(0.5, 0.5, 0.5);
 transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg) scale3d(0.5, 0.5, 0.5);
 

浏览:

网站建设

流程

    网站建设流程