I.视觉效果
首页文章卡片鼠标悬停阴影+图片旋转效果
F12定位对应css代码
修改style.css中对应代码
.post-list-thumb {
will-change: transform;
float: left;
width: 100%;
height: 300px;
position: relative;
margin: 20px 0 20px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 1px 20px -8px rgba(0, 0, 0, .5);
opacity: 0;
-webkit-transition: box-shadow .3s ease; //动画过渡时间
transition: box-shadow .3s ease
}
.post-list-thumb:hover {
-webkit-box-shadow:0 5px 10px 5px rgba(110,110,110,.5);
box-shadow:0 5px 10px 5px rgba(110,110,110,.5)
}
.post-list-thumb:hover img{
-webkit-transform:scale(1.2) rotate(5deg);
transform:scale(1.2) rotate(5deg)
}
首页添加波浪线
参考https://2heng.xin/theme-sakura/
修改header.php如下(或者到layouts/imgbox.php开始部分加上相同代码)

再在style.css最后加上如下代码
@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
50%{ left:0px;bottom:0px}
100%{ left:-1500px;bottom:-5px}
}
@-webkit-keyframes wave2
{
0% { left:-1450px}
50%{ left:0px}
100%{left:-1450px}
}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
50%{ left:0px;bottom:0px}
100%{ left:-1500px;bottom:-5px}
}
@keyframes wave2
{
0% { left:-1450px}
50%{ left:0px}
100%{left:-1450px}
}
#banner_wave_1 {
width:auto;
height:65px;
background:url("http://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:-236px;
z-index:5;
opacity:1;
transiton-property:opacity,bottom;
animation:wave1 90s infinite;
-webkit-animation:wave1 90s infinite;
}
#banner_wave_2 {
width:auto;
height:80px;
background:url("http://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:0;
z-index:4;
opacity:1;
transiton-property:opacity,bottom;
animation:wave2 90s infinite;
-webkit-animation:wave2 90s infinite;
}
.banner_wave_hide,.banner_wave_hide_fit_skin {
opacity:0 !important;
bottom:-999px !important
}
@media(max-width:860px) {
#banner_wave_1,#banner_wave_2 {
display:inline-block;
}
@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
50%{ left:0px;bottom:0px}
100%{ left:-750px;bottom:-2px}
}
@-webkit-keyframes wave2
{
0% { left:-750px}
50%{ left:0px}
100%{left:-750px}
}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
50%{ left:0px;bottom:0px}
100%{ left:-750px;bottom:-2px}
}
@keyframes wave2
{
0% { left:-750px}
50%{ left:0px}
100%{left:-750px}
}
#banner_wave_1 {
width:auto;
height:65px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:750px;
z-index:5;
opacity:1;
transiton-property:opacity,bottom;
animation:wave1 90s infinite;
-webkit-animation:wave1 60s infinite;
}
#banner_wave_2 {
width:auto;
height:80px;
background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
_filter:alpha(opacity=80);
position:absolute;
bottom:0;
width:400%;
left:0;
z-index:4;
opacity:1;
transiton-property:opacity,bottom;
animation:wave2 90s infinite;
-webkit-animation:wave2 60s infinite;
}
}
接下来的目标:
1. 修改鼠标图像+增加点击特效
2. 修改collection栏,最好能增加轮换功能