html – 使用CSS关键帧创建计数器

概述是否可以通过更改元素内容来使用关键帧创建动画计数器？ 例如： .loop:before{ animation: loop 10s linear;}@keyframes loop { 0% { content: '0'; } 10% { content: '10'; } 20% { content: 是否可以通过更改元素内容来使用关键帧创建动画计数器？

例如：

.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？

解决方法 内容属性不能通过@keyframes或Transition进行 *** 作,但是有一种方法可以通过使用带有文本0 10 20 30 40 50 60 70 80 90的：pseudo-element并为其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; }}

<div  data-val="0 10 20 30 40 50 60 70 80 90"></div>

总结

以上是内存溢出为你收集整理的html – 使用CSS关键帧创建计数器全部内容，希望文章能够帮你解决html – 使用CSS关键帧创建计数器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。