「Css」地址栏内信息图标隐藏动画

阅读：402回复：0

alanfly

2024-11-10 15:06
加关注写私信

楼主^#

按下通用扩展菜单按钮激活动画，适合用单行模式地址栏宽度有限的用户。

#urlbar-container&gt;#urlbar :is(#identity-box,#identity-box *,#remote-control-box,#urlbar-search-button,#tracking-protection-icon-container,#tracking-protection-icon-container *,#urlbar-label-box,#page-action-buttons,#page-action-buttons *) {
    max-width: 0px !important;
    /*去除图标外的空间*/
    padding-inline: 0px !important;
    /*去除文字压缩时显示的'...'*/
    overflow: hidden !important;
    /*最后一个时间是地址栏图标显示的时间*/
    transition: max-width 230ms ease-in 3.6s !important;
}
 
#urlbar-container:has(+#unified-extensions-button:active)&gt;#urlbar :is(#identity-box,#identity-box *,#remote-control-box,#urlbar-search-button,#tracking-protection-icon-container,#tracking-protection-icon-container *,#urlbar-label-box,#page-action-buttons,#page-action-buttons *) {
    max-width: 100px  !important;
    /*需要按住激活隐藏图标的时间*/
    transition-delay: 1s !important;
}

喜欢1

「Css」地址栏内信息图标隐藏动画

最新喜欢：