RIPRO主题美化-登录注册框动态美化添加SVG登录特效（张嘴特效）

不带后台直接下载替换，带后台开关的按照下面教程走

1、找到/wp-content/themes/ripro/parts/popup-signup.php 文件并找到以下代码

<!–登录页大嘴SVG特效开始–>
<!–<?php if (_cao(‘xinghai_login_yazui’)) : ?> –>
<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>
<?php endif; ?>
<!–登录页大嘴SVG特效结束–>

2.后台控制开关代码，添加到你想要添加的后台开关位置

// 开启登录鸭嘴动效 
array(
 'id' => 'xinghai_login_yazui', 
'type' => 'switcher', 
'title' => '开启登录鸭嘴特效',
 'default' => true, 
),
3、找到diy.css把下面代码复制进去并保存

/*登录页大嘴SVG特效开始*/
.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;
}

/**/
/**/
@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;
}
}
/*登录页大嘴SVG特效结束*/