css扇子展开,CSS3 绝妙的扇形折叠展开加载动画

CSS

语言：

CSSSCSS

确定

body {

background: #2c3e50;

font-family: 'Raleway';

color: #e74c3c;

text-align: center;

letter-spacing: 5px; }

.XD {

position: absolute;

top: 50%;

left: 50%;

margin: -1em;

width: 5em;

height: 2em;

background: #e74c3c;

-webkit-animation: ryt 3s infinite;

-moz-animation: ryt 3s infinite;

-o-animation: ryt 3s infinite;

animation: ryt 3s infinite;

border-radius: 1em;

text-align: center;

opacity: 0.6; }

.XD:nth-child(1) {

transform: rotate(0deg) translate(4em); }

.XD:nth-child(2) {

transform: rotate(45deg) translate(4em); }

.XD:nth-child(3) {

transform: rotate(90deg) translate(4em); }

.XD:nth-child(4) {

transform: rotate(135deg) translate(4em); }

.XD:nth-child(5) {

transform: rotate(180deg) translate(4em); }

.XD:nth-child(6) {

transform: rotate(225deg) translate(4em); }

.XD:nth-child(7) {

transform: rotate(270deg) translate(4em); }

.XD:nth-child(8) {

transform: rotate(315deg) translate(4em); }

@-webkit-keyframes ryt {

50% {

transform: rotate(0deg); }

75% {

transform: rotate(360deg); } }

@-o-keyframes ryt {

50% {

transform: rotate(0deg); }

75% {

transform: rotate(360deg); } }

@-moz-keyframes ryt {

50% {

transform: rotate(0deg); }

75% {

transform: rotate(360deg); } }

@keyframes ryt {

50% {

transform: rotate(0deg); }

75% {

transform: rotate(360deg); } }

span {

line-height: 2em;

font-family: 'Raleway';

color: #2c3e50;

letter-spacing: 0px; }