搜索
缓存时间20 现在时间20 缓存数据 愿时光能缓,愿故人不散;愿你掂念的人能和你道晚安,愿你独闯的日子里不觉得孤单。
查看: 368|回复: 1

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

[复制链接]
发表于 2024-8-18 16:54:17 | 显示全部楼层 |阅读模式

厌倦了滚动浏览相同的帖子?当您创建帐户后,您将始终回到您离开的地方。使用帐户,不仅可以享受无广告的清爽界面!

您需要 登录 才可以下载或查看,没有账号?注册

×
效果
https://tapewithadblock.org/v/ko ... 24-08-18_161932.mp4

显示的位置
microsoft官网,登录,Microsoft 帐户,设备,删除设备就会弹出。
挺优雅的效果


研究了一下
容器包裹动画效果
.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;
}
爱生活,爱奶昔~
发表于 2024-8-18 18:06:17 | 显示全部楼层
你说最顶上的那个动画?

相关的 css css-479 你没有复制。
爱生活,爱奶昔~
回复 支持 反对

使用道具 举报

Powered by Nyarime. Licensed

GMT+8, 2024-12-8 20:04 , Processed in 0.025174 second(s), 9 queries , Gzip On, Redis On
发帖际遇 ·手机版 ·小黑屋 ·RSS ·奶昔网

登录切换风格
快速回复 返回顶部 返回列表