Instantly share code, notes, and snippets.
Created
June 13, 2018 15:54
-
Star
(1)
1
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save aminou7/173ed7db3820eab4ea9f7e3fac9f1962 to your computer and use it in GitHub Desktop.
navigation animation css-effects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<-------------- amindesigne.blogspot.com ---------------> | |
<style> | |
@import 'https://fonts.googleapis.com/css?family=Raleway'; | |
div.container | |
{ | |
font-family: Raleway; | |
margin: 0 auto; | |
padding: 10em 3em; | |
text-align: center; | |
} | |
div.container a | |
{ | |
color: #FFF; | |
text-decoration: none; | |
font: 20px Raleway; | |
margin: 0px 10px; | |
padding: 10px 10px; | |
position: relative; | |
z-index: 0; | |
cursor: pointer; | |
} | |
.red | |
{ | |
background: #f44336; | |
} | |
.purple | |
{ | |
background: #673ab7; | |
} | |
.indigo | |
{ | |
background: #3f51b5; | |
} | |
.blue | |
{ | |
background: #2196f3; | |
} | |
.cyan | |
{ | |
background: #00bcd4; | |
} | |
.teal | |
{ | |
background: #009688; | |
} | |
.green | |
{ | |
background: #4caf50; | |
} | |
.lightGreen | |
{ | |
background: #8bc34a; | |
} | |
.lime | |
{ | |
background: #c0ca33; | |
} | |
.yellow | |
{ | |
background: #fdd835; | |
} | |
.amber | |
{ | |
background: #ffc107; | |
} | |
.orange | |
{ | |
background: #ff9800 | |
} | |
.deepOrange | |
{ | |
background: #ff5722; | |
} | |
.brown | |
{ | |
background: #795548; | |
} | |
.gray | |
{ | |
background: #9e9e9e; | |
} | |
/* Top and Bottom borders go out */ | |
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after | |
{ | |
position: absolute; | |
right: 0px; | |
width: 100%; | |
height: 2px; | |
background: #FFF; | |
content: ""; | |
opacity: 0; | |
transition: all 0.3s; | |
} | |
div.topBotomBordersOut a:before | |
{ | |
top: 0px; | |
transform: translateY(10px); | |
} | |
div.topBotomBordersOut a:after | |
{ | |
bottom: 0px; | |
transform: translateY(-10px); | |
} | |
div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after | |
{ | |
opacity: 1; | |
transform: translateY(0px); | |
} | |
/* Top and Bottom borders come in */ | |
div.topBotomBordersIn a:before, div.topBotomBordersIn a:after | |
{ | |
position: absolute; | |
right: 0px; | |
width: 100%; | |
height: 2px; | |
background: #FFF; | |
content: ""; | |
opacity: 0; | |
transition: all 0.3s; | |
} | |
div.topBotomBordersIn a:before | |
{ | |
top: 0px; | |
transform: translateY(-10px); | |
} | |
div.topBotomBordersIn a:after | |
{ | |
bottom: 0px; | |
transform: translateY(10px); | |
} | |
div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after | |
{ | |
opacity: 1; | |
transform: translateY(0px); | |
} | |
/* Top border go down and Left border appears */ | |
div.topLeftBorders a:before | |
{ | |
position: absolute; | |
top: 0px; | |
right: 0px; | |
width: 2px; | |
height: 0px; | |
background: #FFF; | |
content: ""; | |
opacity: 1; | |
transition: all 0.3s; | |
} | |
div.topLeftBorders a:after | |
{ | |
position: absolute; | |
top: 0px; | |
right: 0px; | |
width: 100%; | |
height: 2px; | |
background: #FFF; | |
content: ""; | |
opacity: 1; | |
transition: all 0.3s; | |
} | |
div.topLeftBorders a:hover:before | |
{ | |
height: 100%; | |
} | |
div.topLeftBorders a:hover:after | |
{ | |
opacity: 0; | |
top: 100%; | |
} | |
/* Circle behind */ | |
div.circleBehind a:before, div.circleBehind a:after | |
{ | |
position: absolute; | |
top: 22px; | |
right: 50%; | |
width: 50px; | |
height: 50px; | |
border: 4px solid #0277bd; | |
transform: translateX(-50%) translateY(-50%) scale(0.8); | |
border-radius: 50%; | |
background: transparent; | |
content: ""; | |
opacity: 0; | |
transition: all 0.3s; | |
z-index: -1; | |
} | |
div.circleBehind a:after | |
{ | |
border-width: 2px; | |
transition: all 0.4s; | |
} | |
div.circleBehind a:hover:before | |
{ | |
opacity: 1; | |
transform: translateX(-50%) translateY(-50%) scale(1); | |
} | |
div.circleBehind a:hover:after | |
{ | |
opacity: 1; | |
transform: translateX(-50%) translateY(-50%) scale(1.3); | |
} | |
/* Brackets go out */ | |
div.brackets a:before, div.brackets a:after | |
{ | |
position: absolute; | |
opacity: 0; | |
font-size: 35px; | |
top: 0px; | |
transition: all 0.3s; | |
} | |
div.brackets a:before | |
{ | |
content: '('; | |
right: 0px; | |
transform: translateX(10px); | |
} | |
div.brackets a:after | |
{ | |
content: ')'; | |
right: 0px; | |
transform: translateX(-10px); | |
} | |
div.brackets a:hover:before, div.brackets a:hover:after | |
{ | |
opacity: 1; | |
transform: translateX(0px); | |
} | |
/* Border from Y to X */ | |
div.borderYtoX a:before, div.borderYtoX a:after | |
{ | |
position: absolute; | |
opacity: 0.5; | |
height: 100%; | |
width: 2px; | |
content: ''; | |
background: #FFF; | |
transition: all 0.3s; | |
} | |
div.borderYtoX a:before | |
{ | |
right: 0px; | |
top: 0px; | |
} | |
div.borderYtoX a:after | |
{ | |
right: 0px; | |
bottom: 0px; | |
} | |
div.borderYtoX a:hover:before, div.borderYtoX a:hover:after | |
{ | |
opacity: 1; | |
height: 2px; | |
width: 100%; | |
} | |
/* Border X get width */ | |
div.borderXwidth a:before, div.borderXwidth a:after | |
{ | |
position: absolute; | |
opacity: 0; | |
width: 0%; | |
height: 2px; | |
content: ''; | |
background: #FFF; | |
transition: all 0.3s; | |
} | |
div.borderXwidth a:before | |
{ | |
right: 0px; | |
top: 0px; | |
} | |
div.borderXwidth a:after | |
{ | |
right: 0px; | |
bottom: 0px; | |
} | |
div.borderXwidth a:hover:before, div.borderXwidth a:hover:after | |
{ | |
opacity: 1; | |
width: 100%; | |
} | |
/* Pull down */ | |
div.pullDown a:before | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
right: 0px; | |
top: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullDown a:hover:before | |
{ | |
height: 100%; | |
} | |
/* Pull up */ | |
div.pullUp a:before | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
right: 0px; | |
bottom: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullUp a:hover:before | |
{ | |
height: 100%; | |
} | |
/* Pull right */ | |
div.pullRight a:before | |
{ | |
position: absolute; | |
width: 2px; | |
height: 100%; | |
right: 0px; | |
top: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullRight a:hover:before | |
{ | |
width: 100%; | |
} | |
/* Pull left */ | |
div.pullLeft a:before | |
{ | |
position: absolute; | |
width: 2px; | |
height: 100%; | |
right: 0px; | |
top: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullLeft a:hover:before | |
{ | |
width: 100%; | |
} | |
/* Pull up and down */ | |
div.pullUpDown a:before, div.pullUpDown a:after | |
{ | |
position: absolute; | |
width: 100%; | |
height: 2px; | |
right: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullUpDown a:before | |
{ | |
top: 0px; | |
} | |
div.pullUpDown a:after | |
{ | |
bottom: 0px; | |
} | |
div.pullUpDown a:hover:before, div.pullUpDown a:hover:after | |
{ | |
height: 100%; | |
} | |
/* Pull right and left */ | |
div.pullRightLeft a:before, div.pullRightLeft a:after | |
{ | |
position: absolute; | |
width: 2px; | |
height: 100%; | |
top: 0px; | |
content: ''; | |
background: #FFF; | |
opacity: 0.3; | |
transition: all 0.3s; | |
} | |
div.pullRightLeft a:before | |
{ | |
right: 0px; | |
} | |
div.pullRightLeft a:after | |
{ | |
right: 0px; | |
} | |
div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after | |
{ | |
width: 100%; | |
} | |
/* Highlight text out */ | |
div.highlightTextOut a | |
{ | |
color: rgba(255, 255, 255, 0.3); | |
} | |
div.highlightTextOut a:before, div.highlightTextIn a:before | |
{ | |
position: absolute; | |
color: #FFF; | |
top: 0px; | |
right: 0px; | |
padding: 10px; | |
overflow: hidden; | |
content: attr(alt); | |
transition: all 0.3s; | |
transform: scale(0.8); | |
opacity: 0; | |
} | |
div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before | |
{ | |
transform: scale(1); | |
opacity: 1; | |
} | |
/* Highlight text in */ | |
div.highlightTextIn a | |
{ | |
color: rgba(0, 0, 0, 0.4); | |
} | |
div.highlightTextIn a:before | |
{ | |
transform: scale(1.2); | |
} | |
</style> | |
<br /> | |
<div class="container red topBotomBordersOut"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container purple topBotomBordersIn"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container teal borderYtoX"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container green borderXwidth"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container lightGreen pullDown"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container lime pullUp"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container yellow pullRight"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container amber pullLeft"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container orange pullUpDown"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> | |
<div class="container deepOrange pullRightLeft"> | |
<div style="text-align: center;"> | |
<a href="https://www.blogger.com/">الرئيسية</a> | |
<a href="https://www.blogger.com/">تقنية</a> | |
<a href="https://www.blogger.com/">برمجة</a> | |
<a href="https://amindesigne.blogspot.com/">امين ديزاين</a> | |
<a href="https://www.blogger.com/">html</a> | |
<a href="https://www.blogger.com/">css</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment