html怎么做模糊条纹,CSS3 生成条纹渐变

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;

}