.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%;}
}
今日头条
今日头条