• 资源介绍
  • 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模板吧出品!

    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

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

    发表评论