今日实现个登录框的动画效果，记录一下和大家分享😊~
希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
展示效果图
Html部分
<div id="login_box">
<div class="login-container">
<span class="login-right-warp-one"></span>
<span class="login-right-warp-two"></span>
<span class="login-right-warp-main">框动画效果</span>
</div>
</div>
Css部分
基础设置
* {
margin: 0;
padding: 0;
/* font-size: 16px; */
font-size: 10px;
/* background-color: rgb(189, 188, 188); */
}
html,
body {
width: 100%;
height: 100%;
/* background-color: pink; */
margin: 0 auto;
}
主题颜色定义
- 使用CSS变量定义颜色，便于维护和主题切换
:root {
--el-color-primary: #4da197;
--el-color-primary-light: #4da197;
--el-color-white: #ffffff;
}
边框动画关键帧
- 定义了4个动画，分别控制不同方向的边框移动：
@keyframes loginLeft { /* 顶部边框从左向右移动 */ }
@keyframes loginTop { /* 右侧边框从上向下移动 */ }
@keyframes loginRight { /* 底部边框从右向左移动 */ }
@keyframes loginBottom { /* 左侧边框从下向上移动 */ }
每个动画都分为3个阶段：
- 起始点在容器外（-100%）
- 移动到容器内（100%）
- 保持最终状态
登录容器结构
.login-container {
width: 500px;
height: 500px;
border-radius: 3px;
border: 1px solid var(--el-color-primary-light);
position: relative;
overflow: hidden;
background-color: var(--el-color-white);
margin: 0 auto;
}
动态边框实现
通过两个包装元素(login-right-warp-one/two)和它们的伪元素创建四条动态边框：
第一组边框 (login-right-warp-one)
.login-right-warp-one {
&::before {
filter: hue-rotate(0deg);
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
transparent,
var(--el-color-primary)
);
animation: loginLeft 3s linear infinite;
}
&::after {
filter: hue-rotate(60deg);
top: -100%;
right: 0px;
width: 3px;
height: 100%;
background: linear-gradient(
180deg,
transparent,
var(--el-color-primary)
);
animation: loginTop 3s linear infinite;
animation-delay: 0.7s;
}
}
第二组边框 (login-right-warp-two)
.login-right-warp-two {
&::before {
filter: hue-rotate(120deg);
bottom: 0px;
right: -100%;
width: 100%;
height: 3px;
background: linear-gradient(
270deg,
transparent,
var(--el-color-primary)
);
animation: loginRight 3s linear infinite;
animation-delay: 1.4s;
}
&::after {
filter: hue-rotate(300deg);
bottom: -100%;
left: 0px;
width: 3px;
height: 100%;
background: linear-gradient(
360deg,
transparent,
var(--el-color-primary)
);
animation: loginBottom 3s linear infinite;
animation-delay: 2.1s;
}
}
css完整代码
* {
margin: 0;
padding: 0;
/* font-size: 16px; */
font-size: 10px;
/* background-color: rgb(189, 188, 188); */
}
html,
body {
width: 100%;
height: 100%;
/* background-color: pink; */
margin: 0 auto;
}
:root {
--el-color-primary: #4da197;
--el-color-primary-light: #4da197;
--el-color-white: #ffffff;
}
@keyframes loginLeft {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes loginTop {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes loginRight {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes loginBottom {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
.login-container {
width: 500px;
height: 500px;
border-radius: 3px;
border: 1px solid var(--el-color-primary-light);
position: relative;
overflow: hidden;
background-color: var(--el-color-white);
margin: 0 auto;
}
.login-right-warp-one,
.login-right-warp-two {
position: absolute;
display: block;
width: inherit;
height: inherit;
&::before,
&::after {
content: "";
position: absolute;
z-index: 1;
}
}
.login-right-warp-one {
&::before {
filter: hue-rotate(0deg);
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
transparent,
var(--el-color-primary)
);
animation: loginLeft 3s linear infinite;
}
&::after {
filter: hue-rotate(60deg);
top: -100%;
right: 0px;
width: 3px;
height: 100%;
background: linear-gradient(
180deg,
transparent,
var(--el-color-primary)
);
animation: loginTop 3s linear infinite;
animation-delay: 0.7s;
}
}
.login-right-warp-two {
&::before {
filter: hue-rotate(120deg);
bottom: 0px;
right: -100%;
width: 100%;
height: 3px;
background: linear-gradient(
270deg,
transparent,
var(--el-color-primary)
);
animation: loginRight 3s linear infinite;
animation-delay: 1.4s;
}
&::after {
filter: hue-rotate(300deg);
bottom: -100%;
left: 0px;
width: 3px;
height: 100%;
background: linear-gradient(
360deg,
transparent,
var(--el-color-primary)
);
animation: loginBottom 3s linear infinite;
animation-delay: 2.1s;
}
}
.login-right-warp-main {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
最后感谢大家阅读⭐️⭐️⭐️，如果文章对你有帮助，喜欢可以点赞或留言哟💕💕💕
