目录
前言：
个人学习内容分享
特效展示
实现代码：
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