不建议跳跃阅读!
这篇文章将从头开始介绍如何实现一个特效
中间偶尔会穿插一些css3或平时接触不多的css属性
首先看一看这一期的特效:
在介绍这一期的特效之前,首先需要知道两个必要的环境配置,否则无法在本地运行这个特效。
环境配置
平时在项目中我会使用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
-
由于scss需要转化为css才能够使用,所以我们在制作特效前先安装一下scss:
npm install sass
-
将scss文件转为css文件,以文件index.scss为例
sass index.scss index.css
-
监听scss文件变化,自动转为css文件,可以直接在html中引用css
sass --watch index.scss:index.css
-
live-server的安装,它可以在本地开启一个模拟服务器,当我们修改代码时,页面可以同时改变
npm install -g live-server
-
右键点击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
orfeather.min.js
into your project directory. You don’t need bothfeather.js
andfeather.min.js
.2. Include
Include
feather.js
orfeather.min.js
with a<script>
tag:<script src="path/to/dist/feather.js"></script>
Note:
feather.js
andfeather.min.js
are located in thedist
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 theirdata-feather
attribute value. See the API Reference for more information aboutfeather.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);
}
}