- 资源介绍
- 更新记录
1、找到/wp-content/themes/ripro/parts/popup-signup.php 文件并找到<div class=”modal-body”>这个代码
2、并将下方的代码内容整体复制到<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特效结束-->
3、找到wp-content/themes/ripro/assets/css/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特效结束*/
猜你在找
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!yuanmawu2020@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
91源码屋 » ripro主题-登陆注册框美化
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
91源码屋 » ripro主题-登陆注册框美化
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 91源码屋
- 2020-12-29Hi,初次和大家见面了,请多关照!