以假乱真——Windows 11 oobe 动画
2 个月 后
- 已编辑
- #9
感谢 Edge 的设置页面，现在它有圆角了。
上传总是破坏效果，上代码。
在适当位置添加stroke-linecap="round"就可以了。
效果：
- #13
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>我的方法：
应该是最终版了，请自行对比。
- #14
幕后彩蛋
为了确定加载圈到底是不是用 HTML 写的，于是……[tieba=huaji]
6 个月 后
- #16
さらば限界少女 现在已有方法可以查看这些动画。
写一个 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 的动画可能也是相同原理。。。
