js+css模仿浏览器多个tab选项卡添加修改删除ViewTransition动画效果代码-html代码-BFW代码库

js+css模仿浏览器多个tab选项卡添加修改删除ViewTransition动画效果代码

代码语言：html

所属分类：选项卡

代码描述：js+css模仿浏览器多个tab选项卡添加修改删除ViewTransition动画效果代码

代码标签： js cs tab 选项卡添加修改删除 ViewTransition 动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);

@layer demo {
  .just-the-tabs {
    display: flex;
    gap: 1px;
    align-items: center;
  }
  
  .tab {
    display: flex;
    place-items: center;
    gap: var(--size-5);
    
    background: var(--surface-2);
    padding-inline: var(--size-3) var(--size-2);
    padding-block: var(--size-2);
    border-radius: var(--radius-2) var(--radius-2) 0 0;
    
    @media (prefers-color-scheme: light) {
      background: white;
    }
    
    &:is(:hover, :focus-within) {
      background: var(--surface-3);
      
      @media (prefers-color-scheme: light) {
        background: var(--surface-1);
      }
    }
    
    & > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    & > button {
      --_bg: #0000;
      --_border: #0000;
      box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
      padding: var(--size-1);
      aspect-ratio: var(--ratio-square);
      border-radius: var(--radius-round);
      line-height: 0;
    }
  }
  
  #newtab {
    border-radius: var(--radius-round);
    margin-inline-start: var(--size-3);
    padding: var(--size-2);
    line-height: 0;
    aspect-ratio: var(--ratio-square);
  }
}

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }
  
  @med.........完整代码请登录后点击上方下载按钮下载查看