@keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } .fadeinup { -webkit-animation-name: fadeinup; animation-name: fadeinup; } .animated { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /** 列表 **/ article { position: relative; width: 540px; float: left; background: #fff; margin: 0 20px 20px 0; padding: 20px; border: 1px solid #ddd; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); border-radius: 2px; visibility: visible; animation-delay: 0.3s; animation-name: fadeinup; } article.even { margin-right: 0; } .title { text-align: center; padding: 30px; margin: 20px auto; font-size: 40px; } .thumbnail { position: relative; float: left; max-width: 200px; height: auto; clear: both; margin: 1px 20px 0 0; overflow: hidden; transition-duration: .5s; } .thumbnail a img { float: left; width: auto; height: auto; max-width: 100%; -webkit-transition: -webkit-transform .3s linear; -moz-transition: -moz-transform .3s linear; -o-transition: -o-transform .3s linear; transition: transform .3s linear; } .thumbnail:hover a img { transition: all 0.7s ease; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); } .thumbnail .cat { position: absolute; top: 0; left: 0; background: #c40000; color: #fff; line-height: 28px; padding: 0 10px; } .entry-header h2 { margin: 0 0 5px 0; } .entry-header h2 a { font-size: 16px; line-height: 20px; } .archive-content { color: #777; } .title-l { position: absolute; background: #c40000; top: 21px; left: -1px; width: 5px; height: 28px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .entry-meta { position: absolute; bottom: 14px; color: #999; left: 240px; } .entry-more a { position: absolute; bottom: 18px; right: -1px; background: #3690cf; color: #fff !important; line-height: 30px; padding: 0 12px; display: block; border-radius: 2px 0 0 2px; } .entry-more a:hover { background: #2f7fb7; } /* 页码 */ .page{line-height:14px;clear:both;overflow:hidden;padding:30px 0; text-align: right;background: #fff;} .page a{border:1px solid #5ba1ef;padding:7px 12px;display:inline-block;color:#2676c8;font-size: 14px;} .page a:hover{text-decoration:none;} .page a:hover,.page .p_pagecur{background-color:#2676c8; text-decoration:none;color:#fff;} .page .p_pagecur{font-weight:bold;margin-left: 4px;} .page .p_pagenext{padding:7px 10px 7px 10px;} .page span,.page input,.page a{vertical-align:middle;} .page var{border:1px solid #c0c0c0;display:inline-block;width:36px;height:28px;margin-left:10px;}