关闭边栏(ESC)打开边栏(ESC)
这种首页模板是挺多动画效果的，多种卡片切换效果。喜欢多样化的可以去折腾下，本站之前也用了这个挺久的。首页也做过了好多种了，只是看久了又觉得不好看了，又重新弄，最终还是觉得简约些好，太多效果看着眼也花花的。
自定义样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/*以下为首页动画效果全代码*/ .mydiy{overflow: hidden;} .mydiy{position: relative;overflow: hidden;box-shadow: 0 1px 1px -1px #ccc!important;} .mydiy .post-img img {transition: all 1s;margin:0} .mydiy .post-title a {color:#666;font-weight:normal} .diy-bottom { position: absolute; left:0; bottom:0; background:rgba(0,0,0,.3); width:100%;font-family: Georgia,'Microsoft JhengHei','微软雅黑' } .diy-bottom *{color:#fff!important;text-shadow: 0px 0px 3px #000;} .diy-body{ position: absolute; width: 100%; height: 100%; left:-100%; top:0; /* 这里可以灵活设，如果在main.js里设了玻璃效果这里可以不用*/ background: rgba(0,0,0,0.5); transition: all .3s; text-align: center; } .diy-body .p1{ position: absolute; width: 100%; left:-100%; margin:0; padding:0; top:35%; transform: translateY(-35%); color:#FFF; font-size: 38px; padding:0 20px; transition: all .3s .1s ease-out; cursor: pointer; z-index: 99; text-shadow: 1px 1px 5px #000;font-family: Georgia,'Microsoft JhengHei','微软雅黑' } .diy-body .p2{ position: absolute; width: 200px; left:calc(50% - 100px); bottom:-65px; color:#fff; font-size: 1.2em; padding:10px; border:1px solid #fff; border-radius: 20px; transition: all .3s,bottom 0.3s .3s ease-out; cursor: pointer; } .diy-body .p2:hover{color: #fff200;border-color: #fff200;border-radius: 10px} .diy-body .post-meta { position: absolute; width: 100%; left:-100%; margin:0; padding:0; bottom:80px; color:#FFF; font-size: 16px; padding:0 10px; transition: all 3s ease-out; } .diy-body .post-meta *{color:#fff!important} .diy-body .post-meta .post-meta-time {float: none;} @media screen and (min-width: 768px) { .mydiy .post-top,.mydiy .post-top .post-img,.mydiy .post-top .post-img img{height: 330px;} } @media screen and (max-width: 767px) { .mydiy .post-top,.mydiy .post-top .post-img,.mydiy .post-top .post-img img{height: 180px;border-radius:5px} .diy-body{display:none} .mydiy {height:180px;border-radius:0 0 5px 5px} .diy-bottom{height:60px} .mydiy .post-title{margin-top:0px!important} .mydiy .post-meta{margin-top:-14px!important} } |
复制以下代码到：content.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div class="post post-style-standard mydiy" style="background: #FFF;margin:0px 10px;margin-bottom:20px;"> <div class="post-top" style="padding:0px;"> <a class="post-img" href=" <?php echo the_permalink(); ?>"> <?php get_template_part('template-parts/thumbnail'); ?> </a> <div class="diy-bottom"> <div class="post-title" style="margin: 15px 20px 10px;font-size: 1.7em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="post-bottom hidden-xs" style="background: rgba(0,0,0,0);padding: 0 20px;margin: 0;"> <div class="post-body" style="padding: 0;margin: 0;"> <a href="<?php the_permalink(); ?>" style="padding:0px;margin: 0;line-height: 1.6;color: #888"><?php echo get_post_excerpt(); ?></a> </div> </div> <ul class="post-meta" style="padding: 10px 20px 5px;border-bottom: 0px solid #EEE;"> <li class="post-meta-author"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank"> <?php echo get_avatar( get_the_author_meta('email'), '' ); ?> <?php echo get_the_author() ?> </a> </li> <li class="post-meta-categories"> <i class="fa fa-bookmark"></i> <?php echo getOneCategory(get_the_category()); ?> </li> <li class="post-meta-view"> <i class="fa fa-eye"></i> <?php echo getPostViews(get_the_ID()); ?> </li> <li class="post-meta-time"><i class="fa fa-clock-o"></i> <?php echo ''.timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) ); ?> </li> <li class="post-meta-like"> <i class="fa fa-thumbs-o-up"></i> <span class="count"> <?php if(get_post_meta($post->ID,'bigfa_ding',true)): ?> <?php echo get_post_meta($post->ID,'bigfa_ding',true); ?> <?php else: ?> <?php echo '0'; ?> <?php endif; ?> </span> </li> </ul> </div> <a href="<?php the_permalink(); ?>"> <div class="diy-body"> <p class="p1"><?php the_title(); ?></p> <p class="p2">阅读全文</p> </div></a> </div> </div> |
main.js中添加以下代码，在加载更多加也要引用这个函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function postDiy(){ //首页效果 if($(window).width()>767){ $('.mydiy').mouseenter(function(){ $(this).find('.diy-bottom').stop().animate({bottom:'-180px'}); $(this).find('.post-img').find('img').css({transform: 'scale(2)'}); $(this).find('.diy-body').css({'left':'0'}); $(this).find('.p1').css('left','0'); $(this).find('.p2').css('bottom','0'); $(this).find('.diy-body').find('.p2').after($(this).find('.post-meta').clone()); $(this).find('.diy-body').find('.post-meta').css({left:'0'}); }) $('.mydiy').mouseleave(function(){ $(this).find('.diy-body').find('.post-meta').remove(); $(this).find('.p2').css('bottom','-65px'); $(this).find('.p1').css('left','-100%'); $(this).find('.diy-body').css({'left':'-100%'}) $(this).find('.post-img').find('img').css({transform: 'scale(1)'}); $(this).find('.diy-bottom').stop().animate({bottom:'0px'}); }) } } |
