自从建立博客以来，在下一直喜欢拜访其他大佬的博客，发现很多博客都有书单页面，令在下也很是动心。基于在下贫弱不堪的前端水平，在下开始寻找能够给 WordPress 博客添加一个书单页面的一条龙教程或插件，可惜既没有找到满意的教程，也没有能用的插件，遂决定自己动手制作。
说到书单页面，给在下留下非常深刻印象的还属 蝉时雨 大佬的作品，其书籍以立体的形式展示而且还带有旋转效果。于是在下决定也给自己来一个这样的书单，然而对于一个发量危急的法学生来说，想实现这个效果可并没有那么简单。好在有其他大佬已经在 CSDN 分享了立体书籍旋转效果的代码，只要拿来作适当修改便是。
接下来就开始书单模板的制作了，首先在 Wordpress 主题根目录下把 page.php 复制一份，重命名为 page-book.php ，并把开头的注释改为如下所示。
这样一来，就能在后台的新建页面界面的模板选项中看到书单模板了。 继续在 page-book.php 的注释后添加如下样式代码。 当然可以依照个人需要进行微调。
<style>
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .group {
height: 1%;
}
*:first-child+html .group {
min-height: 1px;
}
body {
line-height: 1.9em;
background-color: #0b3065;
background-size: cover;
font-family: arial,
sans-serif;
}
.container {
max-width: 60em;
margin: 0 auto;
padding: 0 2em;
}
.text.container {
max-width: 38em;
text-align: center;
margin: 50px auto 100px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
a {
color: #da9803;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h.main-title {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
font-weight: normal;
margin: 1.25em;
text-align: center;
font-size: 2.75em;
letter-spacing: -1px;
}
p {
margin-bottom: 1em;
font-size: 1.25em;
}
hr {
margin: 2em 0;
}
.book-container {
width: 100%;
margin: 0 auto;
display: block;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.book {
z-index: 5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
transition: 0.75s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 33% 0;
-moz-transform-origin: 33% 0;
transform-origin: 33% 0;
}
.book:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 3px;
width: 7px;
background: url(翻页转角处的图片) repeat-y;
z-index: 20;
-webkit-transform: translateZ(1px);
}
.book:hover {
-webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
-moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
}
.book-cover {
position: relative;
z-index: 10;
}
.book-cover img {
vertical-align: bottom;
max-width: 100%;
height: auto;
}
.book-spine {
position: absolute;
color: #fff;
bottom: 0;
top: 0;
width: 10%;
z-index: 5;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
background: url(书的侧面图片) -64px 0 no-repeat;
background-size: auto 100%;
-webkit-transform: rotateY(-90deg) translateX(-100%);
-moz-transform: rotateY(-90deg) translateX(-100%);
transform: rotateY(-90deg) translateX(-100%);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.book-spine h {
display: block;
width: 100%;
text-align: left;
color: #fff;
position: absolute;
top: 0;
left: 19%;
text-indent: 43px;
text-transform: uppercase;
font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2em;
opacity: 0.75;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
transform: rotateZ(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.book-spine:before {
display: block;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
</style>
|
一切就绪之后就可以使用模板了，只要在模板当中输入以下 HTML 代码，就能使书籍的封面图获得立体旋转效果了。
<div class="container group" valign="top">
<a class="book-container">
<div class="book">
<div class="book-cover">
<img src="书籍封面图" alt="" />
</div>
<div class="book-spine">
<h>书脊文字</h>
</div>
</div>
</a>
</div>
|
此时可以结合使用 <div> 块或是表格来进行排版，添加更多的书籍信息和其他元素，最终打造出书单页面。
虽然这个模板做得十分笨拙，立体旋转效果也不如蝉时雨大佬的书单精致，且存在很多可以优化的地方（例如可以把那一大块 HTML 代码简化成短代码等等），但要比简单粗暴直接放表格陈列好多了。况且也是自己捣鼓的东西，对于在下这个伪程序宅，还是有不小的成就感。
