我写了一个纯css画圆动画,但是动画的时候两个半圆之间有一点点空白。(当动画结束时,他们走了。)
谁能告诉我为什么会这样?
我的 HTML:
.circle__box {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.circle__wrapper {
width: 100px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.circle__wrapper--right {
right: 0;
}
.circle__wrapper--left {
left: 0;
}
.circle__whole {
width: 160px;
height: 160px;
border: 20px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
transform: rotate(-135deg);
}
.circle__right {
border-top: 20px solid teal;
border-right: 20px solid teal;
right: 0;
animation: circleRight 5s linear forwards;
}
.circle__left {
border-bottom: 20px …Run Code Online (Sandbox Code Playgroud)我推迟了非关键的 CSS/JS 并预加载了网站的基本 CSS。PageSpeed Insights上的每个实验室数据都变得更好。“最大内容绘制”和“累积布局变化”除外。特别是,CLS 从 0.002 增加到 1.148!
网站上的图像设置为background-image我认为不会出现“图像没有尺寸”的问题。我也尝试使用 修复字体font-display,但 CLS 仍然相同。
我可以使用其他任何技术来优化 CLS 吗?
我在名为 的表中有一列id:1, 3, 4, 9, 10, 11t_mark
如何获得非连续范围?(例如[1, 3],[4, 9])