wordpress ripro 美化 主题教程 首页链接变色 图片放大

wordpress ripro 美化 主题教程 首页链接变色 图片放大

代码描述: ripro美化首页文章显示 标题彩色 向右移动 以及鼠标划过 省略图放大,wordpress美化。 将代码放到DIY.css就可以了 演示截图:

代码描述:

ripro美化首页文章显示 标题彩色 向右移动

以及鼠标划过 省略图放大,wordpress美化。

将代码放到DIY.css就可以了

[rihide]

/*链接变色*/
.entry-title>a,.uposts .hentry .title>a,.article-nav span.article-nav-next a,.article-nav a{
-webkit-transition: margin 0.2s ease-out;
-moz-transition: margin 0.2s ease-out;
-khtml-transition: margin 0.2s ease-out;
}
.entry-title>a:hover,.uposts .hentry .title>a:hover,.article-nav span.article-nav-next a:hover,.article-nav a:hover{
background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;
margin-left:10px /*移动距离可以自己调节*/
}
/*图片过渡变化*/
.entry-media img {
transition:all 0.9s;
cursor:pointer;
}
/*鼠标移到图片放大1.2倍*/
.entry-media img:hover {
transform:scale(1.1);
}

.navbar .zzhuti-button, .off-canvas .canvas-close {
top: 0px;
align-items: center;
align-items: center;
border-radius: 50%;
cursor: pointer;
display: flex;
font-size: 16px;
height: 30px;
justify-content: center;
width: 30px;
color: #ff5c00;
}

/*按钮动画*/
.btn:hover,
.butn:focus,
.button:hover,
.button:focus,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus,
.infinite-scroll-button:hover,
.infinite-scroll-button:focus,
.btn–secondary:hover,
.btn–secondary:focus,
.input-group-btn:hover,
.input-group-btn:focus,
.pull-right:hover,
.pull-right:focus,
.login-btn:hover,
.login-btn:focus,
.btn–block:hover,
.btn–block:focus,
.go-payvip:hover,
.go-payvip:focus{
-webkit-animation: pulse 2s;
animation: pulse 2s;
box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@-webkit-keyframes btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@-webkit-keyframes button {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes button {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@-webkit-keyframes btn-primary{
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes btn-primary {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes btn-default{
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes btn-default {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes infinite-scroll-button {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes infinite-scroll-button {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes btn–secondary {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes btn–secondary {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes input-group-btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes input-group-btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes pull-right {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes pull-right {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes login-btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes login-btn {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes btn–block {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes btn–block {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}
@-webkit-keyframes go-payvip {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

@keyframes go-payvip {
0% {
box-shadow: 0 0 0 0 var(–hover);
}
}

[/rihide]

演示截图:

没有账号? 注册  忘记密码?