边框线条的CSS动画效果，让网页设计流动起来！

漏网的鱼 • • 大前端 • 343 阅读

🌟 在网页设计中，边框往往被视作静态的容器，但在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边框线条流动效果是有以下几个关键点：

  1. CSS盒模型（Box Model）：通过设置width、height、margin等属性来控制元素的大小和位置。
  2. CSS定位（Positioning）：使用position: relative;和position: absolute;来设置元素的定位方式，使得线条能够相对于小盒子定位。
  3. CSS渐变（Gradients）：使用linear-gradient函数创建线条的渐变背景。
  4. CSS动画（Animations）：使用@keyframes定义动画，并通过animation属性应用到元素上，实现线条的动态效果。
  5. CSS伪类选择器（Pseudo-class selectors）：使用:nth-child伪类选择器来选择特定的线条元素，并对它们应用不同的样式。
  6. CSS动画延时（Animation delay）：通过animation-delay属性设置动画的延时时间，使得线条动画能够依次开始。
  7. CSS动画无限循环（Infinite animations）：通过设置animation-iteration-count: infinite;使得动画无限次地重复。
版权声明：
作者：漏网的鱼
链接：https://www.csev.cn/code-2/webui/20240529355.html
来源：彩色动力-测试分享
版权声明：本文欢迎任何形式转载，转载时完整保留本声明信息（包含原文链接、原文出处、原文作者、版权声明）即可。本文后续所有修改都会第一时间在原始地址更新。
THE END
免责声明
根据我国《计算机软件保护条例》第十七条规定：“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。本站资源仅供个人学习交流，请于下载后 24 小时内删除，不允许用于商业用途，否则法律问题自行承担。
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录
微信扫一扫关注蓝威网官方公众号

微信扫一扫关注蓝威网官方公众号