jQuery实现超级可爱的猫头鹰登录页面
2024-07-08 20:20:07
效果图：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>猫头鹰登录页面</title><style>html {background: #EBEBEB;height: 100%;font-size: 13px;}form, p {margin: 0;}body {position: relative;margin: 0;background: #008EAD;height: 60%;}body > header {padding-top: 100px;}body > section {position: absolute;bottom: -100px;left: 0;right: 0;box-sizing: border-box;width: 400px;margin-left: auto;margin-right: auto;z-index: 1;}body > header > h1 {margin: 0;color: #fff;font-size: 500%;text-align: center;}.form-box {background: white;text-align: center;border-radius: 2px;}input.icoTip {border: 1px solid #D3D3D3;border-radius: 5px;padding: 10px 0 10px 30px;background-repeat: no-repeat;width: 100%;box-sizing: border-box;background-position: 5px center;margin-bottom: 10px;}input.icoTip:focus {border-color: #3333FF;outline: 0;}.ico-account {margin-top: 30px;}.form-fields {padding-left: 15px;padding-right: 15px;}.form-action {border-top: 1px solid #E7E7E7;padding: 10px 15px;display: table;width: 100%;box-sizing: border-box;vertical-align: middle;}.form-fields > p {margin-top: 0;margin-bottom: 15px;}.form-action > :last-child {display: table-cell;text-align: right;}button[type=submit] {background: #008EAD;border: 1px solid #008EaF;color: #fff;border-radius: 10px;font-weight: bold;padding: 10px 15px;cursor: pointer;}button[type=submit]:hover {background: #694530;}</style><style>.eagel-box {text-align: center;position: relative;bottom: -100px;z-index: -1;}.sprt-eagle {background-image: url(img/owl.png);background-repeat: no-repeat;display: inline-block;vertical-align: bottom;position: relative;}.sprt-eagle.head {height: 91px;width: 97px;background-position: -30px 0;z-index: 100;}.sprt-eagle.hand-left {height: 20px;width: 30px;background-position: 0 -71px;left: -30px;z-index: 200;}.sprt-eagle.hand-left.hiding {height: 20px;background-position: 0 -37px;}.sprt-eagle.hand-left.hided {height: 37px;background-position: 0 0;}.sprt-eagle.hand-right {height: 20px;width: 30px;background-position: 0 -71px;left: 30px;z-index: 200;}.sprt-eagle.hand-right.hiding {height: 20px;background-position: -127px -37px;}.sprt-eagle.hand-right.hided {height: 37px;background-position: -127px 0;}</style>
</head>
<body>
<header></header>
<section><div class="eagel-box"><i class="sprt-eagle hand-left"></i><i class="sprt-eagle head"></i><i class="sprt-eagle hand-right"></i></div><div class="form-box"><form action="#" method="post"><div class="form-fields"><p><input class="icoTip ico-account" type="text" name="account" placeholder="账号"></p><p><input class="icoTip " name="password" type="password" placeholder="密码"></p></div><div class="form-action"><span><button type="submit" href="#">登陆</button></span></div></form></div>
</section><footer></footer><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>var eagleLeftHandEL = $(".hand-left");var eagleRightHandEL = $(".hand-right");var eagleHandHidedStatus = [{left: 45, bottom: 6}, {left: -45, bottom: 6}];$("input[type=password]").focus(function () {eagleLeftHandEL.animate(eagleHandHidedStatus[0], {step: hidingStep,duration: 500});eagleRightHandEL.animate(eagleHandHidedStatus[1], {step: hidingStep,duration: 500,complete: function () {setTimeout(eaglePeek, 1000);}});}).blur(function () {//立即结束动画eagleRightHandEL.stop(true, true);eagleLeftHandEL.stop(true, true);eagleLeftHandEL[0].hideStatus = 0;eagleLeftHandEL[0].className = "sprt-eagle hand-left";eagleLeftHandEL[0].style = "";eagleRightHandEL[0].hideStatus = 0;eagleRightHandEL[0].className = "sprt-eagle hand-right";eagleRightHandEL[0].style = "";});var eagleShow = function () {$(".eagel-box").animate({bottom: -6}, 1000, function () {this.style.zIndex = 100;});};/*** the hiding step control* @param {Object} now* @param {Object} fx*/var hidingStep = function (now, fx) {if (fx.prop === "bottom") {now = Math.floor(now);if (now === 3 && this.hideStatus !== 1) {this.classList.add("hiding");this.hideStatus = 1;} else if (now === 5 && this.hideStatus !== 2) {this.classList.remove("hiding");this.classList.add("hided");this.hideStatus = 2;}}};/*** the eagel peak*/var eaglePeek = function () {if (eagleRightHandEL[0].hideStatus === 2) {eagleRightHandEL.animate({bottom: 3,left: -25}, 300, function () {setTimeout(function () {if (eagleRightHandEL[0].hideStatus === 2) {eagleRightHandEL.animate(eagleHandHidedStatus[1], 200);}}, 500);});}};eagleShow();
</script>
</body>
</html>
源码下载：点我
jQuery实现超级可爱的猫头鹰登录页面相关推荐
- 新标签页 chrome://newtab/_380页超级可爱的猫头鹰主题环创素材包
原标题:380页超级可爱的猫头鹰主题环创素材包 Hello~大家好~长假已过,盘子家将继续陪伴各位麻麻们做好家庭陪伴,精彩素材不间断分享,英语.识字.数学.科学.手工.STEM等总有你们想要哒,绝对超 ...
- 仿迅雷官网html模板,jquery css3 animation属性仿迅雷登录页面带幻灯片单页模板
样式仿迅雷的,重新手写清爽代码 资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0814-35/images/all.css , 29088 codedown123-0 ...
- Android 超级萌的猫头鹰登录界面
最近在网上看到了一个比较不错的登录界面,效果如下图: 是不是很好玩:后来研究了一下,主要是通过自定义的View加上动画实现的,先看代码: 首先是自定义View: public class OwlVie ...
- 超级可爱的登录页面（html+css+js）
ps:前端嫩牛,技术肯定不如大牛,如果有什么不足的地方,请您提出宝贵的意见,感谢! 一.作品介绍 本作品是我独立完成的一个 个人网站的登录页面,实现了动态透明输入框.背景图自适应浏览器窗口.模拟登录验 ...
- 一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top
日期:2011/11/17 来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置.它能快速的将页面里的元素添加滚动到顶端的功能.而且只在滚动时才出现,当滚动到顶端自动消失. ...
- 2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）
//HTML部分 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <t ...
- jquery熊猫动画登录页面
下载地址 很有创意的login页面,基于jquery实现的熊猫动画登录页面. dd:
- Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
- 登录页面添加回车和单击登录事件 jQuery.ajax中的 beforeSend:function () 回调函数【日常记录】
比较有意思的地方1: 实现如下功能可以两种方法 用jQuery.ajax中的 beforeSend:function () 回调函数:如下(下方有全部代码案例) beforeSend:function ...
最新文章
- A 'return' expression required in a function with a block body ('{...}')
- 离开百度三年多，吴恩达纽交所敲钟，身价再增20亿
- how-to-get-a-job-in-deep-learning
- SpringMVC异常报406 (Not Acceptable)的解决办法
- Java基础：继承、多态、抽象、接口
- 记住，永远不要在MySQL中使用“utf8”-转
- vue项目运行启动方法（从github上下载了一个前端项目进行运行）
- boost::adaptors::type_erased相关的测试程序
- 如何认识物联网？还云里雾里不？
- 自动生成WebForm中对实体类的编辑页面
- python众数问题给定含有n个元素的多重集合s_分治法求众数 给定含有n个元素的多重集合S 联合开发网 - pudn.com...
- 百家号 不被推荐，原因：将旧闻冒充新闻发布，请修改后重新发布
- java验证码Kaptcha
- 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染
- 2019建模美赛B题（派送无人机）M奖论文
- 虚拟机克隆之后的IP修改问题
- unity urp 棉麻织物渲染
- pandas模块的统计指标--实现众数和众数的频数
- 基于移动终端的大学生心理健康交互管理系统的研究与设计
- 最新淘宝商品详情接口API(稳定低成本)