wordpress设计3D读者墙效果

二呆 7年前 (2017-09-11) wordpress优化 #wordpress#

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

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

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

/*
* Template Name:读者墙
*/

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

<?php the_content(); ?>

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

/tmp/phpGy71Fi

注：如果不是用HTML5编写的站点，请把上面的section标签改成div。（大多wordpress主题都用section即可）

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

/*读者墙*/
.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;
}
.reader .site a{
background-color: #fff;
}
.reader-box img {
width:36px;
height:36px;
float: left;
margin-right: 12px;
}
.reader {
perspective: 800px;/*perspective属性定义3D元素距视图的距离，只影响3D转换元素，而且本身不会受影响，其子元素会获得透视效果*/
width:188px;
margin: 8px;
float:left;
}
.reader-box {
position:relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;/*被转换的子元素保留其3D转换*/
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-ms-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;/*3D转换的时间为1秒*/
text-align: center;
line-height: 36px;
}
.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轴的背面。*/
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秒*/
}
.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元素覆盖*/
}
.reader:hover .site{
opacity:1;
}

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

阅读全文c

二呆

访问

赏

向站长打赏×