注册时间2024-11-22
最后登录2025-12-9
在线时间1297 小时
UID1
买家信用
卖家信用
风云·优秀版主
|
资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！
您需要 登录 才可以下载或查看，没有账号？立即注册
×
这是一款子比主题模仿致美化顶部样式代码样式，这款样式能够更好的去让用户加入自己的群聊，还是不错的一款顶部样式美化，喜欢的自行部署吧！
代码部署
定位：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>
|
|
电信增值许可 渝B2-20250789 )|网站地图
窥视卡
雷达卡
FLLTCN
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
顶顶卡
标罚卡
侦查卡
