<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3 Full Background Slider</title>
<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<style type="text/css">
html,body {
height: %;
}
img.bg {
min-height: %;
min-width: 1024px;
width: %;
height: auto !important;
height: %;
position: fixed;
left: ;
z-index:;
}
.slider{
position: absolute;
bottom: 10px;
text-align: center;
width: %;
z-index: ;
font-size: .5em;
}
.slideLeft:target {
-webkit-animation-name: slideLeft;
-webkit-animation-duration: 1s;
z-index: ;
}
@-webkit-keyframes 'slideLeft' {
% { -webkit-transform: rotate(-360deg) scale(0.1); }
% { -webkit-transform: none; }
}
@-moz-keyframes 'slideLeft' {
% { -moz-transform: rotate(-360deg) scale(0.1); }
% { -moz-transform: none; }
}
@-ms-keyframes 'slideLeft' {
% { -ms-transform: rotate(-360deg) scale(0.1); }
% { -ms-transform: none; }
}
@-o-keyframes 'slideLeft' {
% { -o-transform: rotate(-360deg) scale(0.1); }
% { -o-transform: none; }
}
@keyframes 'slideLeft' {
% { transform: rotate(-360deg) scale(0.1); }
% { transform: none; }
}
.slideBottom:target {
z-index: ;
}
.zoomIn:target {
z-index: ;
}
.zoomOut:target {
z-index: ;
}
.rotate:target {
z-index: ;
}
</style>
</head>
<body>
<section class="demo">
<div class="slider">
<ul class="clearfix">
<li><a href="#bg1">Hipster Fashion Haircut </a></li>
<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
<li><a href="#bg3">My haire is sooo fantastic!</a></li>
<li><a href="#bg4">Eat healthy & excersice!</a></li>
<li><a href="#bg5">Lips so kissable I could die ...</a></li>
</ul>
</div>
<img src="bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
<img src="bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
<img src="bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
<img src="bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
<img src="bg5.jpg" alt="" class="bg rotate" id="bg5" />
</section>
</body>
</html>