微软官网的一个进度条效果挺优雅的

𝕷𝖎𝖑𝖏𝖆𝖈𝖐 · 发表于 2024-8-18 17:42:56

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

效果
https://tapewithadblock.org/v/ko2r2z76a2hDYL/%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6_2024-08-18_161932.mp4

显示的位置
microsoft官网，登录，Microsoft 帐户，设备，删除设备就会弹出。
正在删除的框的上面有一个彩色的块
挺优雅的效果

微软官网的一个进度条效果挺优雅的官网,width,px,rgb,登录

研究了一下

容器包裹动画效果
.itemProgress-483 {
position: relative;
overflow: hidden;
height: 2px;
padding: 0px;
}

动画背景，灰色
.progressTrack-484 {
position: absolute;
width: 100%;
height: 2px;
background-color: rgb(222, 222, 222);
}

动画核心滚动的块
.progressBar-485 {
height: 2px;
position: absolute;
transition: width 0.3s;
width: 0px;
min-width: 33%;
background: linear-gradient(to right, rgb(222, 222, 222) 0%, rgb(0, 111, 201) 50%, rgb(222, 222, 222) 100%);
animation: 3s ease 0s infinite normal none running css-479;
}

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！