<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3唱片滑动效果 - 网页模板</title>
<link href="css/global.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/zurb.mega-drop.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Place all stylesheet code here */
@font-face {
font-family: 'Chunky';
src: local('ChunkFive'), local('ChunkFive'),
url(img/Chunkfive.ttf) format('truetype');
}
@font-face {
font-family: 'Daniel';
src: local('Daniel'), local('Daniel'),
url(img/daniel.ttf) format('truetype');
}
@font-face {
font-family: 'Deftone';
src: local('DEFTONE'), local('DEFTONE'),
url(img/DEFTONE.ttf) format('truetype');
}
body { background: #fff url(img/wood-oak.jpg); }
div#wrapper { background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), color-stop(.75, transparent)); }
div#content a { color: #fff; font-weight: bold; }
div#content a:hover { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.5); }
h1, h2, h3, h4, h5, h6, p { text-shadow: 0 1px 1px rgba(0,0,0,.5); }
h1, h2, h3, h4, h5, h6 { color: #; }
h2 { margin-bottom: 0; }
p { font-size: 14px; line-height: 20px; margin-bottom: 20px; color: #; }
p small { display: block; font-size: 12px; line-height: 18px; color: #; }
div#footer { padding: 0 0 36px; }
div#pageHeader h1, div#pageHeader p { font-family: "Myriad Pro", Helvetica Neue, Arial, sans-serif; text-shadow: 0 3px 6px rgba(0,0,0,.75); color: #fff; }
div#pageHeader h1 { font-size: 72px; margin-bottom: 4px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
}
div#pageHeader p { font-size: 24px; line-height: 24px; margin-right: 25%; margin-bottom: 20px; opacity: .85; }
div#pageHeader p small { font-size: 14px; line-height: 18px; color: #fff; opacity: .5; }
div.zurb.divider { background-image: url(img/zurb-divider.png); }
pre { background: #f5f5f5; margin: 0 0 18px; padding: 13px 18px 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px 1px #fff; font-size: 11px; line-height: 16px; }
code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }
/* -------------------------------------------------- */
div#header a img { opacity: .5; }
div#header a:hover img { opacity: 1; }
ul.tunes { margin-left: -20px; }
ul.tunes li { position: relative; width: 200px; height: 190px; float: left; margin-left: 20px; }
ul.tunes li div.album { margin: 0 0 48px 0; display: inline; background: #; width: 200px; height: 120px; position: absolute; text-decoration: none; -webkit-transition: all .15s linear; color: #333; left: 0px; top: 0px; }
ul.tunes img { width: 120px; position: relative; z-index: 30; float: left; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -webkit-border-radius: 2px; }
ul.tunes li div.album div { display: block; opacity: .95; text-align: center; -webkit-transition: all .25s linear; clear: left; width: 120px; }
ul.tunes li div.album div h5 { text-align: center; }
ul.tunes li div.album:hover div { opacity: 1; }
ul.tunes li div.album span.vinyl { width: 116px; height: 116px; z-index: 1; display: block; -webkit-transition: all .25s linear; position: absolute; top: 2px; left: 2px; margin-left: 16px; }
ul.tunes li div.album span.vinyl div {
position: absolute;
top: 2px;
left: 2px;
display: block;
z-index: 10;
width: 112px;
height: 112px;
-webkit-border-radius: 59px;
-moz-border-radius: 59px;
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
-webkit-transition: all .25s linear;
overflow: hidden;
border: solid 1px black;
background:
-webkit-gradient(
linear, left top, left bottom,
from(transparent),
color-stop(0.1, transparent),
color-stop(0.5, rgba(255,255,255,0.25)),
color-stop(0.9, transparent),
to(transparent)),
-webkit-gradient(
radial, 56 56, 10, 56 56, 114,
from(transparent),
color-stop(0.01, transparent),
color-stop(0.021, rgba(0,0,0,1)),
color-stop(0.09, rgba(0,0,0,1)),
color-stop(0.1, rgba(28,28,28,1)),
to(rgba(28,28,28,1)));
border-top: 1px solid rgba(255,255,255,.25);
}
ul.tunes li div.album:hover span.vinyl { -webkit-transform: translateX(60px); }
ul.tunes li div.album:hover span.vinyl div { -webkit-transform: rotate(120deg); border-top: 0; border-left: 1px solid rgba(255,255,255,.25); }
ul.tunes li span.gloss { display: block; position: absolute; top: 0; left: 0; width: 120px; height: 120px; background: url(img/sheen3.png) no-repeat; z-index: 100; }
ul.tunes li div.album ul.actions { display: block; position: absolute; width: 60px; -moz-border-radius: 3px; -webkit-border-radius: 3px;left: 35px; top: 0px; height: 114px; z-index: 20; -webkit-transition: all 0.25s linear; }
ul.tunes li div.album:hover ul.actions { -webkit-transform: translateX(60px); }
ul.tunes li div.album ul.actions li { display: block; position: absolute; height: 20px; width: 20px; left: 10px; top: 22px; background: -webkit-gradient(linear, left top, left bottom, from(black), to(#333)); -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.15); }
ul.tunes li div.album ul.actions li:hover { background: -webkit-gradient(linear, left top, left bottom, from(#333), to(black)); }
ul.tunes li div.album ul.actions li.info { top: 48px; left: 19px; }
ul.tunes li div.album ul.actions li a { display: block; width: 20px; height: 20px; }
ul.tunes li div.album ul.actions li.play-pause a { background: url(img/play-button.png) no-repeat center center; }
ul.tunes li div.album ul.actions li.info a { background: url(img/info.png) no-repeat center center; }
ul.tunes li { text-shadow: 0 2px 3px rgba(0,0,0,.75); }
ul.tunes h5 { padding-top: 8px; color: #fff; }
ul.tunes small { color: #fff; opacity: .75; }
</style>
</head>
<body id="slidingVinylPage" class=" ">
<div class="container" id="megaDrop">
<div class="mobile-main-nav-padding">
<div class="row">
<div class="tablet-padding">
<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="foundation">
</div>
<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="apps">
</div>
<div class="show-on-phones"><br /><br /></div>
<div class="three columns property" id="expo">
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="container" class="container">
<div id="content">
<div id="pageHeader">
<h1></h1>
<p></p>
</div>
<ul class="tunes">
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-thriller.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Michael Jackson</h5>
<small>Thriller</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-bad.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</ul>
<div>
<h5>Michael Jackson</h5>
<small>Bad</small>
</div>
<span class="gloss"></span>
</div>
</li>
<li>
<div class="album">
<a href=""><img src="img/michael-jackson-off-the-wall.jpg" /></a>
<span class="vinyl">
<div></div>
</span>
<ul class="actions">
<li class="play-pause"><a href=""></a></li>
<li class="info"><a href=""></a></li>
</