RIPRO主题美化-右上角菜单添加开通VIP闪光动态翅膀效果 WordPress主题美化-ZS

RIPRO主题美化-右上角菜单添加开通VIP闪光动态翅膀效果 WordPress主题美化

将该代码复制到diy.cssZS舜云资源

/wp-content/themes/ripro/assets/css这个是路径
/**/
.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(https://mobanweb.oss-cn-hangzhou.aliyuncs.com/image/mobanweb_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(https://mobanweb.oss-cn-hangzhou.aliyuncs.com/image/mobanweb_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(https://mobanweb.oss-cn-hangzhou.aliyuncs.com/image/mobanweb_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(https://mobanweb.oss-cn-hangzhou.aliyuncs.com/image/mobanweb_com_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);
	}
}

/**/

 

 

 

将该代码复制到wp-content/themes/ripro/parts/navbar.php

添加到

<div class="actions">这个代码下方
<!---->
<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>

 

1.本文部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。 2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 3.如果本站有侵犯、不妥之处的资源,请在网站最下方联系我们。将会第一时间解决! 4.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。 5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!
舜云资源 » RIPRO主题美化-右上角菜单添加开通VIP闪光动态翅膀效果 WordPress主题美化-ZS

发表评论

发表评论

提供最优质的资源集合

立即查看 了解详情