仿今日头条个人中心html,纯css仿今日头条加载文字效果

加载动画

.box-a{

padding: 100px;

text-align: center;

}

.box-a span{

font-size: 36px;

line-height: 36px;

color: transparent;

background: linear-gradient(to right, #cccccc, #999999 );

background-clip: text;

-webkit-background-clip:text;

position: relative;

}

.box-a span::after{

content: '';

display: inline-block;

width: 100%;

height: 150%;

position: absolute;

left:-100%;

top: 50%;

transform: translateY(-50%);

background-image: radial-gradient(circle ,rgba(255,255,255,.8) 30%, rgba(255,255,255,.05) );

z-index: 10;

animation: words-blinking 2s infinite;

}

.text-box{

text-align: center;

}

.text-box span{

font-size: calc(100% + 3vw);

cursor: pointer;

line-height: 1.2;

margin: 0.3em 0;

color: transparent;

-webkit-background-clip: text;

background-clip: text;

background-repeat: no-repeat;

transition: 0.5s ease-out;

}

.text-box .font-b{

background-image: linear-gradient(270deg, #f5f5f5 45%, #cccccc 55%, #f5f5f5 65%);

background-size: 220% 100%;

background-position: 100% 50%;

animation: texts-change 1.5s linear infinite;

}

@keyframes words-blinking{

form{left:-100%;}

to{left:100%;}

}

@keyframes texts-change{

0% {background-position: 100% 50%;}

100% {background-position: 0% 50%;}

}

今日头条

今日头条