同乐儿

  1. 首页
  2. wordpress优化
wordpress设计3D读者墙效果
发布 | 1年前 (2017-09-11) | 阅读数:660 | 评论数:0 | 来源:同乐儿

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和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读者墙效果吧!


» 转载请注明来源:同乐儿 » 《wordpress设计3D读者墙效果》
如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 wordpress,wordpress优化,读者墙 的文章

分享至:


发表我的评论
取消评论

  • 117 评论
  • 138 粉丝
  • 133 文章
  • 最新评论
    二呆说:看见岛有了点信号,我用的时候就是看对应网...
    123123123说:我试过了,没改成功,不着急用,看了qur...
    二呆说:6.0应该也行,时间太长忘记了,好像6....
    123123123说:能不能适配下emlog6.0
    二呆说:啥意思,背景就是简单的网页背景图片。。。
    随机热门
    标签
    wordpress (81) wordpress优化 (26) 原创 (25) wordpress主题 (24) wordpress插件 (21) wordpress教程 (18) wordpress seo (17) Typecho (16) Typecho插件 (13) 博客主题 (8) emlog插件 (6) wordpress维护 (6) emlog (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)

    标题歌手

    00:00/00:00