html5弹跳文字特效,弹跳式文字动画效果

最新推荐文章于 2022-05-20 00:48:27 发布

18339543841

最新推荐文章于 2022-05-20 00:48:27 发布

阅读量559

点赞数

文章标签： html5弹跳文字特效

这篇博客展示了如何利用CSSSCSS实现一种创新的文字展示方式。通过@import引入谷歌字体库中的Kanit字体，结合CSS的flexbox布局、颜色叠加和文本阴影，创建了一个全屏背景、垂直居中且文字逐层显现的交互式效果。读者可以学习到如何通过CSS控制网页元素的样式和动画，提升网页视觉吸引力。

摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Kanit:800i";

html,

body {

height: 100%;

overflow: hidden;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

background-color: #F02D9A;

cursor: pointer;

}

#text {

text-transform: uppercase;

font-family: 'Kanit', sans-serif;

font-style: italic;

font-size: 22vmin;

color: transparent;

}

#text span {

color: white;

display: inline-block;

position: relative;

}

#text span:nth-child(1) {

z-index: 7;

}

#text span:nth-child(2) {

z-index: 6;

}

#text span:nth-child(3) {

z-index: 5;

}

#text span:nth-child(4) {

z-index: 4;

}

#text span:nth-child(5) {

z-index: 3;

}

#text span:nth-child(6) {

z-index: 2;

}

#text span:nth-child(7) {

z-index: 1;

}

span {

text-shadow: -1px -1px 0 black, -2px -2px 0 black, -3px -3px 0 black, -4px -4px 0 black, -5px -5px 0 black, -6px -6px 0 black, -7px -7px 0 black, -8px -8px 0 black, -9px -9px 0 black, -10px -10px 0 black, -11px -11px 0 black, -12px -12px 0 black, -13px -13px 0 black, -14px -14px 0 black, -15px -15px 0 black, -16px -16px 0 black, -17px -17px 0 black, -18px -18px 0 black, -19px -19px 0 black, -20px -20px 0 black, -21px -21px 0 black, -22px -22px 0 black, -23px -23px 0 black, -24px -24px 0 black, -25px -25px 0 black, -26px -26px 0 black, -27px -27px 0 black, -28px -28px 0 black, -29px -29px 0 black, -30px -30px 0 black, -31px -31px 0 black, -32px -32px 0 black, -33px -33px 0 black, -34px -34px 0 black, -35px -35px 0 black, -36px -36px 0 black, -37px -37px 0 black, -38px -38px 0 black, -39px -39px 0 black;

}

input {

position: absolute;

bottom: 0;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}