CSS
语言:
CSSSCSS
确定
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
* {
padding: 0;
margin: 0; }
html, body {
height: 100%;
font-family: 'Yanone Kaffeesatz', sans-serif;
letter-spacing: 0.1em; }
.header {
position: fixed;
background: #fff;
right: 0;
left: 0;
height: 50px;
z-index: 10;
top: 0;
line-height: 53px; }
.header-title, .btn {
margin: 0px 10px;
text-transform: uppercase; }
.btn {
border: 1px solid #000;
padding: 2px 6px;
font-size: 14px;
top: -2px;
position: relative;
cursor: pointer; }
.btn:hover, .btn.active {
color: #fff;
background: #000; }
.posts {
height: 100%;
width: 100%;
top: 50px;
position: absolute;
white-space: nowrap; }
.overlay {
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
pointer-events: none;
-webkit-transition: transform 0.3s;
-moz-transition: transform 0.3s;
transition: transform 0.3s; }
.posts:hover .overlay {
opacity: 0.3; }
.post {
position: relative;
z-index: 0;
color: #fff;
min-height: 100px; }
.post .more {
letter-spacing: 0;
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s; }
.post:hover {
z-index: 5; }
.post:hover .more {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px); }
.horizontal .post {
width: 100%; }
.horizontal .content {
padding: 20px 10px; }
.vertical .post {
width: 220px;
height: 100%;
display: inline-block;
vertical-align: top; }
.vertical .content {
padding: 20px;
white-space: normal; }
.post .content {
z-index: 2;
position: relative;
font-family: 'Open Sans', sans-serif;
pointer-events: none; }
.bg {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
-webkit-transition: transform 0.3s;
-moz-transition: transform 0.3s;
transition: transform 0.3s; }
h3 {
font-weight: normal;
font-size: 20px;
font-family: 'Yanone Kaffeesatz', sans-serif; }
.author {
font-size: 12px; }
.post-link {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.horizontal .post:hover .bg {
-webkit-transform: scaleY(1.3);
-moz-transform: scaleY(1.3);
-ms-transform: scaleY(1.3);
-o-transform: scaleY(1.3);
transform: scaleY(1.3); }
.vertical .post:hover .bg {
-webkit-transform: scaleX(1.2);
-moz-transform: scaleX(1.2);
-ms-transform: scaleX(1.2);
-o-transform: scaleX(1.2);
transform: scaleX(1.2); }