3D选项卡活动动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<nav class="tabbar">
    <ul>
        <li>
            <a href="">
                <svg>
                    <use xlink:href="#homeIcon">
                </svg>
                <span>Home</span>
            </a>
        </li>
        <li class="active">
            <a href="">
                <svg>
                    <use xlink:href="#favoritesIcon">
                </svg>
                <span>Favorites</span>
            </a>
        </li>
        <li>
            <a href="">
                <svg>
                    <use xlink:href="#settingsIcon">
                </svg>
                <span>Settings</span>
            </a>
        </li>
    </ul>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="homeIcon" fill="currentColor">
        <path d="M13.1428571,14.5 C13.6571429,14.5 14,14.175507 14,13.6887676 L14,6.38767551 C14,6.14430577 13.9142857,5.90093604 13.6571429,5.73868955 L8.51428571,1.6825273 C8.17142857,1.43915757 7.74285714,1.43915757 7.4,1.6825273 L2.25714286,5.73868955 C2.08571429,5.90093604 2,6.14430577 2,6.38767551 L2,13.6887676 C2,14.175507 2.34285714,14.5 2.85714286,14.5 L13.1428571,14.5 Z M5.42857143,12.8775351 L3.71428571,12.8775351 L3.71428571,6.79329173 L8,3.38611544 L12.2857143,6.79329173 L12.2857143,12.8775351 L10.5714286,12.8775351 L5.42857143,12.8775351 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="favoritesIcon" fill="currentColor">
        <path d="M7.5125,14.3196446 C6.8625,13.7292662 1.5,9.09057902 1.5,5.54830881 C1.5,3.27113511 3.2875,1.5 5.4,1.5 C6.375,1.5 7.26875,1.92169883 8,2.5120772 C8.73125,1.83735907 9.625,1.5 10.6,1.5 C12.79375,1.5 14.5,3.35547487 14.5,5.54830881 C14.5,9.09057902 9.1375,13.7292662 8.4875,14.2353048 C8.24375,14.5726639 7.75625,14.5726639 7.5125,14.3196446 Z M5.4,3.18679534 C4.18125,3.18679534 3.125,4.28321231 3.125,5.54830881 C3.125,7.40378368 5.96875,10.6086948 8,12.4641697 C9.70625,10.8617141 12.875,7.57246322 12.875,5.54830881 C12.875,4.19887254 11.81875,3.18679534 10.6,3.18679534 C9.86875,3.18679534 9.1375,3.60849417 8.73125,4.28321231 C8.40625,4.78925091 7.675,4.78925091 7.35,4.28321231 C6.8625,3.60849417 6.2125,3.18679534 5.4,3.18679534 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="settingsIcon" fill="currentColor">
        <path d="M8.16590157,11.9863016 C8.11194132,11.9953113 8.05651821,12 8,12 L3,12 C2.44771525,12 2,11.5522847 2,11 C2,10.4477153 2.44771525,10 3,10 L8,10 C8.05651821,10 8.11194132,10.0046887 8.16590157,10.0136984 C8.57384536,8.84135601 9.68866807,8 11,8 C12.6568542,8 14,9.34314575 14,11 C14,12.6568542 12.6568542,14 11,14 C9.68866807,14 8.57384536,13.158644 8.16590157,11.9863016 Z M11,12 C11.5522847,12 12,11.5522847 12,11 C12,10.4477153 11.5522847,10 11,10 C10.4477153,10 10,10.4477153 10,11 C10,11.5522847 10.4477153,12 11,12 Z"></path>
        <path d="M7.83409843,4.01369835 C7.88805868,4.0046887 7.94348179,4 8,4 L13,4 C13.5522847,4 14,4.44771525 14,5 C14,5.55228475 13.5522847,6 13,6 L8,6 C7.94348179,6 7.88805868,5.9953113 7.83409843,5.98630165 C7.42615464,7.15864399 6.31133193,8 5,8 C3.34314575,8 2,6.65685425 2,5 C2,3.34314575 3.34314575,2 5,2 C6.31133193,2 7.42615464,2.84135601 7.83409843,4.01369835 Z M5,6 C5.55228475,6 6,5.55228475 6,5 C6,4.44771525 5.55228475,4 5,4 C4.44771525,4 4,4.44771525 4,5 C4,5.55228475 4.44771525,6 5,6 Z"></path>
    </symbol>
</svg>

css

.tabbar {
  --background: #2F3545;
  --shadow: rgba(18, 22, 33, .32);
  --shadow-dark: rgba(18, 22, 33, .48);
  --active: #fff;
  --inactive: #6C7486;
  --r: 0deg;
  --x: 0px;
  width: 280px;
  border-radius: 6px;
  -webkit-perspective: 180px;
          perspective: 180px;
  background: var(--background);
  box-shadow: var(--x) 12px 20px var(--shadow-dark);
  transition: box-shadow .6s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, box-shadow .6s ease;
  transition: transform .6s ease, box-shadow .6s ease, -webkit-transform .6s ease;
  -webkit-transform: perspective(200px) rotateX(4deg) translateX(var(--x)) rotateY(var(--r)) translateZ(6px);
          transform: perspective(200px) rotateX(4deg) translateX(var(--x)) rotateY(var(--r)) translateZ(6px);
}
.tabbar ul {
  margin: 0;
  padding: 0 4px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tabbar ul li a {
  display: block;
  padding: 16px 0 12px 0;
  text-decoration: none;
  color: var(--inactive);
  transition: color .4s ease;
  position: relative;
}
.tabbar ul li a svg,
.tabbar ul li a span {
  --z: 0px;
  display: block;
  transition: -webkit-transform .4s ease, -webkit-filter .4s ease;
  transition: transform .4s ease, filter .4s ease;
  transition: transform .4s ease, filter .4s ease, -webkit-transform .4s ease, -webkit-filter .4s ease;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 0, var(--z));
          transform: translate3d(0, 0, var(--z));
}
.tabbar ul li a svg {
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.tabbar ul li a span {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.tabbar ul li.active a {
  color: var(--active);
}
.tabbar ul li.active a svg,
.tabbar ul li.active a span {
  transition-delay: .32s;
  -webkit-filter: drop-shadow(0 8px 2px var(--shadow));
          filter: drop-shadow(0 8px 2px var(--shadow));
}
.tabbar ul li.active a svg {
  --z: 16px;
}
.tabbar ul li.active a span {
  --z: 12px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Mukta Malar', Arial;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1E2432;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D选项卡活动动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号