首页 > 其他分享 >前端·学习 | 登录界面特效(一)

前端·学习 | 登录界面特效(一)

时间:2022-12-26 22:45:25浏览次数:32  
标签:特效 span 鼠标 登录 动画 height width container 界面

 目录

前言:

特效展示

实现代码:

html部分:

css部分:

js部分:

总结:


前言:

 

个人学习内容分享


特效展示

871a6f7acfd746bdba51f60aed1dda72-00002.jpg?auth_key=4810461772-0-0-b4bee3f9f93308f8e373d4944ea24f2c

前端界面特效(一)

 


实现代码:

html部分:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <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="账号" id="zhanghao" >
            <input type="password" class="tbx" placeholder="密码" id="mima">
            <button class="button" type="button" id="entry_btn" onclick="myfunction()">登录</button>
        </form>
    </div>
</body>
</html>
<script src="../js/1.js"></script>

css部分:

*{
    margin:0;
    padding:0;
}
body{
    height:100vh; /* 设置body高度为100%窗口高度 */
    display: flex; /* 弹性盒子模型 */
    justify-content: center;/* 设置或检索弹性盒子元素在主轴(横轴)上中心居中*/
    align-items: center;/*居中对齐弹性盒中的各项元素:*/
    background-color: #1d1928;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column;/*灵活的将项目垂直显示,按列对齐*/
    width: 350px;
    height: 450px;
    border-radius: 20px;/*边框角弧度*/
    background-color: #5e95d8;
    box-shadow: 15px 15px 10px rgba(31, 42, 53, 0.3);  /* 盒子阴影 */
    overflow: hidden;/*溢出隐藏*/
    position:relative;/*相对定位*/
}
.container form{
    width: 350px;
    height: 200px;
    display: flex;
    justify-content: space-around;/*均匀排列每个元素,每个元素周围分配相同的空间*/
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.container form .tbx{
    width: 250px;
    height: 40px;
    outline: none;
    border: none;
    border-bottom: 1px solid #fff;
    background: none;
    color:#fff;
    font-size: 15px;
}
/* 设置文本框提示文本的样式 */
.container form .tbx::placeholder{
    color: #fff;
    font-size: 15px;
}
.container form .sub{
    width: 250px;
    height: 40px;
    outline: none;/*设置元素周围的轮廓:无*/
    border:1px solid #fff;
    border-radius: 20px;
    letter-spacing: 5px;/*设置文本中的字间距*/
    color:#fff;
    background: none;
    cursor: pointer;/*定义光标呈现为指示链接的指针(一只手)*/
    margin-top: 20px;
}
.container h1{
    color: #ecf0f1;
    font-size: 50px;
    letter-spacing: 5px;
    font-weight: 100;
    text-shadow: 5px 5px 5px rgba(33,45,58,0.3);
    z-index: 1;
}
/* 设置鼠标进入的样式 */
.container .in{
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #f55573;
    transform: translate(-50%,-50%);/*设置元素平移到当前容器的一半高和宽的地方*/
    animation: in 0.5s ease-out forwards;/*动画:使用动作in时长为0.5s,慢出,保持最后一帧的画面*/
}
/* 设置鼠标离开的样式 */
.container .out{
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: #f4516f;
    transform: translate(-50%,-50%);
    animation: out 0.5s ease-out forwards;/*动画:使用动作in时长为0.5s,慢出,保持最后一帧的画面*/
}
.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #f55e30;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
/* 动画 */
/* 设置鼠标进入时,元素的动画 */
@keyframes in{
    /* 初始关键帧 */
    0%{
        width: 0;
        height: 0;
    }
    /* 结束关键帧 */
    100%{
        width: 1200px;
        height: 1200px;
    }
}
/* 设置鼠标离开时,元素的动画 */
@keyframes out{
    /* 初始关键帧 */
    0%{
        width: 1200px;
        height: 1200px;
    }
    /* 结束关键帧 */
    100%{
        width: 0;
        height: 0;
    }
}

js部分:

主要为实现登录和特效两部分

function myfunction() {
    var x = document.getElementById("zhanghao").value;
    var y = document.getElementById("mima").value;
    if (x == "" || y == "") {
        alert("你是不是什么都没填写呀 (~ ̄(OO) ̄)ブ")
    } else if (x == "520" && y == "1314") {
        window.location.href = "#";
    } else {
        alert("你是不是填写错了呀,再好好想想吧");
    }
}
// 定义一个con绑定.container
const con = document.querySelector('.container');
// 定义两个函数开关(门)
let isIn = true;      // 鼠标进去的门,默认打开
let isOut = false;    // 鼠标出去的门,默认关闭
var span;           // 给未生成的元素取个名字span

// 添加监听
// 监听鼠标进去的事件
con.addEventListener('mouseenter', (e) => {
    // 如果进去的门是打开的,就可以执行这个函数
    if (isIn) {
        // 获取进入的鼠标位置
        // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
        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对应的父元素,即container
        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) {
        // 获取出去的鼠标位置
        // 生成元素的位置=出去点距离窗口的距离-父盒子距离窗口的距离
        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(() => {
            isIn = true;                  // 打开进入的门
        }, 100);
    }
})

总结:

那个动画扩大的时候,碰到外装盒子的时候,可以添加考虑添加回弹的效果

标签:特效,span,鼠标,登录,动画,height,width,container,界面
From: https://www.cnblogs.com/bubianyingzi/p/17007073.html

相关文章

  • 远程登录管理
    年轻这个借口,不知道还能用多久。。。---- 网易云热评小攻:win7 IP地址:192.168.1.129小受:win2003 IP地址:192.168.1.130一、图形界面登录(mstsc)1、小受新建添加一个用户......
  • 软工视频——用户界面设计
    每次我们点开一款软件时,都是直接去使用,而很少去思考它的界面设计一块,但往往用户第一眼看到的就是界面,所以说第一印象很重要。             界面设计......
  • 登录功能和添加功能
    list.jsp页面调整:<%@pagecontentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%><!......
  • 基于qml创建最简单的图像处理程序(1)-基于qml创建界面
     《基于qml创建最简单的图像处理程序》系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面​为什么使用QT,包括进一步使用QML?两个主要原因,一是因为我......
  • Flask+Vue 用户登录
    后端开发环境Flask2.2.2Flask-Cors3.0.10Flask-HTTPAuth4.5.0Flask-RESTful0.3.9itsdangerous2.0.1代码目录结构D:.│......
  • python之路56 csrf跨站请求 auth模块登录注册方法
    csrf跨站请求伪造钓鱼网站:模仿一个正规的网站让用户在该网站上做操作但是操作的结果会影响到用户正常的网站账户但是其中有一些猫腻eg:英语四六级考试需要网上先......
  • 安全单点登录(SSO)解决方案
    随着企业大量采用云应用程序,最终用户不得不在一天中处理越来越多的密码,只是为了完成他们的工作。为了进行有效的用户身份管理,您需要采用一种有效且安全的方法来管理用户;密......
  • 【AGC】集成付费下载服务sdk登录闪退
    问题背景:cp反馈集成付费下载sdk在正常登录时,出现登录闪退的报错,出现故障的手机型号操作系统版本是Android9,集成的付费下载的版本号是drm_v2.5.2.300。部分报错信息:​解决方......
  • 【AGC】集成付费下载服务sdk登录闪退
    问题背景:cp反馈集成付费下载sdk在正常登录时,出现登录闪退的报错,出现故障的手机型号操作系统版本是Android9,集成的付费下载的版本号是drm_v2.5.2.300。部分报错信息:​ ......
  • 图像处理界面--缩略图的显示
    ​​http://pan.baidu.com/s/1i5JGBFB​​编写一个图像处理类的程序,实现缩略图是非常自然的想发。基于mfc+opencv框架,实现以下代码stylechildbordernone一、填写界面主......