html5 css3d,HTML5/CSS3雀跃的3D字符串

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

background: #76b852;

background: -webkit-linear-gradient(to left, #76b852, #8DC26F);

background: -webkit-linear-gradient(right, #76b852, #8DC26F);

background: linear-gradient(to left, #76b852, #8DC26F);

overflow: hidden;

-webkit-font-smoothing: antialiased;

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;

}

h1 {

height: 100px;

}

h1 span {

position: relative;

top: 20px;

display: inline-block;

-webkit-animation: bounce .3s ease infinite alternate;

animation: bounce .3s ease infinite alternate;

font-family: 'Titan One', cursive;

font-size: 80px;

color: #FFF;

text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4);

}

h1 span:nth-child(2) {

-webkit-animation-delay: .1s;

animation-delay: .1s;

}

h1 span:nth-child(3) {

-webkit-animation-delay: .2s;

animation-delay: .2s;

}

h1 span:nth-child(4) {

-webkit-animation-delay: .3s;

animation-delay: .3s;

}

h1 span:nth-child(5) {

-webkit-animation-delay: .4s;

animation-delay: .4s;

}

h1 span:nth-child(6) {

-webkit-animation-delay: .5s;

animation-delay: .5s;

}

h1 span:nth-child(7) {

-webkit-animation-delay: .6s;

animation-delay: .6s;

}

h1 span:nth-child(8) {

-webkit-animation-delay: .7s;

animation-delay: .7s;

}

@-webkit-keyframes bounce {

100% {

top: -20px;

text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2);

}

}

@keyframes bounce {

100% {

top: -20px;

text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2);

}

}