css实现圆角酷黑tab选项卡效果代码-html代码-BFW代码库

css实现圆角酷黑tab选项卡效果代码

代码语言：html

所属分类：选项卡

代码描述：css实现圆角酷黑tab选项卡效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
    :root {
  --color-primary: #ee75d2;
  --color-on-primary: white;
  --color-secondary: #75d8ee;
  --color-tertiary: #ffeb3b;
  --color-quaternary: red;
  --color-bg: #11071d;
}

.container {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  height: 50vh;
  max-width: 90vw;
  box-shadow: 0 0 20rem color-mix(in srgb, var(--color-bg), white 60%);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.tabs {
  overflow: hidden;
  display: flex;
  gap: 0.25rem;
  border-bottom: 0.625rem solid #2f2340;
  background: color-mix(in oklab, var(--color-bg), rgba(255, 255, 255, 0.5) 20%);
}
.tabs .tab {
  padding: 1rem;
  width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tabs .tab:not(.active) {
  cursor: pointer;
}
.tabs .tab .sub {
  font-size: 0.5rem;
}
.tabs .tab .title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.tabs .tab:before, .tabs .tab:after {
  content: "";
  background: #2f2340;
  position: absolute;
  bottom: 0;
  height: 1rem;
  width: 1rem;
  --size: 2rem;
  transform: translateY(100%);
  opacity: 0;
  transition: background 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.tabs .tab:before {
  -webkit-mask-image: radial-gradient(var(--size) var(--size) at 0 0, transparent 50%, black 50%);
          mask-image: radial-gradient(var(--size) var(--size) at 0 0, transparent 50%, black 50%);
  left: -1rem;
}
.tabs .tab:after {
  -webkit-mask-image: radial-gradient(var(--size) var(--size) at 100% 0, transparent 50%, black 50%);
          mask-image: radial-gradient(var(--size) var(--size) at 100% 0, transparent 50%, black 50%);
  right: -1rem;
}
@media (hover) {
  .tabs .tab {
    transition: color 0.3s ease, backg.........完整代码请登录后点击上方下载按钮下载查看