CSS

语言：

CSSSCSS

确定

*,

*:after,

*:before {

box-sizing: border-box;

}

html {

height: 100vh;

background: orange;

}

@-webkit-keyframes rotator {

0% {

transform: rotate3d(0, 1, 0, 0deg);

}

100% {

transform: rotate3d(0, 1, 0, 360deg);

}

}

section {

width: 400px;

height: 300px;

position: absolute;

top: calc(50% - 150px);

left: calc(50% - 200px);

perspective: 300px;

}

section .holder {

transform-style: preserve-3d;

-webkit-animation: rotator 10s linear infinite;

}

section .holder > div {

color: white;

font-family: 'Changa One', cursive;

font-size: 350px;

line-height: 300px;

position: absolute;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.01), -0.33333px -0.33333px 0 rgba(0, 0, 0, 0.05), 2px 2px 0 rgba(0, 0, 0, 0.01), -0.66667px -0.66667px 0 rgba(0, 0, 0, 0.05), 3px 3px 0 rgba(0, 0, 0, 0.01), -1px -1px 0 rgba(0, 0, 0, 0.05), 4px 4px 0 rgba(0, 0, 0, 0.01), -1.33333px -1.33333px 0 rgba(0, 0, 0, 0.05), 5px 5px 0 rgba(0, 0, 0, 0.01), -1.66667px -1.66667px 0 rgba(0, 0, 0, 0.05), 6px 6px 0 rgba(0, 0, 0, 0.01), -2px -2px 0 rgba(0, 0, 0, 0.05), 7px 7px 0 rgba(0, 0, 0, 0.01), -2.33333px -2.33333px 0 rgba(0, 0, 0, 0.05), 8px 8px 0 rgba(0, 0, 0, 0.01), -2.66667px -2.66667px 0 rgba(0, 0, 0, 0.05), 9px 9px 0 rgba(0, 0, 0, 0.01), -3px -3px 0 rgba(0, 0, 0, 0.05), 10px 10px 0 rgba(0, 0, 0, 0.01), -3.33333px -3.33333px 0 rgba(0, 0, 0, 0.05);

}

section .holder > div:after,

section .holder > div:before {

position: absolute;

top: 0;

left: 0;

transform: translate3d(5px, 5px, -5px);

text-shadow: 0 0 0 rgba(0, 0, 0, 0.25);

color: transparent;

transform-style: preserve-3d;

color: rgba(255, 0, 0, 0.25);

}

section .holder > div:before {

transform: translate3d(-5px, -5px, -7px);

color: rgba(0, 255, 0, 0.25);

}

section .holder .d {

top: 0;

left: 0;

}

section .holder .d:after,

section .holder .d:before {

content: "D";

}

section .holder .e {

top: 0;

left: 53%;

}

section .holder .e:after,

section .holder .e:before {

content: "E";

}