RiPro主题美化:右上角菜单添加升级SVIP闪光动态翅膀效果

这个效果很多子主题都有,很多小伙伴在群里告诉我出一个RiPro添加升级SVIP闪光动态翅膀效果的教程,今天它来了,我们提供了两种样式供大家选择,好的下面教程正式开始。

效果展示:

RiPro主题美化:右上角菜单添加升级SVIP闪光动态翅膀效果插图

1.找到文件:wp-content/themes/ripro/assets/css/diy.css(用子主题的就找到子主题)

2.复制下面的css样式到diy.css文件中,代码如下:

/*升级VIP翅膀*/
.navbar .actions>div+div {
    font-weight: 400;
    margin-top: 26px;
}
.shanshan {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	float: left;
	margin-right: 15px;
}
@media (max-width: 767px) {
	.shanshan {
		display: none
	}
}
.heshan {
	position: relative;
}

.shanlian {
	color: #fff;
	line-height: 33px;
	text-align: center;
}

.heshan > a {
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    /* height: 68px; 
    padding: 15px;*/
	color: #adb7be;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	transition: color .2s;
}

.shanlian.lianzi {
	color: #CEA22C;
	line-height: 33px;
	text-align: center;
}

.shanlian.lianzi .ic_gif {
	position: absolute;
	top: 0%;
	left: 50%;
	width: 96px;
	margin: 0 0 0 -50px;
}

.shanlian.lianzi .ic_gif1 {
	position: absolute;
	top: 0%;
	left: 50%;
	width: 88px;
	margin: 0 0 0 -44px;
}

.shanlian.lianzi .ic_gif::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/sucaihu_com_vip.png) no-repeat -60px 0;
	width: 13px;
	height: 25px;
	transform-origin: right center;
	-webkit-transform-origin: right center;
	animation: super_giftl 2s linear both infinite;
	-webkit-animation: super_ngiftl 2s linear both infinite;
}

.shanlian.lianzi .ic_gif1::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	background: url(../images/sucaihu_com_vip.png) no-repeat 0 0;
	width: 13px;
	height: 25px;
	transform-origin: right center;
	-webkit-transform-origin: right center;
	animation: super_giftl 1s linear both infinite;
	-webkit-animation: super_giftl 1s linear both infinite;
}

.shanlian.lianzi .ic_gif::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/sucaihu_com_vip.png) no-repeat -100px 0;
	width: 13px;
	height: 25px;
	transform-origin: left center;
	-webkit-transform-origin: left center;
	animation: super_giftr 2s linear both infinite;
	-webkit-animation: super_ngiftr 2s linear both infinite;
}

.shanlian.lianzi .ic_gif1::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 0;
	background: url(../images/chibang_vip.png) no-repeat -30px 0;
	width: 13px;
	height: 25px;
	transform-origin: left center;
	-webkit-transform-origin: left center;
	animation: super_giftr 1s linear both infinite;
	-webkit-animation: super_giftr 1s linear both infinite;
}

.shanlian.lianzi .txt {
	position: relative;
	font-size: 15px;
	color: #f5b344;
}

.shanlian.lianzi .txt1 {
	position: relative;
	font-size: 14px;
	color: #f5b344;
}

.shanlian.lianzi .ic_mask {
	position: absolute;
	top: 10px;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 14px;
	overflow: hidden;
	background: 0 0;
}

.shanshan .shanlian.lianzi .ic_mask::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 6px;
	background: #fff;
	top: -12px;
	left: 0px;
	animation: super_mask 2s linear both infinite;
	-webkit-animation: super_mask 2s linear both infinite;
	opacity: .6;
}
/* 闪字动画 */
@keyframes super_ngiftl {
	0%,100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(-15deg);
	}
}

@-webkit-keyframes super_ngiftl {
	0%,100% {
		-webkit-transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(-15deg);
	}
}

@keyframes super_ngiftr {
	0%,100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(15deg);
	}
}

@-webkit-keyframes super_ngiftr {
	0%,100% {
		-webkit-transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(15deg);
	}
}

@keyframes super_giftl {
	0%,100% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(-50deg);
	}
}

@-webkit-keyframes super_giftl {
	0%,100% {
		-webkit-transform: rotateY(0deg);
	}

	50% {
		-webkit-transform: rotateY(-50deg);
	}
}

@keyframes super_giftr {
	0%,100% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(50deg);
	}
}

@-webkit-keyframes super_giftr {
	0%,100% {
		-webkit-transform: rotateY(0deg);
	}

	50% {
		-webkit-transform: rotateY(50deg);
	}
}

@keyframes super_mask {
	0% {
		transform: translate(0,0) rotate(-30deg);
	}

	50%,100% {
		transform: translate(56px,22px) rotate(-30deg);
	}
}

@-webkit-keyframes super_mask {
	0% {
		-webkit-transform: translate(0,0) rotate(-30deg);
	}

	50%,100% {
		-webkit-transform: translate(56px,22px) rotate(-30deg);
	}
}

/*升级VIP翅膀*/

3.找到文件wp-content/themes/ripro/parts/navbar.php并找到如下代码:

<div class="actions">

4.将如下代码复制粘贴到以上代码的下面即可

        <!--360模板吧 www.360mb.net-->
        <div class="shanshan hidden-xsss">
          <div data-microtip="升级SVIP会员无限下载" data-microtip-position="bottom-right" class="hsnah heshan">
           <a href="/svip" class="shanlian lianzi"><span class="ic_gif"></span> 
           <span class="txt"><i class="ic_mask"></i>升级SVIP</span></a>
         </div>
        </div>

5.上传本帖附件图片至wp-content/themes/ripro/assets/images(废话一句子主题就传到子主题)

附件名称:RIPRO主题美化-右上角菜单添加开通VIP闪光动态翅膀效果 WordPress主题美化.zip

注意:修改是注意备份文件,文件上传注意RiPro主题与子主题的区别,本教程由360模板吧出品!

发表回复

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+/次,请大家谅解!

本站源码已经购买的后续都是免费更新,且资源更新都是在同一文章,不会新开一贴,不会重新收费,这一点我们和其他很多同行网站规则都不一样,望各位知晓!

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。