使用简单的 HTML CSS Js 的交互式猴子登录页面。
使用简单的 HTML CSS Js 的交互式猴子登录页面。
所以今天我们将使用简单的 HTML CSS 和 vanilla Js 以一种非常简单的方式构建一个交互式猴子登录页面。
it’s so cute, right..?
所以，是的，我们会成功的。
兴奋……让我们现在开始吧。
所以让我解释一下幕后发生的逻辑。逻辑很简单。我们将使用一张猴子脸的图像，但是等等，正如我们所看到的，眼睛是动画的，所以我们必须使用 div 标签来设置它们。我们稍后再做。
我们必须隐藏双手，以便在用户专注于密码输入时显示它们。
如果我不使用 溢出隐藏 在其父 .img 包装器 然后它看起来像这样。如果使用 溢出隐藏 然后它看起来像这样
那么让我们跳入 HTML 代码
<div class="main-wrapper"> <div class="monkey-thought"> <div class="buble-1"></div> <div class="monkey-comment"><p>是电子邮件吗？</p></div> </div> <div class="img-wrapper"> <div class="monkey-face"> <img src="./Images/monkey.png" alt="脸"> <div class="eyes-wrapper"> <div class="eyes"> <div class="eye-brow"></div> <div class="eye-ball"></div> </div> <div class="eyes"> <div class="eye-brow"></div> <div class="eye-ball"></div> </div> </div> </div> <img class="monkey-hand" src="./Images/hand.png" alt="手"> </div> <form action=""> <input type="email" id="email" placeholder="[[email protected]](/cdn-cgi/l/email-protection)" autocomplete="off" required> <input type="password" placeholder="password" id="password" onfocus="showMonkeyHand()" required> <button id="submit-btn" type="submit">提交</button> </form> </div>
所以我把所有的内容都包装在了 main-wrapper 里面。
.main-wrapper{ 宽度：400px；显示：弯曲；对齐项目：居中；对齐内容：空间环绕；弹性方向：列；背景颜色：rgba（255、255、255、0.356）；盒子阴影：0px 0px 30px 0px rgba(82, 82, 82, 0.247);填充：2rem；间隙：3rem；边界半径：.4rem；位置：相对 }
类= 猴子的想法
.monkey-thought{ 不透明度：0；位置：绝对；顶部：-2rem；右：3.4rem；变换：rotateZ(250deg)；显示：flex；
flex-direction: column;transition: opacity .2s ease-in-out; } .buble-1{ 高度：2rem;宽度：2rem；边界半径：50%；背景色：hsl(167, 92%, 23%);位置：相对；
} .monkey-comment{ 位置：相对；宽度：6rem；高度：6rem；边界半径：50%；变换：旋转Z（103度）；文本对齐：中心；显示：弯曲；对齐项目：居中；背景色：hsl(167, 92%, 23%);颜色：白色；字体系列：'Rokkitt'，衬线；字体大小：1.6rem；
}
它将包含我们想要在用户输入他/她的电子邮件时显示的内容。最初，它的不透明度为 0。当用户输入他/她的电子邮件时，我们将使用 js 将其设置为不透明度 1。
类= img 包装器
.img-wrapper{ 显示：弹性；对齐项目：中心；对齐内容：中心；弹性方向：列；位置：相对；溢出：隐藏；宽度：12rem；边框：1px 实心； }
它充当猴子面部的包装器，并使用 CSS 属性溢出隐藏将他的手隐藏在其中。所以我们会给它一个固定的宽度。
类= 猴脸
.monkey-face{ 过渡：变换 .3s；位置：相对；}
它将包含猴脸和我们将进一步制作的猴眼。所以我们必须添加 CSS 属性 位置：相对 所以我们可以根据猴脸来固定眼睛。插入猴脸，在它的兄弟旁边，我们将添加猴眼，所以让我们这样做。
类= 眼睛
.eyes-wrapper{ display: flex;align-items: center;宽度：80%；位置：绝对；顶部：3.5rem； justify-content：空间环绕；左：10%；
} .eyes{ display: flex;align-items: center; justify-content: 之间的空格；弹性方向：列；间隙：.2rem； } .eye-brow{ 边框半径：50%;边界左上角半径：3rem；边界右上角半径：3rem；高度：0.4rem；位置：相对；变换：translateY(-2px)；宽度：100%；背景颜色：hsl(33, 62%, 27%)；过渡：变换 .1s 缓入；} .eye-ball{ 宽度：1.5rem；高度：1.5rem；背景色：hsl(33, 62%, 27%);边界半径：50%； }
它是猴眼和猴眉的包装纸。所以它里面有两个 div 一个是 眉 第二个是 眼球
类= 猴手
.img-wrapper .monkey-hand{ 位置：绝对；变换：translateY(130%)；过渡：.7s；
}
它将包含猴子手将具有 CSS 属性 变换 translateY(130%) 与猴子的脸保持距离。
然后我们就有了我们的表格。这就是我们创建这个可爱的交互式猴子登录页面所需的全部 HTML。
剩余的 CSS 部分
.eye-ball{ 动画名称：眼睛；动画持续时间：2s；动画迭代计数：无限；动画方向：线性；变换原点：中心； } 形式{显示：弹性；对齐项目：中心； justify-content：空间环绕；flex-direction：列；间隙：2rem；
} 输入{高度：2rem；宽度：17rem；填充：0.5rem；padding-left：1rem；字体大小：1.2rem；边框：无；边框半径：.4rem； font-family: 'Rokkitt', serif;box-shadow: 0px 0px 13px 0px hsla(0, 2%, 58%, 0.438);
} 输入：焦点{大纲：无；} button{ font-size: 1.3rem;padding: 0.4rem 2rem;background-color: hsl(167, 92%, 23%);边框：无；边界半径：.4rem；白颜色;光标：指针； } @keyframes 眼睛 { 0%{高度：1.5rem;transform: translateY(0px);} 5%{height: .5rem;transform: translateY(10px);} 10%{height: 1.5rem;transform: translateY(0px) ;} } @媒体屏幕和（最大宽度：450px）{ .main-wrapper{width: 300px;} .monkey-face{width: 8rem;} .monkey-face img{width: 100%;} .eyes-wrapper{ width: 63%;top: 2.5rem;左：1.43rem； justify-content: 之间的空格；
} .eye-brow{顶部：0rem;} .monkey-hand{宽度：5.2rem;} 输入{宽度：14rem;} .monkey-thought{右：2.3rem;} .buble-1{宽度：.7rem；高度：.7rem；} .monkey-comment{字体大小：1.3rem；宽度：5rem；高度：5rem；}
}
所以让我们讨论 关键帧眼睛， 所以我们要让猴子眨眼这个关键帧将有助于实现这一点。你可能会这样想 关键帧眼睛 看起来很奇怪。但这是我们在延迟一段时间后让猴子的眼睛眨眼的唯一方法，否则它会持续眨眼。如果您以常规方式定义关键帧，您可以使用它来查看会发生什么。
现在让我们进入 Js（最后一轮）
const monkeyFace = document.querySelector('.monkey-face'); const monkeyHand = document.querySelector('.monkey-hand'); const email = document.getElementById('email'); const monkeyThought = document.querySelector('.monkey-thought'); const monkeyEyesBrows = document.querySelectorAll('.eye-brow') const mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\ w{2,3})+$/; 让度数 = 13 让 inputPrevLenght = 常量 showMonkeyHand = ()=>{monkeyHand.style.transform='translateY(35%)'} document.addEventListener('click',(e)=>{if(e.target.type!=='password'){monkeyHand.style.transform='translateY(120%)'} if(e.target.type!=='email'){monkeyFace.style.transform = `perspective(800px) rotateZ(0deg)`; monkeyEyesBrows.forEach((eyeBrow)=>{eyeBrow.style.transform =
'translateY(-2px)'}) }
}); // 移动猴脸 email.addEventListener('input',(e)=>{ let currentInputLength = String(e.target.value).length;
让 decrementInInputValue = inputPrevLenght.includes(currentInputLength); if(!decrementInInputValue && 度>= -10){
度数-=1
inputPrevLenght.push(currentInputLength)
} if(decrementInInputValue && 度<13){
度+=1
} if(!email.value.match(mailformat)){
monkeyThought.style.opacity='1';
monkeyEyesBrows.forEach((eyeBrow)=>{
eyeBrow.style.transform = 'translateY(3px)'
}) }; if(email.value.match(mailformat)){
monkeyThought.style.opacity='0';
monkeyEyesBrows.forEach((eyeBrow)=>{
eyeBrow.style.transform = 'translateY(-3px)'
}) }; monkeyFace.style.transform = `perspective(800px) rotateZ(${degree}deg)` });
这是我们唯一需要的 JS。让我们演示一下。
让我们存储要移动的猴子脸，当用户输入密码时显示猴子的手，使用正则表达式检查用户是否输入了有效的电子邮件，当用户输入电子邮件时显示猴子的想法，直到用户输入正确电子邮件和猴子的眉毛来移动它们。
那么猴脸会怎么动呢？让我们来看看…
为了移动猴脸，我们将输入事件设置为电子邮件
让 inputPrevLenght = []; email.addEventListener('input',(e)=> let currentInputLength = String(e.target.value).length; let decrementInInputValue = inputPrevLenght.includes(currentInputLength); if(!decrementInInputValue && degree>= -10){ degree -=1 inputPrevLenght.push(currentInputLength) } if(decrementInInputValue && degree<13){ degree+=1 } if(!email.value.match(mailformat)){ monkeyThought.style.opacity='1'; monkeyEyesBrows.forEach( (eyeBrow)=>{ eyeBrow.style.transform = 'translateY(3px)' }) } if(email.value.match(mailformat)){ monkeyThought.style.opacity='0' monkeyEyesBrows.forEach((eyeBrow)= >{ eyeBrow.style.transform = 'translateY(-3px)' }) }; monkeyFace.style.transform = `perspective(800px)rotateZ(${degree}deg)` });
我们会得到 电子邮件 输入值，将其转换为字符串，并获取当前输入值的长度。我们想要移动猴脸来观看电子邮件，因此我们将创建变量 degree 并为其分配初始值 10。
现在主要逻辑来了。
当用户键入电子邮件时，我们将 degree 值减少 1，当用户删除电子邮件字母时，我们必须将 degree 值增加 1。
要从左到右旋转，我们必须减小度数的值，从右到左我们必须增加度数的值。
我们如何知道用户正在输入电子邮件或删除电子邮件？
别担心，这很简单。
所以我们将创建 输入上一个长度 空数组并推送更新的电子邮件字符串长度，我们将使用包含函数（ 返回真或假 ) 查看当前长度是否为( 例如用户输入 ** 约翰** 那么我们的 _输入上一个长度_ 数组应该看起来像 [1,2,3,4] 因为用户输入了四个字母所以长度应该是 4 如果用户删除最后一个字母然后 'n' 然后更新的长度应该是 3 并且我们的数组已经有长度 3 ) 如果没有长度，我们将增加一个 1 输入上一个长度 array 它表示用户输入电子邮件，因此我们会将更新后的长度推入其中并减少度数的值。
让我们移到眉毛
所以在这里我们将检查用户电子邮件格式是否与正则表达式不匹配，然后我们将眉毛值从 -3px 转换为 0px。我们还将使猴子思维 div 的不透明度为 1。如果用户电子邮件格式确实与正则表达式匹配，那么我们将把眉毛值从 -3px 转换为 0px 和猴子思想 div 的不透明度 0。
if(!email.value.match(mailformat)){ monkeyThought.style.opacity='1'; monkeyEyesBrows.forEach((eyeBrow)=>{ eyeBrow.style.transform = 'translateY(3px)' }) }; if(email.value.match(mailformat)){ monkeyThought.style.opacity='0'; monkeyEyesBrows.forEach((eyeBrow)=>{ eyeBrow.style.transform = 'translateY(-3px)' }) };
现在最后但重要的事情是，我们必须确保当用户单击文档时，我们已重置所有内容。
document.addEventListener('click',(e)=>{ if(e.target.type!=='password'{ monkeyHand.style.transform='translateY(120%) } if(e.target.type!= ='email'){ monkeyFace.style.transform = `perspective(800px) rotateZ(0deg)`; monkeyEyesBrows.forEach((eyeBrow)=>{ eyeBrow.style.transform = 'translateY(-2px)' }) } } );
你在吗？太好了，你做到了！
所以，在下一篇文章中再见。
想提出任何建议：-
看一下 我的投资组合
给我发电子邮件 [email protected]。
快乐编码！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
