html文本滚轮显示,CSS3 滚动型文本显示效果

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Baloo+Paaji";

html,

body {

height: 100%;

}

body {

font-family: 'Baloo Paaji', cursive;

background: #1e90ff;

display: flex;

justify-content: center;

align-items: center;

}

.container {

width: 400px;

height: 220px;

position: relative;

}

h1,

h2 {

font-size: 75px;

text-transform: uppercase;

margin:0;

}

h1 span,

h2 span {

width: 100%;

float: left;

color: #ffffff;

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);

clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);

transform: translateY(-50px);

opacity: 0;

animation-name: titleAnimation;

animation-timing-function: ease;

animation-duration: 3s;

}

h1 span {

animation-delay: 0.6s;

-webkit-animation-fill-mode: forwards;

}

h1 span:first-child {

animation-delay: 0.7s;

}

h1 span:last-child {

color: #ffe221;

animation-delay: 0.5s;

}

h2 {

top: 0;

position: absolute;

}

h2 span {

animation-delay: 4.1s;

-webkit-animation-fill-mode: forwards;

}

h2 span:first-child {

animation-delay: 4.2s;

}

h2 span:last-child {

color: #ffe221;

animation-delay: 4s;

}

.usechrome {

font-size: 10px;

color: #fff;

font-family: helvetica, arial;

position: absolute;

bottom: 20px;

width: 100%;

text-align: center;

left: 0;

}

@keyframes titleAnimation {

0% {

transform: translateY(-50px);

opacity: 0;

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);

clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);

}

20% {

transform: translateY(0);

opacity: 1;

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);

clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);

}

80% {

transform: translateY(0);

opacity: 1;

-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);

clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);

}

100% {

transform: translateY(50px);

opacity: 0;

-webkit-clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);

clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);

}

}