日主题 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文件添加到 div.css中
[rihide]
/*登录页大嘴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特效结束*/
[/rihide]
声明:
1、本站所有文章仅供参考,如有侵权 请联系我们删除 meng#yimiaonet.com #换成@
2、文章大部分源自网络或ai生成,文章不作为任何依据,仅供参考。
3、本站的所有源码都是在网络上转载或由用户投稿,仅供参考学习使用,请您务必在下载后24小时内删除。
4、本站下载的所有源码等内容不得用于任何违反相关法律法规的用途,一经发现 我们立即向有关部门报备。
5、### 本站除商业栏目外 其他资源均来自于网络或用户投稿,如有侵权 请及时联系我们删除,感谢您的支持与理解,让我们一起支持创作者权益。
6、如果您需要商用,可以联系客服定制开发或购买商业源码栏目内的内容,当然也可以联系部分源码的原作者;我们最终一切版权。
7、您注册本站会员后,如果需要注销账号等适宜,请联系客服。
评论(0)