WordPress

wordpress 3D版读者墙

萨龙龙萨龙龙 WordPress 11 年前
2.23W 20
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{ width: 170px; height: 36px; padding: 8px; display: block; border: 1px #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:36px; height:36px; float: left; margin-right: 12px; }
  5. .reader { perspective: 800px; /*perspective属性定义3D元素距视图的距离，只影响3D转换元素，而且本身不会受影响，其子元素会获得透视效果*/
  6.     width:188px; margin: 8px; float: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-align: center; line-height: 36px; }
  10. .reader .site { position:absolute; top: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以下的浏览器兼容性，萨龙龙觉得前端技术很难进步，即使有进步也苦了前端工程师。

赞(2)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：,
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

20 条评论，访客：0 条，博主：0 条
  1. 3d之家
    3d之家发布于： 
    回复

    css3有太多不懂

  2. 明月登楼
    明月登楼发布于： 
    回复

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

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

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

  3. 德均吧
    德均吧发布于： 
    回复

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

  4. 德均吧
    德均吧发布于： 
    回复

    谢谢博主的大力支持

  5. Vespa
    Vespa发布于： 
    回复

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

  6. 单车岁月
    单车岁月发布于： 
    回复

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

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

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

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

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

  7. Louis Han
    Louis Han发布于： 
    回复

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

  8. 林肆
    林肆发布于： 
    回复

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

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

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

  10. 阿龍
    阿龍发布于： 
    回复

    效果很赞~

  12. 雅岚
    雅岚发布于： 
    回复

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

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

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

  13. FROYO
    FROYO发布于： 
    回复

    厉害，一会儿试一下

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

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

发表回复