css3摇骰子,CSS3 动画骰子

CSS

语言：

CSSSCSS

确定

body {

background-color: gray;

}

.domino {

position: absolute;

top: 50%;

left: 50%;

overflow: hidden;

transform: translate(-50%, -50%) rotate(45deg);

}

.tile {

position: relative;

width: 100px;

height: 100px;

border: 5px solid #fff;

}

.tile.ann-arbor {

background-color: #fa001f;

border-radius: 10px 10px 0 0;

}

.tile.ypsi {

background-color: #0078ae;

border-top-width: 0;

border-radius: 0 0 10px 10px;

}

.tile:before,

.tile:after {

content: " ";

position: absolute;

width: 35%;

height: 35%;

border-radius: 50%;

background: #fff;

opacity: 0;

-webkit-animation: pulse 1.5s ease-out infinite;

}

.ann-arbor:before {

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.ann-arbor:after {

display: none;

}

.ypsi:before {

top: 69%;

left: 31%;

transform: translate(-50%, -50%);

-webkit-animation-delay: 0.5s;

}

.ypsi:after {

top: 31%;

left: 69%;

transform: translate(-50%, -50%);

-webkit-animation-delay: 1s;

}

@-webkit-keyframes pulse {

0% {

transform: translate(-50%, -50%) scale(0.1);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: translate(-50%, -50%) scale(1.25);

opacity: 0;

}

}