html5 css3d,HTML5/CSS3雀跃的3D字符串-优快云博客

这篇博客详细介绍了如何使用CSS实现全屏背景渐变，并通过CSS3动画为文字添加动态效果。代码示例中，html和body元素的宽度和高度设置为100%，并应用了从左到右的线性渐变背景。同时，h1标签内的文字通过动画实现逐字弹跳的效果，增强了视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

}