边框线条的CSS动画效果,让网页设计流动起来!
🌟 在网页设计中,边框往往被视作静态的容器,但在CSS的魔法下,它们可以变得生动而富有动感。CSS边框线条流动效果是一种创新的视觉技术,它能够让边框看起来像是在流动或变化,为网页添加一种独特的动态美感。
以下是完整代码:
HTML:
HELLO WORLD
CSS代码:
.containe {
width: 800px;
height: 680px;
margin: 20px auto;
/* border: 1px solid green; */
position: relative;
}
.box {
width: 420px;
height: 210px;
margin: 100px auto;
line-height: 210px;
text-align: center;
font-size: 40px;
position: relative;
overflow: hidden;
}
.line {
position: absolute;
}
.line:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, transparent, rgb(234, 249, 158));
animation: animate1 8s linear infinite;
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.line:nth-child(2) {
top: -100%;
right: 0;
width: 8px;
height: 100%;
background: linear-gradient(180deg, transparent, rgb(160, 245, 250));
animation: animate2 8s linear infinite;
/* 注意要加上延时触发动画效果,这样线条才会依次触发 */
animation-delay: 2s;
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.line:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
background: linear-gradient(270deg, transparent, rgb(245, 58, 220));
animation: animate3 8s linear infinite;
animation-delay: 4s;
}
@keyframes animate3 {
0% {
right: -100%;
height: 8px;
}
50%,
100% {
height: 8px;
right: 100%;
}
}
.line:nth-child(4) {
bottom: -100%;
left: 0;
width: 8px;
height: 100%;
background: linear-gradient(360deg, transparent, rgb(254, 138, 49));
animation: animate4 8s linear infinite;
animation-delay: 6s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
🌟 CSS边框线条流动效果是有以下几个关键点:
- CSS盒模型(Box Model):通过设置
width
、height
、margin
等属性来控制元素的大小和位置。 - CSS定位(Positioning):使用
position: relative;
和position: absolute;
来设置元素的定位方式,使得线条能够相对于小盒子定位。 - CSS渐变(Gradients):使用
linear-gradient
函数创建线条的渐变背景。 - CSS动画(Animations):使用
@keyframes
定义动画,并通过animation
属性应用到元素上,实现线条的动态效果。 - CSS伪类选择器(Pseudo-class selectors):使用
:nth-child
伪类选择器来选择特定的线条元素,并对它们应用不同的样式。 - CSS动画延时(Animation delay):通过
animation-delay
属性设置动画的延时时间,使得线条动画能够依次开始。 - CSS动画无限循环(Infinite animations):通过设置
animation-iteration-count: infinite;
使得动画无限次地重复。
版权声明:
作者:89391311
链接:https://www.csev.cn/code-2/webui/20240529355.html/
来源:测试分享
版权声明:本文欢迎任何形式转载,转载时完整保留本声明信息(包含原文链接、原文出处、原文作者、版权声明)即可。本文后续所有修改都会第一时间在原始地址更新。
作者:89391311
链接:https://www.csev.cn/code-2/webui/20240529355.html/
来源:测试分享
版权声明:本文欢迎任何形式转载,转载时完整保留本声明信息(包含原文链接、原文出处、原文作者、版权声明)即可。本文后续所有修改都会第一时间在原始地址更新。
THE END
二维码
打赏
![](http://www.csev.cn/wp-content/uploads/2024/03/微信图片_20240328172106.jpg)
文章目录
关闭
![微信扫一扫关注蓝威网官方公众号](www.csev.cn/wp-content/uploads/2024/03/gongzhonghao.png)
微信扫一扫关注蓝威网官方公众号
共有 0 条评论