CSS
语言:
CSSSCSS
确定
/*
Implode a list into a string, by jamming $d(ivisor) in between
each item.
*/
/*
generate a striped gradient.
@arg $colors a list of colors to display in the gradient
@arg $direction the direction for the resulting linear-gradient
@returns a linear-gradient usable in background[-image].
*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
body {
background: -webkit-linear-gradient(left, #ff69b4 0%, #ff69b4 12.5%, #f00 12.5%, #f00 25%, #ffa500 25%, #ffa500 37.5%, #ff0 37.5%, #ff0 50%, #008000 50%, #008000 62.5%, #40e0d0 62.5%, #40e0d0 75%, #00f 75%, #00f 87.5%, #9400d3 87.5%, #9400d3 100%);
background: linear-gradient(to right, #ff69b4 0%, #ff69b4 12.5%, #f00 12.5%, #f00 25%, #ffa500 25%, #ffa500 37.5%, #ff0 37.5%, #ff0 50%, #008000 50%, #008000 62.5%, #40e0d0 62.5%, #40e0d0 75%, #00f 75%, #00f 87.5%, #9400d3 87.5%, #9400d3 100%);
font-family: Roboto;
font-weight: bold;
}
body span {
position: absolute;
font-size: 12.5vw;
width: 12.5vw;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
body span:nth-of-type(1) {
color: #222;
left: 0vw;
}
body span:nth-of-type(2) {
color: #cecece;
left: 12.5vw;
}
body span:nth-of-type(3) {
color: #222;
left: 25vw;
}
body span:nth-of-type(4) {
color: #222;
left: 37.5vw;
}
body span:nth-of-type(5) {
color: #cecece;
left: 50vw;
}
body span:nth-of-type(6) {
color: #222;
left: 62.5vw;
}
body span:nth-of-type(7) {
color: #cecece;
left: 75vw;
}
body span:nth-of-type(8) {
color: #cecece;
left: 87.5vw;
}