f
wordpress设计3D读者墙效果
wordpress设计3D读者墙效果
二呆 4年前 (2017-09-11) wordpress优化  #wordpress# 
浏览:3260

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和D8)均来自大前端,追求完美的同时有一丝小懒,主题就不换了,D8主题用起来挺好。

在为wordpress站点添加页面时,设计页面也算比较麻烦的一件事,既要美观,又要实用。而读者墙是体现用户的地方,也有可能当做wordpress留言板使用,要设计出特殊效果的3D读者墙,下面进行3个步骤即可完成。

1、复制page.php中所有内容到在主题目录下新建的读者墙php文件中,并在开头插入以下代码。

  1. /* 
  2. * Template Name:读者墙 
  3. */

2、在刚才新建的模板文件中查找以下代码:

  1. <?php the_content(); ?>

在它的下边插入以下代码:

/tmp/phpGy71Fi

 注:如果不是用HTML5编写的站点,请把上面的section标签改成div。(大多wordpress主题都用section即可)

3、添加css样式到style.css或自己的css文件中,可以查看代码中注释了解是如何运作的。

  1. /*读者墙*/
  2. .reader-box .avatar,.reader .site a{
  3.     width170px;
  4.     height36px;
  5.     padding8px;
  6.     displayblock;
  7.     border1px #fff solid;
  8.     -webkit-box-shadow: 0 0 2px #ddd;
  9.     -moz-box-shadow: 0 0 2px #ddd;
  10.     box-shadow: 0 0 2px #ddd;
  11. }
  12. .reader .site a{
  13.     background-color#fff;
  14. }
  15. .reader-box img {
  16.     width:36px;
  17.     height:36px;
  18.     floatleft;
  19.     margin-right12px;
  20. }
  21. .reader {
  22.     perspective: 800px;/*perspective属性定义3D元素距视图的距离,只影响3D转换元素,而且本身不会受影响,其子元素会获得透视效果*/
  23.     width:188px;
  24.     margin8px;
  25.     float:left;
  26. }
  27. .reader-box {
  28.     position:relative;
  29.     -webkit-transform-style: preserve-3d;
  30.     -moz-transform-style: preserve-3d;
  31.     -ms-transform-style: preserve-3d;
  32.     transform-style: preserve-3d;/*被转换的子元素保留其3D转换*/
  33.     -webkit-transition: 1s ease;
  34.     -moz-transition: 1s ease;
  35.     -ms-transition: 1s ease;
  36.     -o-transition: 1s ease;
  37.     transition: 1s ease;/*3D转换的时间为1秒*/
  38.     text-aligncenter;
  39.     line-height36px;
  40. }
  41. .reader .site {
  42.     position:absolute;
  43.     top:0;
  44.     -webkit-transform: rotateY(182deg) translateZ(1px);
  45.     -moz-transform: rotateY(182deg) translateZ(1px);
  46.     -ms-transform: rotateY(182deg) translateZ(1px);
  47.     -o-transform: rotateY(182deg) translateZ(1px);
  48.     transform: rotateY(182deg) translateZ(1px);/*沿着Y轴的3D旋转, 3D转换只用Z轴的值,将此元素反转180度,置于Z轴的背面。*/
  49.     color:#666;
  50.     opacity:.0;
  51.     -webkit-transition: 1s opacity;
  52.     -moz-transition: 1s opacity;
  53.     -ms-transition: 1s opacity;
  54.     -o-transition: 1s opacity;
  55.     transition: 1s opacity;/*3D转换的时间为1秒*/
  56. }
  57. .reader:hover .reader-box{
  58.     -webkit-transform: rotateY(182deg);
  59.     -moz-transform: rotateY(182deg);
  60.     -ms-transform: rotateY(182deg);
  61.     -o-transform: rotateY(182deg);
  62.     transform: rotateY(182deg);/*鼠标经过时,.rotate-box元素沿着Y轴3D旋转180度,同时.text元素反转180度,透明度为1,所以把 默认显示的span元素覆盖*/
  63. }
  64. .reader:hover .site{
  65.     opacity:1;
  66. }

是不是很炫,快来设计一个3D读者墙效果吧!

推荐阅读
  • 插件截图:插件简介:TleUCenterForWordpress是一个用户中心插件,放置于前台网页的左下角,供用户登陆/管理只用,使用邮箱验证码登陆,登陆之后在使用TleWeiboForWordPressV2.0微博主题的情况下,可以显示微博列表、文章列表、评论列表,也可...
  • 插件截图:插件介绍:TleLiveCtrlForWordpress是一个基于Kplayer的直播遥控器插件,也可以叫做KplayerForWordPress插件,支持多平台直播推流,进行积分点播、查询、跳过等功能,支持Payjs微信、支付宝支付,是一个可以24小时直播推流的...
  • 主题截图:主题简介:一款Wordpress版本的TleWeiboForWordPress电脑/手机版微博主题使用方法:将本主题里的所有文件放在您网站目录的wp-content/themes内,注意文件夹名字必须为TleWeibo或TleWeiboWap。此处内容已经...
  • 插件简介:即时聊天插件为WordPress站长及用户提供即时聊天功能,前台环信即时聊天需要配合个人中心插件,暂不支持手机端。在支持手机端的路上,因为万恶的360网站卫士最近访问困难,导致停留了N久,最后啥也没动,就升级至V1.0.10了,不过仅仅支持了简单的手机端版本。使...
  • 插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可查看隐藏内容,当前版本支持payjs微信支付。安装方法:第一步:下载本插件,放在 wp-content/plugins/ 目录中(插件文件夹名必须为WeMedia);第二步:激活插件;第三步:填写配置;第四...

o p
Ú