文章 网页代码

简单的登录界面hover效果html

首页 > 网页代码 > 正文

简单又令人惊艳的登录界面hover效果 效果如下

简单的登录界面hover效果html第3张插图

HTML代码

```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户登陆</title> <link rel="stylesheet" href="../css/1.css"> <script src="../js/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"> <h1>仵老大</h1> <form action=""> <input type="text" class="tbx" placeholder="账号"> <input type="password" class="tbx" placeholder="密码"> <input type="submit" class="sub" value="登陆"> </form> </div> <script> //定义一个con 绑定.container //不需要jQuery支持,也可以方便的获取DOM元素 const con = document.querySelector('.container'); //定义两个函数开关(门) let isIn = true;//鼠标进去的门,默认打开 let isOut = false;//鼠标出去的门,默认关闭 var span;// 给未出生的元素起名span //添加监听 //监听鼠标进去的事件 con.addEventListener('mouseenter',(e)=>{ //如果进去的门是打开的,就可以执行这个函数 if(isIn){ //获取进入的鼠标位置 //生成元素的位置 = 进入点距离窗口的距离-父盒子距离窗口的距离 //e.clientX;相对于浏览器左上角 let inX = e.clientX-e.target.offsetLeft; let inY = e.clientY-e.target.offsetTop; //创建一个span元素,并且给他对应的出生坐标 let el = document.createElement('span'); el.style.left = inX+'px'; el.style.top = inY+'px'; con.appendChild(el); $('.container span').removeClass('out');//移除出去的动画 $('.container span').addClass("in");// 添加进入的动画 span = document.querySelector('.container span'); isIn = false;//关闭进来的门(不能使用进入的方法) isOut = true; //打开出去的门(可以使用出去的方法) } }) // 监听鼠标出去的事件 con.addEventListener('mouseleave',(e)=>{ if(isOut){ //获取进入的鼠标位置 //生成元素的位置 = 进入点距离窗口的距离-父盒子距离窗口的距离 //e.clientX;相对于浏览器左上角 let outX = e.clientX-e.target.offsetLeft; let outY = e.clientY-e.target.offsetTop; $('.container span').removeClass('in'); // 移除进入的动画 $('.container span').addClass('out'); // 添加出去的动画 // 添加出去的坐标 $('.out').css('left',outX+'px'); $('.out').css('top',outY+'px'); isOut = false; // 关闭出去的门 // 当动画结束后再删除元素 setTimeout(() =>{ con.removeChild(span);// 删除元素 isIn = true; // 打开进入的门 },500) } }) </script> </body> </html>```

CSS代码

简单的登录界面hover效果html第4张插图
此处内容已隐藏,评论后刷新即可查看!

还需要引入jquery

```https://code.jquery.com/jquery-3.6.0.min.js```
这篇文章最后更新于2022-3-27,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
小米接口刷微信支付宝步数教程
« 上一篇 03月27日
这4个高质量网站每一个都值得收藏
下一篇 » 03月27日
为了防止灌水评论,登录后即可评论!
注册登录

已有 2 条评论