社区 › 站长之家 › 子比主题 – 仿致美化顶部样式代码

飞流 发表于 2025-10-9 22:48:49

子比主题 – 仿致美化顶部样式代码

这是一款子比主题模仿致美化顶部样式代码样式，这款样式能够更好的去让用户加入自己的群聊，还是不错的一款顶部样式美化，喜欢的自行部署吧！


代码部署
定位：WP后台–>>外观–>>小工具–>>自定义HTML，建议放到：首页-顶部全宽度，自己改一下跳转链接
<style type='text/css'>
    a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
border: 0;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
box-sizing: border-box;
}

.index-header {
width: 100%;
height: 624px;
margin-top: -75px;
background-image: url(https://dl.zhutix.net/2020/05/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: 620px;
margin: 0 auto;
position: relative;
z-index: 1;
background-image: url(https://dl.zhutix.net/2020/05/06.png);
background-size: cover
}

.ind_content .common-button {
margin-top: 60px
}

.ind_title {
font-size: 40px;
color: #666
}
.ind_title .cai {
    width: 14em;
    height: 1em;
}
.ind_subtitle {
width: 727px;
text-align: center;
margin-top: 43px;
font-size: 22px;
color: #8A8A8A
}

.index-en-header .ind_subtitle {
width: 537px
}

.ind_quan {
position: absolute;
background-size: cover;
z-index: 0
}

.ind_quan0 {
left: 113px;
top: 125px;
width: 60px;
height: 60px;
background-image: url(https://dl.zhutix.net/2020/05/toy5.svg);
-webkit-animation: toy 3s infinite;
animation: toy 3s infinite
}

.ind_quan1 {
left: -158px;
top: 415px;
width: 32px;
height: 32px;
background-image: url(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/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(https://dl.zhutix.net/2020/05/toy2.svg)
}

.i_zhuan {
-webkit-animation: zhuan 1s 1.5s infinite;
animation: zhuan 1s 1.5s infinite;
}

.i_suo {
-webkit-animation: toy2 3s .1s infinite;
animation: toy2 3s .1s infinite;
}

@-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);
}
}

.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;
    text-decoration: none;
}

.common-button:hover {
    color: #fff;
box-shadow: 0 4px 8px 0 rgba(110, 192, 245, 1);
}


@media screen and (max-width: 768px) {
.ind_content-wrapper {
    width: 100%;
}

.ind_content {
    padding-top: 100px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-image: none;
}

.ind_title {
    font-size: x-large;
}

.plus-toy, .remlm, .grid_author_avt, .ind_quan {
    display: none !important;
}

.ind_content .common-button {
    margin-top: 30px;
}

.common-button {
    font-size: large;
}

.index-header {
    width: 100%;
    height: 300px;
    margin-top: -75px;
    background-image: url(https://dl.zhutix.net/2020/05/header-bg.svg);
    background-size: auto 378px;
}
}
</style>
<div class="index-header"><div class="ind_content-wrapper"><div class="ind_content"><h1 class="ind_title shuheiti">精彩的人生就是无休止地折腾</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>

查看完整版本: 子比主题 – 仿致美化顶部样式代码