Ripro主题添加SVG登陆注册可爱大嘴说话特效

亲测阔以使用！！！

第一步

将一下代码添加到/wp-content/themes/ripro/parts/popup-signup.php 文件 <div class=”modal-body”>下

<!--登录页大嘴SVG特效开始-->
<div class="main-login">
<div class="monster">
<div class="monster__face">
<div class="monster__eyes">
<div class="monster__eye"></div>
<div class="monster__eye"></div>
</div>
<div class="monster__mouth">
<div class="monster__top"></div>
<div class="monster__bottom"></div>
</div>
</div>
</div>
</div>
<!--登录页大嘴SVG特效结束-->

第二步

复制以下Css代码添加到你的diy.css文件

/* 登录页大嘴巴讲话开始 */
.main-login {
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
margin-bottom: 100px;
margin-top: -105px;
}

.monster {
display: flex;
justify-content: center;
position: relative;
width: 270px;
height: 90px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #FFF;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 19%;
width: 75%;
height: 200px;
}
.monster__eyes {
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__eye {
width: 17px;
height: 30px;
border-radius: 20px;
background: #000000;
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
/*语曦网络资源网*/
/*Yxwlzy.Com*/
@keyframes t {
0%, 10%, 80%, 100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%, 10%, 80%, 100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%, 10%, 100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%, 20%, 100% {
bottom: -80px;
}
30%, 90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
/* 登录页大嘴巴讲话结束 */

运维馆长

打赏 海报 链接