css3数字加载动效 |css3实现两点之间连线

.num-wrap {
display: inline-block;
width: 50px;
text-align: center;
font-size: 28px;
position: relative;
}
.num-wrap .num:after {
content: attr(data-num);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.num-wrap .num.loaded:after {
opacity: 1;
transform: translateY(-50%);
}

代码中的.num-wrap类定义了数字加载动效的容器样式，设置了容器的宽度、文本居中、字体大小、定位等属性。.num-wrap .num:after定义了数字的样式，在容器中为数字添加一个伪元素，初始时不可见。.num-wrap .num.loaded:after则定义了数字加载完成的样式，将伪元素的不透明度设置为1即可。

在HTML中使用以下代码即可导入上述CSS：

<div class="num-wrap">
<span class="num" data-num="88"></span>
</div>

其中data-num属性是数字的值，可以根据实际需要修改。加入.loaded类名可以实现数字加载完成的效果。

总之，CSS3数字加载动态效果是一种非常实用的Web设计技术，可以用于展示页码、计数器、数字倒计时等，带来更加愉悦的用户体验。