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模板吧出品！