头衔样式分享

效果

2022老虎

CSS PC端(url请自行根据网站补全http或https前缀)

.ctouy-title {
    background: url(idepy.com/wp-content/module/public/gadget/static/1.png) !important;
    background-size: 100% !important;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
}

CSS 移动端

无

七彩背景

CSS PC端

.ctouy-title{
background: linear-gradient(to left, rgb(64, 224, 208), rgb(255, 140, 0), rgb(255, 0, 128)) !important;
}

.ctouy-title:before{}

.ctouy-title:after{}

一见钟情的CSS，修改了一下，变成了通用样式，可以左右闪动

来源是LS的官网 q.jinsom.cn/53356.html，要记得去支持大大哦~

.ctouy-title::before {
    animation: 2s ease 0s infinite normal none running left;
}

.ctouy-title::before, .ctouy-title::after {
    content: "❤";
    font-size: 25px;
    color: rgb(235, 63, 132);
    position: relative;
    width: 30px;
    text-align: center;
    transform: scale(1);
}


.ctouy-title::after {
    animation: 2s ease 0s infinite normal none running right;
}

.ctouy-title::before, .ctouy-title::after {
    content: "❤";
    font-size: 25px;
    color: rgb(235, 63, 132);
    position: relative;
    width: 30px;
    text-align: center;
    transform: scale(1);
}

.ctouy-title {
    position: relative;
    color: rgb(235, 63, 132);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    font-weight: bold;
    vertical-align: sub;
    margin: 0px;
    animation: 2s ease 0s infinite normal none running heart;
    background: none !important;
    padding: 0px !important;
}
@keyframes heart{0%{color: #eb3f84;}
30%{color: #fff0;}
50%{color: #fff0;}
70%{color: #fff0;}
100%{color: #eb3f84;}}
@keyframes left{0%{left: 0;transform: scale(1);}
40%{left: calc(50% - 15px);transform: scale(1);}
45%{left: calc(50% - 15px);transform: scale(1.5);}
50%{left: calc(50% - 15px);transform: scale(1);}
55%{left: calc(50% - 15px);transform: scale(1.5);}
60%{left: calc(50% - 15px);transform: scale(1);}
100%{left: 0;transform: scale(1);}}
@keyframes right{0%{right:0;transform: scale(1);}
40%{right:calc(50% - 15px);transform: scale(1);}
45%{right:calc(50% - 15px);transform: scale(1.5);}
50%{right:calc(50% - 15px);transform: scale(1);}
55%{right:calc(50% - 15px);transform: scale(1.5);}
60%{right:calc(50% - 15px);transform: scale(1);}
100%{right:0;transform: scale(1);}}

小夜猫

参照别人样式小改了一下

.ctouy-title{
    background: linear-gradient(to right, rgb(40 37 40), rgb(0 219 199));
}

爱青芸

展示图的素材，P掉了空白文字，合适的可以拿去用

.ctouy-title{
background: none!important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctouy-title:before{
content: url(cloud.png);
}

双状态切换

来自ls官网大大的会员组头衔样式，请多多支持大大~

自己小改了一下

@keyframes yxyhxa {0% { transform:rotate(0deg);}50% { transform:rotate(360deg);}100% { transform:rotate(0deg);}}
@keyframes yxyhxb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
.ctouy-title {
    width: 35px;
    position: absolute;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
  background: #ff4d4d!important;
}
.ctouy-title:before {
    content: "";
    display: inline-block;
    height: 5px;
    top: calc(50% - 3px);
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgb(255 255 255 / 0.5);
    position: absolute;
    -webkit-animation: yxyhxa 3s infinite;
    animation: yxyhxa 3s infinite;
    z-index: 2;
}

.ctouy-title:after {
    content: "最爱粉";
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 1;
    background: #2d74f3;
    border-radius: 10px;
  -webkit-animation: yxyhxb 3s infinite;
    animation: yxyhxb 3s infinite;
}