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栏，最好能增加轮换功能