效果演示
Code
<!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="01-扩散登录表单动画.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>
// 获取容器元素
const con = document.querySelector('.container');
// 初始化变量
let isIn = true;
let isOut = false;
var 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.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;
// 延迟500毫秒后移除span元素并重置状态
setTimeout(() => {
con.removeChild(span);
isIn = true;
}, 500);
}
})
</script>
</body>
</html>
/* 设置所有元素的边距和内边距为0 */
* {
margin: 0;
padding: 0;
}
/* 设置body元素的高度为整个视口高度，并使用flex布局将内容居中显示 */
body {
height: 100vh;
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: #4471a3;
box-shadow: 15px 15px 10px rgba(33, 45, 58, 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: #cf455f;
transform: translate(-50%, -50%);
animation: in 0.5s ease-out forwards;
}
/* 定义退出动画效果中的元素样式 */
.container .out {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1200px;
height: 1200px;
border-radius: 50%;
background: #cf455f;
transform: translate(-50%, -50%);
animation: out 0.5s ease-out forwards;
}
/* 定义进入动画效果 */
@keyframes in {
0% {
width: 0;
height: 0;
}
100% {
width: 1200px;
height: 1200px;
}
}
/* 定义退出动画效果 */
@keyframes out {
0% {
width: 1200px;
height: 1200px;
}
100% {
width: 0;
height: 0;
}
}
本文暂时没有评论，来添加一个吧(●'◡'●)