html文本弹性,HTML5 很有趣的文本蹦床/弹性弯曲动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300);

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

background: -webkit-radial-gradient(#33334d, #1e1e2e);

background: radial-gradient(#33334d, #1e1e2e);

overflow: hidden;

cursor: -webkit-grab;

font: 900 14vw Open Sans !important;

line-height: 180vh;

letter-spacing: -2.1vw;

text-transform: uppercase;

text-shadow: 0 2px 15px #33334d;

}

span {

display: inline-block;

position: relative;

}

span:nth-child(1) {

z-index: 5;

}

span:nth-child(2) {

z-index: 4;

}

span:nth-child(3) {

z-index: 3;

}

span:nth-child(4) {

z-index: 2;

}

span:nth-child(5) {

z-index: 1;

}

span:nth-child(6) {

z-index: 0;

}

span:nth-child(1),

span:nth-last-child(1) {

-webkit-transform: rotateX(8deg);

transform: rotateX(8deg);

color: #ff8400;

}

span:nth-child(2),

span:nth-last-child(2) {

-webkit-transform: rotateX(16deg);

transform: rotateX(16deg);

color: #f6ff00;

}

span:nth-child(3),

span:nth-last-child(3) {

-webkit-transform: rotateX(24deg);

transform: rotateX(24deg);

color: #73ff00;

}

span:nth-child(4),

span:nth-last-child(4) {

-webkit-transform: rotateX(32deg);

transform: rotateX(32deg);

color: #0f1;

}

span:nth-child(5),

span:nth-last-child(5) {

-webkit-transform: rotateX(40deg);

transform: rotateX(40deg);

color: #00ff95;

}

span:nth-child(6),

span:nth-last-child(6) {

-webkit-transform: rotateX(48deg);

transform: rotateX(48deg);

color: #00e5ff;

}