css变量实现滑动tabbar菜单导航效果代码-html代码-BFW代码库

css变量实现滑动tabbar菜单导航效果代码

代码语言：html

代码描述：css变量实现滑动tabbar菜单导航效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />




    <style>
        @property --k {
          syntax: "<number>";
          initial-value: 0;
          inherits: true;
        }
        body, nav, a {
          display: grid;
        }
        
        body {
          place-content: center;
          margin: 0;
          height: 100vh;
          background: repeating-radial-gradient(circle at 25% 25%, transparent 0, rgba(0, 0, 0, 0.2) 1px 4px, transparent 5px 8px) #f03;
        }
        
        nav {
          grid-auto-flow: column;
          padding: 0 1.5em;
          border-radius: 1.6970562748em;
          background: #fff;
          --mask:
          	linear-gradient(red 0 0),
          	radial-gradient(circle at 0 2.1213203436em,
          			transparent calc(2.1213203436em - .5px), gold calc(2.1213203436em + .5px))
          		calc((var(--k) + .5)*7.5em + 1.5em - 3.1819805153em) 0/ 2.1213203436em 0.75em no-repeat,
          	radial-gradient(circle at 100% 2.1213203436em,
          			transparent calc(2.1213203436em - .5px), gold calc(2.1213203436em + .5px))
          		calc((var(--k) + .5)*7.5em + 1.5em + 1.0606601718em) 0/ 2.1213203436em 0.75em no-repeat,
          	radial-gradient(circle at calc((var(--k) + .5)*7.5em + 1.5em) 0.375em,
          			white calc(0.375em - 1px), transparent 0.375em),
          	radial-gradient(circle at calc((var(--k) + .5)*7.5em + 1.5em) -0.75em,
          			blue calc(2.1213203436em - .5px), transparent calc(2.1213203436em + .5px));
          -webkit-mask: var(--mask);
          mask: var(--mask);
          -webkit-mask-composite: xor, source-over, source-over;
          mask-composite: exclude, add, add;
          font: 0.625em/1.5 ubuntu, sans-serif;
          transition: --k 0.3.........完整代码请登录后点击上方下载按钮下载查看