代码出处:https://www.bilibili.com/video/BV1Jp4y1y75i
移入效果截图:
移出效果截图:
是一个移入移出的动画的效果,截图看不出
使用vue写的,copy代码直接运行就可以了
<template>
<div class='container'>
<h1>bilibili</h1>
<form action=''>
<input class='tbx' type='text' placeholder='请输入账号'/>
<input class='tbx' type='password' placeholder='请输入密码'/>
<input class='sub' type='submit' value='提交'/>
</form>
</div>
</template>
<script>
export default {
name: 'loginForm',
methods: {
activity () {
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'
el.classList.add('in', 'lf-span')
con.appendChild(el)
span = document.querySelector('.container span')
isIn = false
isOut = true
}
})
/* 监听鼠标移出的事件+处理方法 */
con.addEventListener('mouseleave', e => {
if (isOut) {
/* 获取鼠标进入时的位置 */
/* 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离 */
let inx = e.clientX - e.target.offsetLeft
let iny = e.clientY - e.target.offsetTop
/* 移出进入动画并添加移出动画 */
document.querySelector('.lf-span').classList.add('out')
document.querySelector('.lf-span').style.left = inx + 'px'
document.querySelector('.lf-span').style.top = iny + 'px'
isOut = false
/* 移出动画结束后删除元素 */
setTimeout(() => {
con.removeChild(span)
isIn = true
}, 500)
}
})
}
},
mounted() {
this.activity()
},
}
</script>
<style lang="less">
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #2c3e50;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 450px;
border-radius: 20px;
background-color: #34495e;
box-shadow: 15px 15px 10px rgba(33, 45, 58, 0.3);
overflow: hidden;
position: relative;
}
.container form {
width: 300px;
height: 200px;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
z-index: 1;
}
.container form .tbx {
width: 200px;
height: 40px;
outline: none;
border: none;
border-bottom: 1px solid #FFF;
background: none;
color: #FFF;
}
.container form .tbx::placeholder {
color: #FFF;
font-size: 15px;
}
.container form .sub {
width: 200px;
height: 40px;
outline: none;
border: 1px solid #FFF;
border-radius: 20px;
letter-spacing: 5px;
color: #FFF;
background: none;
cursor: pointer;
}
.container h1 {
z-index: 1;
color: #ecf0f1;
letter-spacing: 5px;
padding-left: 5px;
font-size: 50px;
font-weight: 100;
text-shadow: 5px 5px 5px rgba(33, 45, 58, 0.3)
}
.container .in {
position: absolute;
top: 0;
left: 0;
display: block;
width: 0;
height: 0;
border-radius: 50%;
background: #3498bd;
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: #3498bd;
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;
}
}
</style>