关闭边栏(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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/*以下为首页动画效果全代码*/ .mydiy{overflow: hidden;} .mydiy{position: relative;overflow: hidden;box-shadow: 0 1px 1px -1px #ccc!important;} .mydiy .post-img img {transition: all .3s;border-radius:3px;} .diy-bottom { position: absolute; left:0; bottom:0; background: #fff; width:100% } .diy-body{ position: absolute; width: 100%; height: 100%; left:-100%; top:0; /* 这里可以灵活设，如果在main.js里设了玻璃效果这里可以不用*/ background: rgba(0,0,0,0); transition: all .3s; text-align: center; } .diy-body .p1{ position: absolute; width: 100%; left:-100%; margin:0; padding:0; top:40%; transform: translateY(-40%); color:#FFF; font-size: 38px; padding:0 80px; transition: all .4s .5s ease-out; cursor: pointer; z-index: 99 } .diy-body .p2{ position: absolute; width: 200px; left:calc(50% - 100px); bottom:-100px; color:#fff; font-size: 1.2em; padding:10px; border:1px solid #fff; border-radius: 20px; transition: all .3s,bottom 0.3s 1s 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;} /*设定元素的伪元素*/ .diy-body::before, .diy-body::after { position: absolute; content: ''; opacity: 0; transition: opacity 0.4s, transform .4s; animation: sbl 1.5s infinite alternate 1s } /*分别通过before、after来设定动画*/ .diy-body::before { top: 18%; right: 5%; bottom: 34%; left: 5%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0, 1); transform-origin: 0 0 /*设定动画从哪个坐标点开始，默认是从中心开始*/ } .diy-body::after { top: 10%; right: 10%; bottom: 28%; left: 10%; border-right: 1px solid #fff; border-left: 1px solid #fff; transform: scale(1, 0); transform-origin: 100% 0 } /*鼠标经过父元素时候调用转变，如果想一直都变化，可以用一个动画来设置to属性就行*/ /* .post:hover .diy-body::before, .post:hover .diy-body::after { opacity: 1; transform: scale(1) } */ @keyframes sbl { to {opacity: 1;transform: scale(1)} } @media screen and (min-width: 768px) { .mydiy .post-top,.mydiy .post-top .post-img,.mydiy .post-top .post-img img{height: 380px} } @media screen and (max-width: 767px) { .mydiy .post-top,.mydiy .post-top .post-img,.mydiy .post-top .post-img img{height: 250px} .diy-body .p1{font-size: 18px;padding:0 30px} .diy-body .p2{margin:4px 0 10px;font-size: 1em;padding:2px 6px;width:120px;left:calc(50% - 60px);} .diy-body .post-meta {bottom:34px;} } |
首页文件修改：template-parts/post/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 51 52 |
<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"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="post-bottom hidden-xs" style="background: #FFF;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;"><?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> <div class="diy-body"> <a href="<?php the_permalink(); ?>"> <p class="p1"><?php the_title(); ?></p> <p class="p2">阅读全文</p> </a> </div> </div> </div> |
鼠标经过时的JS:在main.js中加入：这个是最新的，取消了毛玻璃效果，需要的话可以在Img样式中加入blur
|
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'}); }) } } |
注：为了能使点击加载更多后有效果，还需要在加载文章JS里加上这个函数。
|
1 2 3 |
$(".post-wrap").append(result.fadeIn(500)); //加入这个以使在加载更多的时候有效 postDiy(); |
