I can't see what's wrong...but the div is not rotating
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
<style type="text/css">
.rotate
{
margin:121px 149px;
width:483px;
height:298px;
background:#676470;
color:#fff;
font-family:Tahoma;
font-size:2em;
text-align:center;
transition:all 5s ease;
-webkit-transform: rotateZ(-3240deg);
-ms-transform: rotateZ(-3240deg);
transform: rotateZ(-3240deg);
}
.rotate div {
padding-top: 3em;
}
.rotate:active
{
}
</style>
</head>
<body>
<div class="rotate"><div>Hello</div></div>
</body>
</html>
What you're looking for is called CSS3 animations.
Here's a demo of your example:
CODE SNIPPET:
.rotate {
margin: 121px 149px;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Tahoma;
font-size: 2em;
text-align: center;
animation: rotateZ 5s;
}
.rotate div {
padding-top: 3em;
}
#keyframes rotateZ {
to {
transform: rotateZ(-3240deg);
}
}
<div class="rotate">
<div>Hello</div>
</div>
JSFIDDLE
Related
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
I've recently been working on a project which involves a heavyloaded webpage,
it loads the files in the background and then eventually will allow them to disappear after a certain amount of time,
I have tried my hardest to do some research but with many attempts I have not come to a usable conclusion. I'd love it if you could possibly help out,
I will probably edit my code later but for now im just using that codepen.io overused loading square, for your information.
If you can help, it'll be greatly appreciated, Here's my code.
Html
<!DOCTYPE html>
<html>
<head>
<style>html { overflow-y: hidden; }</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
s$("div.formSentMsg").delay(3200).fadeOut(300)
</script>
<div><center><i><p>Loading</p></i></center></div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div><span class="loader"><span class="loader-inner"></span></span></div>
</body>
</html>
Css
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
I understand,
As probably one of you it might be extremely easy for you to achieve this but when i receive your inputit's greatly appreciated and it helps me learn for future references,
Thanks. - David
Just remove the element that contains the loading stuff once all of your assets have loaded. I gave the loading element an ID (#loadingEl) and am using jQuery to remove it on $(window).on('load'...
body,
html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
<!DOCTYPE html>
<html>
<head>
<style>
html { overflow-y: hidden; }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("div.formSentMsg").delay(3200).fadeOut(300);
</script>
<div>
<center><i><p>Loading</p></i></center>
</div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="loadingEl"><span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on('load',function() {
$('#loadingEl').remove();
})
</script>
</body>
</html>
my question is related to this question parallax menu scrolling
I am trying to the same thing.
But, due to some issue, its not working. I think I am choosing the wrong id and class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNAPCHAT</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/scrip.js"></script>
<script src="js/jquery.nicescroll.js"></script>
</head>
<body>
<a id="#nav1"></a>
<a id="#nav2"></a>
<a id="#nav3"></a>
<a id="#nav4"></a>
Back to Top
<div id="nav">
<!-- <div id="logo"><img src=""></div> -->
<ul>
<li>Home</span></li>
<li>Sponsored Snapchat</li>
<li>Snapchat Content</li>
<li>Display Ads</li>
<li>Media Central</li>
</ul>
</div id="main">
<div id="#nav1" class="image" data-stellar-background-ratio="0.5" >
<!-- <div id="content_1" class="content1">
-->
</div>
</div>
</div>
<div id="#nav2" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content2">
-->
</div>
<div id="#nav3" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content3">
-->
</div>
<div id="#nav4" class="image" data-stellar-background-ratio="0.4" ></div>
<!-- <div id="content_1" class="content4">
-->
</div>
<script type="text/javascript">
// create the back to top button
$('body').prepend('Back to Top');
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
</body>
</html>
this is my css
body{
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
background-color: #fffc00;
}
.image {
height: 750px;
width: 100%;
/*background: #55e6c5;*/
}
.content {
height: 750px;
width:100%;
/* background: white;*/
z-index: 2;
}
.content h1 {
font-size: 40px;
color: #464646;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
margin: 30px 60px;
}
.content p {
font-size:20px;
color: #343434;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin: 30px 60px;
}
#nav1 {
background: url(../images/bg1.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav2 {
background: url(../images/bg2.png);
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav3 {
background: url(../images/bg3.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav4 {
background: url(../Images/bg4.png) ;
background-attachment: fixed;
position: relative;
height: 130%0%;
padding:80px 80px 0 80px ;
text-align:center;
width: 100%;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav {
height: 70px;
width: 100%;
position: fixed;
top:5px;
left:0;
background: #00000;
z-index: 100;
}
a[id= "#nav1"]:target ~ #main div.image {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "#nav2"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav3"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "#nav4"]:target ~ #main div.image {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
/*#nav #logo {
height: 50px;
width: 50px;
position: relative;
top: 0;
bottom:0;
margin: auto 100px;
text-align: left;
}*/
#nav #logo img {
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.6;
filter: alpha(opacity=60)
}
li {
float: left;
padding-left:80px;
}
li a {
display: inline-block;
color: #fffc00;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #fff;
}
a.back-to-top {
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #333 url("../images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/*#content_1 {position: relative;}*/
Please help me.
this is my code https://jsfiddle.net/vrg9qmp1/
Don't use # when defining an id attribute, only when referencing it in href or css selector. And only use the same id on a single element. So remove the a elements in the very beginning of your body, since you use the same ids later on.
This will not work.
<div id="#nav1">
<a href="nav1">
This will work:
<div id="nav1">
<a href="#nav1">
I write my code like this: https://jsfiddle.net/9dgjkc9r/
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
<div class="question"></div>
But it doesn't have a fade in and fade out because when I move the mouse in another position it's displayed an ugly movement. I don't know how to add them.
Just start the transition from the initial position and break the transition down into 4 keyframes like so:
0% {
-webkit-transform: rotate(0deg)
}
25% {
-webkit-transform: rotate(-3deg)
}
75% {
-webkit-transform: rotate(3deg)
}
100% {
-webkit-transform: rotate(0deg)
}
Here is the JSFiddle demo
(At least what I understood u wanted :) )
is this what you want.copy full code and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
$("div.question").mouseenter(function(){
$(this).fadeOut(1000).fadeIn(1000);
});
});
</script>
</body>
</html>
or if you want to do fadein and out infinite time, then try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
check(1000);
});
function check(i)
{
$(".question").fadeOut(1000).fadeIn(1000);
setTimeout("check()",i);
}
</script>
</body>
</html>
Hi I was trying to get my navigation bar to collapse on smaller screen size I am trying to do this without bootstrap any suggestions?
HTML
<html>
<head>
<title></title>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel='stylesheet' type='text/css'>
<!-- JavaScript's -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('#loading').delay(3000).fadeOut('slow');
});
</script>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div id="object"></div>
</div>
</div>
</div>
<!-- Loading Section Ends -->
<div class="header">
<nav class="nav_first">
<img class="nike" src="http://s3.amazonaws.com/nikeinc/assets/7366/Nike_Swoosh_Logo_White_original.jpg?1328660973">
<ul>
<li class="wiggle" class="wiggle" class="wiggle" class="wiggle">Home</li>
<li class="wiggle" class="wiggle" class="wiggle">About Us</li>
<li class="wiggle" class="wiggle">Shop</li>
<li class="wiggle">Contact</li>
</ul>
</nav>
</div>
<div class="wrapper">
<div>
<h1 id="nike_text">Nike</h1>
</div>
</div>
</body>
</html>
CSS
body {
width: auto;
height: auto;
font-size:14px;
margin:0;
background-color:black;
}
#loading {
display:none;
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
#-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
#keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
/* SASU - Navigation Bar */
.nav_first{
overflow:none;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.nav_first li{
display:inline;
}
.nav_first a{
margin-top:25px;
font-size: 30px;
letter-spacing: 3px;
font-weight:900;
margin-left:40px;
margin-right:40px;
font-family: 'Montserrat';
text-decoration: none;
display:inline-block;
padding:10px;
}
.nav_first a:hover {
color:white;
font-size:35px;
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(4deg);
}
50% {
-webkit-transform:rotate(-4deg);
}
100% {
-webkit-transform:rotate(4deg);
}
}
.wiggle:hover {
-webkit-animation: wiggle 0.5s infinite;
}
.active {background-color:orangered;}
img{
float:left;
margin:0 auto;
padding:0 auto;
}
/* Middle Section */
.nike {
display: block;
margin:auto;
height:115px;
}
#nike_text {
font-family:'Montez';
font-size:80px;
text-align: center;
color:white;
margin:auto;
letter-spacing: 2px;
}