WordPress

wordpress 3D版读者墙

LensNews

Salong主题采用的是HTML5/CSS3,整个主题都运用了CSS3的动画,而读者墙也不例外,加入CSS3的3D动画效果,让读者墙更加炫丽。

3D版的读者墙到现在应该不多见,最大的原因应该是兼容性的问题,我们应该放弃对太老的、过时的浏览器兼容性的工作,这种做法也是鼓励用户安装最新版本的浏览器,更好的体验HTML5/CSS3的优秀的特性。

Twitter彻底的放弃了IE6和IE7,bootstrap对IE7, IE8支持都不是很好。而Google Apps在未来几周内将放弃对微软IE9的支持,这是Google一贯执行的产品支持政策,如果你还在修复IE6,只能表示无语。Salong主题没有做任何浏览器兼容性的问题,绝大多数最新的浏览器都没有问题,IE9也能正常浏览,但CSS3的动画效果等属性是没有,勇敢地放弃IE9以下的浏览器,这是萨龙龙在制作主题中最爽的一件事。

随着浏览器的更新与性能的提升,不只CSS3的3D效果,相信更多的HTML5/CSS3的最新技术会融入到越来越多的网页中。

3D读者墙,最大的特点是使用了CSS3的3D动画效果,主要是CSS3的透视视图与3D转换,下面简单的介绍下:

1、复制主题下的page.php文件,重命名为:template-reader.php,将其中第一个<?php替换为:

  1. < ?php
  2. /*
  3. * Template Name:读者墙
  4. */

2、在模板文件中查找:

  1. <?php the_content(); ?>

在其下面添加3D读者墙PHP代码:

  1. <!-- 读者墙 -->
  2. <?php
  3.   $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != 'longyizaifei@163.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 36";//把longyizaifei@163.com改成自己的邮箱,在读者墙中排除管理员。最后的数字36是在读者墙中显示的读者个数,根据情况修改! 
  4.   $wall = $wpdb->get_results($query);
  5.   $maxNum = $wall[0]->cnt;
  6.    foreach ($wall as $comment)
  7.   {
  8.     if$comment->comment_author_url )
  9.     $url = $comment->comment_author_url;
  10.     else $url="#";
  11.     $r="rel='external nofollow'";
  12.     $imgsize="36";//头像的大小,如果修改,CSS样式也得相应地修改。
  13.     $tmp = "<li><section class='reader'><div class='reader-box'><span class='avatar'><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($comment->comment_author_email) )."&size=".$imgsize ."&d=identicon&r=G' /> ".$comment->comment_author." +".$comment->cnt."</span><div class='site'><a target='_blank' href='".$url."'>查看 ".$comment->comment_author." 的站点</a></div></div></section></li>";
  14.     $output .= $tmp;
  15.   }
  16.   $output = "<ul class="readers-list">".$output."</ul>";
  17.   echo $output ;
  18.   ?>
  19. <!-- 读者墙end -->

如果不是用HTML5编写的站点,请把上面的section标签改成div。

3、3D版的读者墙与网上的其它版本最大的区别是CSS样式,最新的CSS3特性在下面的CSS代码中都有注释:

  1. /*读者墙*/
  2. .reader-box .avatar,.reader .site a{ width170pxheight36pxpadding8pxdisplayblockborder1px #fff solid; -webkit-box-shadow: 0 0 2px #ddd; -moz-box-shadow: 0 0 2px #ddd; box-shadow: 0 0 2px #ddd; }
  3. .reader .site a{ background-color#fff; }
  4. .reader-box img { width:36pxheight:36pxfloatleftmargin-right12px; }
  5. .reader { perspective: 800px/*perspective属性定义3D元素距视图的距离,只影响3D转换元素,而且本身不会受影响,其子元素会获得透视效果*/
  6.     width:188pxmargin8pxfloat:left; }
  7. .reader-box { position:relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /*被转换的子元素保留其3D转换*/
  8.     -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; /*3D转换的时间为1秒*/
  9.     text-aligncenterline-height36px; }
  10. .reader .site { position:absolutetop:0; -webkit-transform: rotateY(182deg) translateZ(1px); -moz-transform: rotateY(182deg) translateZ(1px); -ms-transform: rotateY(182deg) translateZ(1px); -o-transform: rotateY(182deg) translateZ(1px); transform: rotateY(182deg) translateZ(1px); /*沿着Y轴的3D旋转, 3D转换只用Z轴的值,将此元素反转180度,置于Z轴的背面。*/
  11.     color:#666; opacity:.0; -webkit-transition: 1s opacity; -moz-transition: 1s opacity; -ms-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; /*3D转换的时间为1秒*/; }
  12. .reader:hover .reader-box{ -webkit-transform: rotateY(182deg); -moz-transform: rotateY(182deg); -ms-transform: rotateY(182deg); -o-transform: rotateY(182deg); transform: rotateY(182deg); /*鼠标经过时,.rotate-box元素沿着Y轴3D旋转180度,同时.text元素反转180度,透明度为1,所以把 默认显示的span元素覆盖*/; }
  13. .reader:hover .site{ opacity:1; }

查看效果:3D读者墙(远方的雪山留言板)

3D版读者墙经过测试大多数最新的浏览器:Firefox、Chrome、Safari、Opera、360、猎豹等浏览器都是支持的,IE10以上才支持,如果考虑IE9以下的浏览器兼容性,萨龙龙觉得前端技术很难进步,即使有进步也苦了前端工程师。

(1)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 20 条评论,访客:14 条,博主:6 条

  • 3d之家
    3d之家 发布于:  回复

    css3有太多不懂

  • 明月登楼
    明月登楼 发布于:  回复

    我今天也建了一个“读者墙”页面,效果倒时有了,怎么在谷歌浏览器下只是竖着显示,没有并列几个的显示呀?什么情况,我没有改动任何代码呀!用的就是主题自带的页面模板!

    • 萨龙龙
      萨龙龙 发布于:  回复

      我这边显示的没有问题,是不是你的谷歌浏览器版本低了?也有可能这个版本的样式没有更新,现在更新了!

  • 德均吧
    德均吧 发布于:  回复

    要是能调用多说的头像就好了

  • 德均吧
    德均吧 发布于:  回复

    谢谢博主的大力支持

  • Vespa
    Vespa 发布于:  回复

    额。。。3D效果出不来。。。搞不懂。。

  • 单车岁月
    单车岁月 发布于:  回复

    我的主题用不了,求指导……

    • 萨龙龙
      萨龙龙 发布于:  回复

      你现在的读者墙都可以用,我的这个也不会有问题。

      • 单车岁月
        单车岁月 发布于:  回复

        现在用的插件,function黏贴进去就报错,可能是主题自身的问题

  • Louis Han
    Louis Han 发布于:  回复

    3D读者墙确实不常见啊 不错

  • 林肆
    林肆 发布于:  回复

    我只知道绚丽是好事,带来的是电脑资源的消耗,而且不是所有浏览器都能看到效果的。我的设备太落后啦~

    • 萨龙龙
      萨龙龙 发布于:  回复

      这个版本的读者墙如果浏览器不支持3D效果,也一样可以浏览,只是淡入淡出。

  • 阿龍
    阿龍 发布于:  回复

    效果很赞~

  • 雅岚
    雅岚 发布于:  回复

    Mark之,以备筑墙之需,哈哈哈

    • 萨龙龙
      萨龙龙 发布于:  回复

      你博客那么多读者,应该整一个读者墙。

  • FROYO
    FROYO 发布于:  回复

    厉害,一会儿试一下

    • 萨龙龙
      萨龙龙 发布于:  回复

      现在也是在学习的过程,HTML5/CSS3还有太多高级的功能。