修改文件:找到你的主题文件根目录的index.php
查找:do_action(‘b2_index_before’); ?>在下面添加下列代码
<!--致美化模块开始--> <div class="index-header"> <div class="ind_content-wrapper"> <div class="ind_content"> <h1 class="ind_title siuniu">精彩的人生就是不断的折腾</h1> <div class="ind_subtitle jxda">#好在精选,乐于分享#</div><a class="common-button button" href="/qun/" target="_blank">加入大佬QQ群</a> </div> <div class="ind_quan0 ind_quan"></div> <div class="ind_quan1 ind_quan"></div> <div class="ind_quan2 ind_quan"></div> <div class="ind_quan3 ind_quan"></div> <div class="ind_quan4 ind_quan"></div> <div class="ind_quan5 ind_quan"></div> <div class="ind_quan6 ind_quan"></div> <div class="ind_quan7 ind_quan"></div> <div class="ind_quan8 ind_quan"></div> <div class="ind_quan9 ind_quan"></div> </div> </div>
然后添加样式
/*致美化专用*/ .index-header { width: 100%; height: 624px; margin-top: -75px; background-image: url(/vip/svg/header-bg.svg); background-size: auto 622px; background-position: 50% 0; position: relative; background-repeat: no-repeat; overflow: hidden; } .ind_content-wrapper { position: relative; width: 1200px; margin: auto; } .ind_content { display: -ms-flexbox; display: flex; padding-top: 200px; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; width: 1200px; height: 409px; margin: 0 auto; position: relative; z-index: 1; background-image: url(/vip/svg/06.png); background-size: cover; } .ind_title { font-size: 40px; color: #404040; } .ind_subtitle { width: 727px; text-align: center; margin: 43px; font-size: 22px; color: #111f33; } .common-button { box-shadow: 0 4px 8px 0 rgba(110, 192, 245, .5); border-radius: 25px; background: #6ec0f5; border: 1px solid #67baf0; font-size: 16px; padding: 8px 22px; transition: all .2s; color: #fff; } .ind_quan { position: absolute; background-size: cover; z-index: 0; } .ind_quan0 { left: 113px; top: 125px; width: 60px; height: 60px; background-image: url(/vip/svg/toy5.svg); -webkit-animation: toy 3s infinite; animation: toy 3s infinite; } .ind_quan1 { left: -158px; top: 415px; width: 32px; height: 32px; background-image: url(/vip/svg/toy1.svg); -webkit-animation: toy 3s infinite; animation: toy 3s infinite; } .ind_quan2 { left: -55px; top: 296px; width: 29px; height: 29px; -webkit-animation: upAnimation 3s infinite; animation: upAnimation 3s infinite; background-image: url(/vip/svg/toy2.svg); } .ind_quan3 { left: 465px; top: 129px; width: 49px; width: 49px; height: 49px; -webkit-animation: zhuan 3s .2s infinite; animation: zhuan 3s .2s infinite; background-image: url(/vip/svg/toy3.svg); } .ind_quan4 { right: 400px; top: 330px; width: 24px; height: 24px; -webkit-animation: toy 3s 1s infinite; animation: toy 3s 1s infinite; background-image: url(/vip/svg/toy4.svg); } .ind_quan5 { left: 830px; top: 74px; width: 54px; height: 54px; -webkit-animation: toy 3s .8s infinite; animation: toy 3s .8s infinite; background-image: url(/vip/svg/xin.svg); } .ind_quan6 { left: 961px; top: 261px; width: 27px; -webkit-animation: zhuan .5s .2s infinite; animation: zhuan .5s .2s infinite; height: 23px; background-image: url(/vip/svg/toy6.svg); } .ind_quan7 { left: 1271px; top: 373px; width: 40px; height: 40px; -webkit-animation: zhuan 2s 1.5s infinite; animation: zhuan 2s 1.5s infinite; background-image: url(/vip/svg/toy7.svg); } .ind_quan8 { width: 83px; height: 84px; left: 228px; top: 623px; -webkit-animation: toy2 3s .1s infinite; animation: toy2 3s .1s infinite; background-image: url(/vip/svg/toy2.svg); } .ind_quan9 { width: 30px; height: 30px; right: -30px; top: 122px; -webkit-animation: aroundAnimation 3s .1s infinite; animation: aroundAnimation 3s .1s infinite; background-image: url(/vip/svg/toy2.svg); } /*致美化选择器*/ @-webkit-keyframes toy { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.7); transform: scale(.7) } to { -webkit-transform: scale(1); transform: scale(1) } } @keyframes toy { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.7); transform: scale(.7) } to { -webkit-transform: scale(1); transform: scale(1) } } @-webkit-keyframes toy2 { 0% { -webkit-transform: scale(.7); transform: scale(.7) } 50% { -webkit-transform: scale(1); transform: scale(1) } to { -webkit-transform: scale(.7); transform: scale(.7) } } @keyframes toy2 { 0% { -webkit-transform: scale(.7); transform: scale(.7) } 50% { -webkit-transform: scale(1); transform: scale(1) } to { -webkit-transform: scale(.7); transform: scale(.7) } } @keyframes zhuan { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes upAnimation { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(0,-30px,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(0,-15px,0); } 90% { transform: translate3d(0,-4px,0); } } @keyframes aroundAnimation { 0%, 100%, 20%, 50%, 80% { transition-timing-function: cubic-bezier(0.215,.61,.355,1); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060); transform: translate3d(-20px,0,0); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); transform: translate3d(-10px,0px,0); } 90% { transform: translate3d(20px,0,0); } }
⚠️
wp百科网上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
无意侵害您的权益,请发送邮件至 aqiang-212@qq.com 或点击右侧 私信:wpbkw 反馈,我们将尽快处理。
B2主题代码高亮代码-美化版
B2主题代码高亮代码-美化版B2主题代码高亮代码-美化版B2主题代码高亮代码-美化版
予人玫瑰,手有余香
看看
666
谢谢分享
支持