检测到论坛CSS可能没有正确加载，如出现排版混乱请刷新重试。

We detected that the CSS might not be loaded correctly. If the website displays abnormally, Please refresh and try again.

以假乱真——Windows 11 oobe 动画

DaleZ

实在不知道用哪个 Tag 了.
直接上效果（建议在日光模式下查看）：

请稍候...

一个下午的成果，欢迎提出不足与改良方案~

さらば限界少女

DaleZ 看起来只是做了一个加载圈啊...
还有后续吗

现在硬要说不足的话只能说这个蓝色环的边缘不够圆角

DaleZ

Betta_Fish 包括 svg 显示问题吗？

DaleZ 3.svg 显示不正常（原本是动态的），且下方出现大量空白。

使用的帖子是DaleZ。

DaleZ

さらば限界少女无，因为11的 oobe 应该没有别的动画了（别告诉我左侧的那些复杂动画）。

さらば限界少女蓝色环的边缘不够圆角

我只能说限于 svg 技术限制和我的能力范围应该是不行了……这个是 circle 动态改变的，如果用 Path 可以圆，只是要一帧帧的设参数，这个太 Difficult 了。当然，如果有更好的方案的话我可以修改。

个人认为这个可以放在静态网页上做一个加载动画。

さらば限界少女

DaleZ 用AE之类的软件做 (???)

さらば限界少女

DaleZ 别告诉我左侧的那些复杂动画

其实我最想看的就是这部分 (

DaleZ

さらば限界少女能够记事本的东西我绝不用专业软件🤣（此处有一个大笑的 Emoji）

DaleZ

さらば限界少女还有别的建议吗……其实我也在 github 上有 Blog（悄声细语），也就是说这个动画未来是给它用的

DaleZ

何木槿我看 exe 和那几个 dll 都要换…

所以你换的是 11 的文件？看看怎么 Patch 它们吧……

さらば限界少女居然被你说中了🤣左侧动画似乎确实是用 AE 做的
（http://www.albertyih.com/windows_11 的 Animated Illustrations）

DaleZ

さらば限界少女

:(

如果那些东西可以用 svg 做的话也不至于到现在都没发现 resources (

DaleZ

さらば限界少女现在已有方法可以查看这些动画。
写一个 HTML，至少应该有这些内容：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js" integrity="sha512-fTTVSuY9tLP+l/6c6vWz7uAQqd1rq3Q/GyKBN2jOZvJSLC5RjggSdboIFL1ox09/Ezx/AKwcv/xnDeYN9+iDDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

然后在这里找到动画文件：

"C:\Windows\SystemApps\Microsoft.Windows.CloudExperienceHost_cw5n1h2txyewy\images\"

然后在控制台中输入：

lottie.loadAnimation({
    container: document.body,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'file.json' 
});

（可能需要将文件 Base64 转码后填入 path 内）
效果：

Windows 10X 的动画可能也是相同原理。。。

DaleZ

感谢 Edge 的设置页面，现在它有圆角了。
上传总是破坏效果，上代码。
在适当位置添加stroke-linecap="round"就可以了。
效果：

何木槿

DaleZ 现在你只需要实现非线性旋转就可以彻底乱真了

DaleZ

何木槿难，因为实现方式不同。
微软：SVG+CSS3
我：纯 SVG
因此我的方式会一直存在一个加速度。如果不改变实现方法就会一直这样。（微软居然用一条 CSS 就搞定了）
我会上传那个保存的设置页面，大家一起玩

DaleZ

b3cbf4fb-fb92-48ea-a5c1-5ad9be96278b.zip

30kB

DaleZ

DaleZ 找到了微软的 Keyflames，调好了。
微软的方法：

<html>
<head>
<title>ProgressBar</title>
<style>
.c01234 {
  text-align: left;
  align-items: center;
}
.c01247 {
  width: 16px;
  height: 16px;
}
@media (-ms-high-contrast:active) {
  .c01234 {
    -ms-high-contrast-adjust: none;
  }
}
.c01235 {
  display: inline-block;
}
.c01235 .c01240, .c01235 .c01242 {
  fill: none;
  transform: rotate(-90deg);
  transition: all 0.2s ease-in-out;
  stroke-width: 2px;
  stroke-linecap: round;
  transform-origin: 50% 50%;
}
.c01235 .c01240 {
  stroke: #63ADE5;
}
.c01235 .c01241 {
  animation: spin-infinite 2s linear infinite;
}
.c01235 .c01242 {
  stroke: #4D4D4D;
}
@-webkit-keyframes spin-infinite {
  0% {
    stroke-dasharray: 0.01px 43.97px;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(450deg);
    stroke-dasharray: 21.99px 21.99px;
  }
  100% {
    stroke-dasharray: .01px 43.97px;
    transform: rotate(1080deg);
  }
}
</style>
</head>
<body>
<div class="c01234 c01247 c01234 c01247 c01235" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div slot="indeterminate"><svg class="c01238 c01248" viewBox="0 0 16 16"><circle class="c01242" cx="8px" cy="8px" r="7px"></circle><circle class="c01240 c01241" cx="8px" cy="8px" r="7px"></circle></svg></div></div>
</body>
</html>