从特效入手，深入了解CSS（四）动态侧边栏

编程语言 2023-04-10 08:03:01 阅读次数: 0

不建议跳跃阅读！
这篇文章将从头开始介绍如何实现一个特效
中间偶尔会穿插一些css3或平时接触不多的css属性

首先看一看这一期的特效：

lzz_dynamic_aside

在介绍这一期的特效之前，首先需要知道两个必要的环境配置，否则无法在本地运行这个特效。

环境配置

平时在项目中我会使用less 或者是scss预处理器来编写css样式，这次我们了解一些scss的基本使用。

scss基本语法

变量

$ 符号来标识变量：把反复使用的css属性值定义成变量。比如：

/*scss*/
$borderRadius: 10px;
.box{
    border-radius: $borderRadius;
}

在经过编译转化为css文件后变为：

/*css*/
.box{
    
    
    border-radius: 10px;
}

其实，不仅可以将反复使用的属性value定义为变量，我们还可以将属性key值定义为变量：

/*scss*/
$side : left;
.box {
  // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}内
  border-#{$side}-radius: 5px;
}

在经过编译转化为css文件后变为：

/*css*/
.box {
    
    
  border-left-radius: 5px;
}

既然是变量，那么也就符合编程语言块级作用域的思想，即在元素内部定义的变量不会影响其他元素。

在下面这个例子中，box1的margin-top可以成功取得变量$margin的值，而box2则无法获取变量的值。

.box1 {
    $margin: 10px;
    margin-top: $margin;
}

.box2 {
    margin-top: $margin;
}

嵌套

首先给出这样一个例子：

<div class="virtual-main">
    <div class="virtual-main-left">
        <div class="left-title"></div>
        <div class="left-detail"></div>
    </div>
    <div class="virtual-main-right"></div>
</div>

面对这样的项目结构，如果想要改.left-detail元素的样式，用css的写法将会是：

.virtual-main-content .virtual-main-left .left-detail{
    
    
	...
}

对吧？但是这样看起来就非常的繁琐，而scss提供的嵌套选择器就可以解决这个痛点：

.virtual-main{
	&-left{
        .left-detail{
            ...
        }
	}
}

注意：这里的&符号表示：这里的占位符可以替换为外层的属性元素标签，也就是说这里的&-left经过编译后表示为.virtual-main-left。

在scss中还提供了属性嵌套，css中有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box {
    
    
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 scss 中我们可以这样写：

.box {
  // 需要注意，这里的 border 后面一定要加上冒号，不要漏掉了！
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

混合宏

如果你的整个网站某个页面中有几处小样式类似，比如颜色，字体等，在 sass 可以使用变量来统一处理。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。因此我们可以将公共的scss提取出来，一般将这样的元素单独写在一个叫做mixin.scss文件当中，后期通过全局引入来注册属性。

在 scss 中，我们可以使用@mixin来声明一个混合宏。比如：

@mixin borderRadius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

当我们想要使用这个名为borderRadius的混合宏时，使用@include这个关键词来调用声明好的混合宏：

.box1 {
    @include borderRadius;
}

此时编译出来的css文件为：

.box1 {
    
    
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

如果仅仅是这样，定义并调用混合宏的话，我认为还不如使用css变量在:root中定义全局变量。

混合宏之所以强大，在于他是可以接收参数来定义的，而且这个参数接收默认值：

$radius: 10px;
@mixin borderRadius($radius: 5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

.box1 {
    @include borderRadius(#{$radius});
}

.box2 {
  @include borderRadius;
}

此时编译出来的css文件为：

.box1 {
    
    
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.box2 {
    
    
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

扩展/继承

很多时候，我们都需要设置一个基础样式basic，然后当我们设置其他元素的时候，为该元素添加上basic元素，比如：

.basic{
    
    
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 5px;
}

<div class="target-dom basic"></div>

如上面代码所示，当我们想要处理target-dom元素的时候，我们想为他设置一些字体相关的属性，此时我们会在class列表里面加上basic属性。

在scss里面就可以简单点写，以免在dom结点身上挂载过多的属性。

.target-dom{
	@extend .basic
}

再举一个例子：

// SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来的结果为：

.btn, .btn-primary, .btn-second {
    
    
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
} // 合并到了一起

.btn-primary {
    
    
  background-color: #f36;
  color: #fff;
}

.btn-second {
    
    
  background-clor: orange;
  color: #fff;
}

占位符

占位符指的是： %

% + 变量名 声明的代码，如果不被 @extend 调用的话，不会产生任何代码，比如：

%borderRadius{
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.box1 {
  @extend %borderRadius;
}

编译结果为：

.box1 {
    
    
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

我平时在项目中常常用到的功能就是这些了：

  • 嵌套
  • 变量 $color : #ffffff;
  • 混入 @mixin
  • 继承 @extend

附上一个可以在线转换scss为css的网站

在html文件中使用scss

  1. 由于scss需要转化为css才能够使用，所以我们在制作特效前先安装一下scss:

    npm install sass

  2. 将scss文件转为css文件，以文件index.scss为例

    sass index.scss index.css

  3. 监听scss文件变化，自动转为css文件，可以直接在html中引用css

    sass --watch index.scss:index.css

  4. live-server的安装，它可以在本地开启一个模拟服务器，当我们修改代码时，页面可以同时改变

    npm install -g live-server

  5. 右键点击live-server，开启服务

feather —— 一个开源的图标库

这一期的特效需要使用到图标，所以我们用一个开源图标库中的图标

引用一下github上面的安装教程：

Client-side JavaScript

1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather.js or feather.min.js into your project directory. You don’t need both feather.js and feather.min.js.

2. Include

Include feather.js or feather.min.js with a <script> tag:

<script src="path/to/dist/feather.js"></script>

Note: feather.js and feather.min.js are located in the dist directory of the npm package.

Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

After including the script, feather will be available as a global variable.

（ 第一步 / 第二步选一个实现就可以了 ）

3. Use

To use an icon on your page, add a data-feather attribute with the icon name to an element:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

Call the feather.replace() method:

<!-- 别漏掉了这一步！ -->
<script>
  feather.replace()
</script>

All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace()…

好了，基础环境配置部分就到这里了，接下来可以开始看看如何制作本期特效了。

HTML部分

<nav class="navbar">
    <ul class="navbar__menu">
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="home"></i><span>Home</span></a>
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="message-square"></i><span>Messages</span></a>        
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="users"></i><span>Customers</span></a>        
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="folder"></i><span>Projects</span></a>        
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="archive"></i><span>Resources</span></a>        
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="help-circle"></i><span>Help</span></a>        
        </li>
        <li class="navbar__item">
            <a href="#" class="navbar__link"><i data-feather="settings"></i><span>Settings</span></a>        
        </li>
    </ul>
</nav>

SCSS部分

$borderRadius: 10px;
$spacer: 1rem;
$primary: #406ff3;
$text: #6a778e;
$linkHeight: $spacer * 3.5;
$timing: 250ms;
$transition: $timing ease all;

@mixin gooeyEffect($i) {
    @keyframes gooeyEffect-#{$i} {
        0% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(0.5, 1.5);
        }
        100% {
            transform: scale(1, 1);
        }
    }
}

body{
    background: #eaeef6;
    font-family: 'Open Sans', sans-serif;
}
.navbar{
    $ref: &;
    position: fixed;
    top: $spacer;
    left: $spacer;
    background: #fff;
    border-radius: $borderRadius;
    padding: $spacer 0;
    box-shadow: 0 0 40px rgba(0,0,0,0.03);
    height: 100vh - #{$spacer*4};
    &__link{
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: $linkHeight;
        width: $spacer * 5.5;
        color: $text;
        transition: $transition;
        span{
            position: absolute;
            left: 100%;
            transform: translate(-($spacer*3));
                margin-left: 1rem;
                opacity: 0;
                pointer-events: none;
                color: $primary;
                background: #fff;
                padding: $spacer *0.75;
                transition: $transition;
                border-radius: $borderRadius * 1.75;
                }
        &:hover{
            color: #fff;
        }
        .navbar:not(:hover) &:focus,
        &:hover{
            span{
                opacity: 1;
                transform: translate(0);
            }
        }
    }
    &__menu{
        position: relative;
    }
    &__item{
        &:last-child{
            &:before{
                content: '';
                position: absolute;
                opacity: 0;
                z-index: -1;
                top: 0;
                left: $spacer;
                width: $linkHeight;
                height: $linkHeight;
                background: $primary;
                border-radius: $borderRadius * 1.75;
                transition: $timing cubic-bezier(1, 0.2, 0.1, 1.2) all;

            }
        }

        @for $i from 1 to 12 {
            &:first-child:nth-last-child(#{$i}),
            &:first-child:nth-last-child(#{$i}) ~ li {
                &:hover {
                    ~ li:last-child:before {
                        opacity: 1;
                    }
                }
                &:last-child:hover:before {
                    opacity: 1;
                }
                @for $j from 1 to $i {
                    &:nth-child(#{$j}):hover {
                        ~ li:last-child:before {
                            @include gooeyEffect($j);
                            top: 100% / $i * ($j - 1);
                            animation: gooeyEffect-#{$j} $timing 1;
                        }
                    }
                }
                &:last-child:hover:before {
                    @include gooeyEffect($i);
                    top: 100% / $i * ($i - 1);
                    animation: gooeyEffect-#{$i} $timing 1;
                }
            }
        }
    }
}

太难解释分析了，就当是复习scss吧…

后面没啥内容了，css太难了，scss太难了…

转换成css后的代码：

body {
    
    
  background: #eaeef6;
  font-family: "Open Sans", sans-serif;
}

.navbar {
    
    
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: #fff;
  border-radius: 10px;
  padding: 1rem 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
  height: 100vh-4rem;
}
.navbar__link {
    
    
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 5.5rem;
  color: #6a778e;
  transition: 250ms ease all;
}
.navbar__link span {
    
    
  position: absolute;
  left: 100%;
  transform: translate(-3rem);
  margin-left: 1rem;
  opacity: 0;
  pointer-events: none;
  color: #406ff3;
  background: #fff;
  padding: 0.75rem;
  transition: 250ms ease all;
  border-radius: 17.5px;
}
.navbar__link:hover {
    
    
  color: #fff;
}
.navbar:not(:hover) .navbar__link:focus span, .navbar__link:hover span {
    
    
  opacity: 1;
  transform: translate(0);
}
.navbar__menu {
    
    
  position: relative;
}
.navbar__item:last-child:before {
    
    
  content: "";
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: 0;
  left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: #406ff3;
  border-radius: 17.5px;
  transition: 250ms cubic-bezier(1, 0.2, 0.1, 1.2) all;
}
.navbar__item:first-child:nth-last-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(1) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(1):last-child:hover:before, .navbar__item:first-child:nth-last-child(1) ~ li:last-child:hover:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(2):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(2) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(2):last-child:hover:before, .navbar__item:first-child:nth-last-child(2) ~ li:last-child:hover:before {
    
    
  top: 50%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(3):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(3) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 33.3333333333%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(3):last-child:hover:before, .navbar__item:first-child:nth-last-child(3) ~ li:last-child:hover:before {
    
    
  top: 66.6666666667%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(4):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 25%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(4) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 50%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(4):last-child:hover:before, .navbar__item:first-child:nth-last-child(4) ~ li:last-child:hover:before {
    
    
  top: 75%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(5):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 20%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 40%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(5) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 60%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(5):last-child:hover:before, .navbar__item:first-child:nth-last-child(5) ~ li:last-child:hover:before {
    
    
  top: 80%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(6):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 16.6666666667%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 33.3333333333%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 50%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(6) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 66.6666666667%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(6):last-child:hover:before, .navbar__item:first-child:nth-last-child(6) ~ li:last-child:hover:before {
    
    
  top: 83.3333333333%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(7):last-child:hover:before, .navbar__item:first-child:nth-last-child(7) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(7):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 14.2857142857%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 28.5714285714%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 42.8571428571%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 57.1428571429%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(7) ~ li:nth-child(6):hover ~ li:last-child:before {
    
    
  top: 71.4285714286%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(7):last-child:hover:before, .navbar__item:first-child:nth-last-child(7) ~ li:last-child:hover:before {
    
    
  top: 85.7142857143%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(8):last-child:hover:before, .navbar__item:first-child:nth-last-child(8) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(8):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 12.5%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 25%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 37.5%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 50%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(6):hover ~ li:last-child:before {
    
    
  top: 62.5%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(8) ~ li:nth-child(7):hover ~ li:last-child:before {
    
    
  top: 75%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(8):last-child:hover:before, .navbar__item:first-child:nth-last-child(8) ~ li:last-child:hover:before {
    
    
  top: 87.5%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(9):last-child:hover:before, .navbar__item:first-child:nth-last-child(9) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(9):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 11.1111111111%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 22.2222222222%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 33.3333333333%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 44.4444444444%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(6):hover ~ li:last-child:before {
    
    
  top: 55.5555555556%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(7):hover ~ li:last-child:before {
    
    
  top: 66.6666666667%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(9) ~ li:nth-child(8):hover ~ li:last-child:before {
    
    
  top: 77.7777777778%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(9):last-child:hover:before, .navbar__item:first-child:nth-last-child(9) ~ li:last-child:hover:before {
    
    
  top: 88.8888888889%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(10):last-child:hover:before, .navbar__item:first-child:nth-last-child(10) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(10):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 10%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 20%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 30%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 40%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(6):hover ~ li:last-child:before {
    
    
  top: 50%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(7):hover ~ li:last-child:before {
    
    
  top: 60%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(8):hover ~ li:last-child:before {
    
    
  top: 70%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):nth-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(10) ~ li:nth-child(9):hover ~ li:last-child:before {
    
    
  top: 80%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(10):last-child:hover:before, .navbar__item:first-child:nth-last-child(10) ~ li:last-child:hover:before {
    
    
  top: 90%;
  animation: gooeyEffect-10 250ms 1;
}
@keyframes gooeyEffect-10 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:hover ~ li:last-child:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(11):last-child:hover:before, .navbar__item:first-child:nth-last-child(11) ~ li:last-child:hover:before {
    
    
  opacity: 1;
}
.navbar__item:first-child:nth-last-child(11):nth-child(1):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(1):hover ~ li:last-child:before {
    
    
  top: 0%;
  animation: gooeyEffect-1 250ms 1;
}
@keyframes gooeyEffect-1 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(2):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(2):hover ~ li:last-child:before {
    
    
  top: 9.0909090909%;
  animation: gooeyEffect-2 250ms 1;
}
@keyframes gooeyEffect-2 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(3):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(3):hover ~ li:last-child:before {
    
    
  top: 18.1818181818%;
  animation: gooeyEffect-3 250ms 1;
}
@keyframes gooeyEffect-3 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(4):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(4):hover ~ li:last-child:before {
    
    
  top: 27.2727272727%;
  animation: gooeyEffect-4 250ms 1;
}
@keyframes gooeyEffect-4 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(5):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(5):hover ~ li:last-child:before {
    
    
  top: 36.3636363636%;
  animation: gooeyEffect-5 250ms 1;
}
@keyframes gooeyEffect-5 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(6):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(6):hover ~ li:last-child:before {
    
    
  top: 45.4545454545%;
  animation: gooeyEffect-6 250ms 1;
}
@keyframes gooeyEffect-6 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(7):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(7):hover ~ li:last-child:before {
    
    
  top: 54.5454545455%;
  animation: gooeyEffect-7 250ms 1;
}
@keyframes gooeyEffect-7 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(8):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(8):hover ~ li:last-child:before {
    
    
  top: 63.6363636364%;
  animation: gooeyEffect-8 250ms 1;
}
@keyframes gooeyEffect-8 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(9):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(9):hover ~ li:last-child:before {
    
    
  top: 72.7272727273%;
  animation: gooeyEffect-9 250ms 1;
}
@keyframes gooeyEffect-9 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):nth-child(10):hover ~ li:last-child:before, .navbar__item:first-child:nth-last-child(11) ~ li:nth-child(10):hover ~ li:last-child:before {
    
    
  top: 81.8181818182%;
  animation: gooeyEffect-10 250ms 1;
}
@keyframes gooeyEffect-10 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}
.navbar__item:first-child:nth-last-child(11):last-child:hover:before, .navbar__item:first-child:nth-last-child(11) ~ li:last-child:hover:before {
    
    
  top: 90.9090909091%;
  animation: gooeyEffect-11 250ms 1;
}
@keyframes gooeyEffect-11 {
    
    
  0% {
    
    
    transform: scale(1, 1);
  }
  50% {
    
    
    transform: scale(0.5, 1.5);
  }
  100% {
    
    
    transform: scale(1, 1);
  }
}

猜你喜欢

转载自blog.csdn.net/flow_camphor/article/details/124520624
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022