84 lines
1.9 KiB
CSS
84 lines
1.9 KiB
CSS
|
body {
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dancing-letters {
|
||
|
|
font-family: sans-serif;
|
||
|
|
font-size: 300%;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.dancing-letters > span {
|
||
|
|
box-shadow: 0 0 0.25em black;
|
||
|
|
color: white;
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0.25em;
|
||
|
|
padding: 0.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dancing-letters > span:nth-child(1) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(14deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(2) {
|
||
|
|
background-color: blue;
|
||
|
|
transform: rotate(-1deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(3) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(12deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(4) {
|
||
|
|
background-color: orange;
|
||
|
|
transform: rotate(-15deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(5) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(11deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(6) {
|
||
|
|
background-color: violet;
|
||
|
|
transform: rotate(10deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(7) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(-9deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(8) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(-2deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(9) {
|
||
|
|
background-color: green;
|
||
|
|
transform: rotate(6deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(10) {
|
||
|
|
background-color: blue;
|
||
|
|
transform: rotate(11deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(11) {
|
||
|
|
background-color: blue;
|
||
|
|
transform: rotate(-4deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(12) {
|
||
|
|
background-color: orange;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(13) {
|
||
|
|
background-color: orange;
|
||
|
|
transform: rotate(-1deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(14) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(3deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(15) {
|
||
|
|
background-color: indigo;
|
||
|
|
transform: rotate(-10deg);
|
||
|
|
}
|
||
|
|
.dancing-letters > span:nth-child(16) {
|
||
|
|
background-color: green;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}/*# sourceMappingURL=letters.css.map */
|