more fluid animations

This commit is contained in:
William Zhang 2017-07-13 12:30:52 -04:00
parent a45289b544
commit 7e29e32e43
7 changed files with 17 additions and 15 deletions

View File

@ -19,7 +19,7 @@
<body> <body>
<header> <header>
<div id="banner"> <div id="banner">
<button id="menu-toggle" class="fluid"> <button id="menu-toggle">
<i></i> <i></i>
</button> </button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1> <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>

View File

@ -19,6 +19,7 @@ header {
vertical-align: middle; vertical-align: middle;
font-size: 3em; font-size: 3em;
font-weight: bold; font-weight: bold;
overflow: hidden;
} }
#menu-toggle { #menu-toggle {
@ -29,7 +30,7 @@ header {
} }
#menu-toggle:active { #menu-toggle:active {
background-color: #BDBDBD; background-color: #e0e0e0;
} }
#menu-toggle>i { #menu-toggle>i {

View File

@ -33,11 +33,11 @@ body {
} }
.fluid { .fluid {
-webkit-transition: all .2s ease; -webkit-transition: all .1s ease;
-moz-transition: all .2s ease; -moz-transition: all .1s ease;
-ms-transition: all .2s ease; -ms-transition: all .1s ease;
-o-transition: all .2s ease; -o-transition: all .1s ease;
transition: all .2s ease; transition: all .1s ease;
} }
.fluid-slow { .fluid-slow {

View File

@ -79,6 +79,7 @@
display: block; display: block;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
transition: all 130ms ease;
} }
#menu-toggle { #menu-toggle {
display: block; display: block;

View File

@ -18,7 +18,7 @@
<body> <body>
<header> <header>
<div id="banner"> <div id="banner">
<button id="menu-toggle" class="fluid"> <button id="menu-toggle">
<i></i> <i></i>
</button> </button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1> <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>

View File

@ -18,23 +18,23 @@
<body> <body>
<header> <header>
<div id="banner"> <div id="banner">
<button id="menu-toggle" class="fluid"> <button id="menu-toggle">
<i></i> <i></i>
</button> </button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1> <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
</div> </div>
<nav id="menu" class="fluid"> <nav id="menu">
<a class="menu-item" href="index.html"> <a class="menu-item" href="index.html">
<button class="menu-item fluid">Home</button> <button class="menu-item">Home</button>
</a> </a>
<a class="menu-item" href="about.html"> <a class="menu-item" href="about.html">
<button class="menu-item fluid">About</button> <button class="menu-item">About</button>
</a> </a>
<a class="menu-item" href="resources.html"> <a class="menu-item" href="resources.html">
<button class="menu-item fluid">Resources</button> <button class="menu-item">Resources</button>
</a> </a>
<a class="menu-item" href="forms.html"> <a class="menu-item" href="forms.html">
<button class="menu-item fluid">Forms</button> <button class="menu-item">Forms</button>
</a> </a>
</nav> </nav>
<div id="dome"> <div id="dome">

View File

@ -18,7 +18,7 @@
<body> <body>
<header> <header>
<div id="banner"> <div id="banner">
<button id="menu-toggle" class="fluid"> <button id="menu-toggle">
<i></i> <i></i>
</button> </button>
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1> <h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>