作者:Kevinczp | 来源:互联网 | 2023-05-25 19:42
是否可以通过更改元素内容来使用关键帧创建动画计数器?
例如:
.loop:before{
animation: loop 10s linear;
}
@keyframes loop {
0% {
content: '0';
}
10% {
content: '10';
}
20% {
content: '20';
}
30% {
content: '30';
}
40% {
content: '40';
}
50% {
content: '50';
}
60% {
content: '60';
}
70% {
content: '70';
}
80% {
content: '80';
}
90% {
content: '90';
}
}
万一这是不可能的,有没有办法用HTML/CSS,没有Javascript?
1> Weafs.py..:
该content
属性不能通过@keyframes
或可操作transition
,但是有一种方法可以通过使用带有文本的伪元素0 10 20 30 40 50 60 70 80 90
和动画其margin-top
属性来实现.
div {
position: relative;
width: 20px;
height: 20px;
border: 1px solid black;
overflow: hidden;
}
div:after {
content: attr(data-val);
position: absolute;
top: 0;
left: 0;
line-height: 20px;
text-align: center;
-webkit-animation: loop 10s linear;
animation: loop 10s linear;
}
@-webkit-keyframes loop {
0% { margin-top: 0px; }
9% { margin-top: 0px; }
10% { margin-top: -20px; }
19% { margin-top: -20px; }
20% { margin-top: -40px; }
29% { margin-top: -40px; }
30% { margin-top: -60px; }
39% { margin-top: -60px; }
40% { margin-top: -80px; }
49% { margin-top: -80px; }
50% { margin-top: -100px; }
59% { margin-top: -100px; }
60% { margin-top: -120px; }
69% { margin-top: -120px; }
70% { margin-top: -140px; }
79% { margin-top: -140px; }
80% { margin-top: -160px; }
89% { margin-top: -160px; }
90% { margin-top: -180px; }
99% { margin-top: -180px; }
100% { margin-top: -200px; }
}
@keyframes loop {
0% { margin-top: 0px; }
9% { margin-top: 0px; }
10% { margin-top: -20px; }
19% { margin-top: -20px; }
20% { margin-top: -40px; }
29% { margin-top: -40px; }
30% { margin-top: -60px; }
39% { margin-top: -60px; }
40% { margin-top: -80px; }
49% { margin-top: -80px; }
50% { margin-top: -100px; }
59% { margin-top: -100px; }
60% { margin-top: -120px; }
69% { margin-top: -120px; }
70% { margin-top: -140px; }
79% { margin-top: -140px; }
80% { margin-top: -160px; }
89% { margin-top: -160px; }
90% { margin-top: -180px; }
99% { margin-top: -180px; }
100% { margin-top: -200px; }
}