html：
css:
.container {
position: relative;
margin-top: 100px;
margin-bottom: 100px;
}
.text__box {
position: relative;
overflow: hidden;
width: 0;
font-size: 18px;
line-height: 34px;
white-space: nowrap;
animation: width 2s steps(13) forwards;
}
.imgone {
width: 34px;
height: 34px;
}
.text__box::after {
content: "";
position: absolute;
right: 0px;
height: 32px;
border-right: 1px solid #000;
animation: showInfinite 0.5s 5 both;
}
.one {
animation-delay: 0s;
animation-name: oneWidth;
}
.two {
animation-delay: 2s;
}
.two::after {
animation-delay: 2s;
}
.three {
animation-delay: 4s;
}
.three::after {
animation-delay: 4s;
}
.four {
animation-delay: 6s;
}
.four::after {
animation-delay: 6s;
animation: showInfinite 0.5s infinite both;
}
/* 2/3/4的宽 */
@keyframes width {
0% {
width: 0;
}
100% {
width: 160px;
}
}
/* 第一行的宽 */
@keyframes oneWidth {
0% {
width: 0;
}
100% {
width: 260px;
}
}
@keyframes showInfinite {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
