CSS里怎么改大于符号角度,CSS3 变幻的无穷大符号

CSS

语言：

CSSSCSS

确定

body,

html {

background-color: #0f0;

font-family: 'Roboto Mono';

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

height: 100%;

width: 100%;

position: relative;

}

h1,

h2 {

font-weight: 300;

font-style: italic;

color: #0f0;

font-size: 48px;

margin: 0;

padding: 0;

/* text-shadow: 2px 3px 0px rgba(0,0,0, .9),

4px 6px 0px rgba(0,0,0, .8),

6px 9px 0px rgba(0,0,0, .7),

8px 12px 0px rgba(0,0,0, .6),

10px 15px 0px rgba(0,0,0, .5),

12px 18px 0px rgba(0,0,0, .4),

14px 21px 0px rgba(0,0,0, .3),

16px 24px 0px rgba(0,0,0, .2),

18px 27px 0px rgba(0,0,0, .1); */

line-height: 56px;

-webkit-animation-name: shadowAnimation;

animation-name: shadowAnimation;

-webkit-animation-duration: 15s;

animation-duration: 15s;

-webkit-animation-timing-function: ease;

animation-timing-function: ease;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

animation-direction: alternate;

}

.box {

position: absolute;

left: 50%;

bottom: 40%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

@-webkit-keyframes shadowAnimation {

to {

text-shadow: 20px 3px 0px rgba(0, 0, 0, 0.9), 50px 7px 0px rgba(0, 0, 0, 0.8), 70px 10px 0px rgba(0, 0, 0, 0.7), 90px 13px 0px rgba(0, 0, 0, 0.6), 110px 16px 0px rgba(0, 0, 0, 0.5), 130px 19px 0px rgba(0, 0, 0, 0.4), 150px 22px 0px rgba(0, 0, 0, 0.3), 170px 25px 0px rgba(0, 0, 0, 0.2), 190px 2px 0px rgba(0, 0, 0, 0.1);

opacity: 1;

}

}

@keyframes shadowAnimation {

0% {

-webkit-transform: rotate(30deg) scale(20);

transform: rotate(30deg) scale(20);

color: #0f0;

text-shadow: 0px 0px 0px transparent;

}

100% {

-webkit-transform: rotate(30deg) scale(20);

transform: rotate(30deg) scale(20);

color: #0f0;

text-shadow: 20px 20px 0px rgba(0, 0, 0, 0.9), 40px 40px 0px rgba(0, 0, 0, 0.8), 60px 60px 0px rgba(0, 0, 0, 0.7), 80px 80px 0px rgba(0, 0, 0, 0.6), 25px 25px 0px rgba(0, 0, 0, 0.5), 50px 50px 0px rgba(0, 0, 0, 0.4), 100px 100px 0px rgba(0, 0, 0, 0.3), 200px 200px 0px rgba(0, 0, 0, 0.2), 300px 300px 0px rgba(0, 0, 0, 0.1), -20px -20px 0px rgba(0, 0, 0, 0.9), -40px -40px 0px rgba(0, 0, 0, 0.8), -60px -60px 0px rgba(0, 0, 0, 0.7), -80px -80px 0px rgba(0, 0, 0, 0.6), -25px -25px 0px rgba(0, 0, 0, 0.5), -50px -50px 0px rgba(0, 0, 0, 0.4), -100px -100px 0px rgba(0, 0, 0, 0.3), -200px -200px 0px rgba(0, 0, 0, 0.2), -300px -300px 0px rgba(0, 0, 0, 0.1), 20px -20px 0px rgba(0, 0, 0, 0.9), 40px -40px 0px rgba(0, 0, 0, 0.8), 60px -60px 0px rgba(0, 0, 0, 0.7), 80px -80px 0px rgba(0, 0, 0, 0.6), 25px -25px 0px rgba(0, 0, 0, 0.5), 50px -50px 0px rgba(0, 0, 0, 0.4), 100px -100px 0px rgba(0, 0, 0, 0.3), 200px -200px 0px rgba(0, 0, 0, 0.2), 300px -300px 0px rgba(0, 0, 0, 0.1), -20px 20px 0px rgba(0, 0, 0, 0.9), -40px 40px 0px rgba(0, 0, 0, 0.8), -60px 60px 0px rgba(0, 0, 0, 0.7), -80px 80px 0px rgba(0, 0, 0, 0.6), -25px 25px 0px rgba(0, 0, 0, 0.5), -50px 50px 0px rgba(0, 0, 0, 0.4), -100px 100px 0px rgba(0, 0, 0, 0.3), -200px 200px 0px rgba(0, 0, 0, 0.2), -300px 300px 0px rgba(0, 0, 0, 0.1);

}

}