边框线条的魔法:CSS动画效果,让网页设计流动起来!

简介: 边框线条的魔法:CSS动画效果,让网页设计流动起来!

先上效果



🌟 在网页设计中,边框往往被视作静态的容器,但在CSS的魔法下,它们可以变得生动而富有动感。CSS边框线条流动效果是一种创新的视觉技术,它能够让边框看起来像是在流动或变化,为网页添加一种独特的动态美感。



完整代码


以下是完整代码:

HTML:

<div class="container">
    
    <div class="box">
      HELLO WORLD
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
  </div>

CSS代码:


.container {
    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):通过设置widthheightmargin等属性来控制元素的大小和位置。
  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;使得动画无限次地重复。
相关文章
|
12天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
27 0
JS配合CSS3实现动画和拖动小星星小Demo
|
2月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
41 5
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
52 1
|
2月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
2月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
2月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果
|
2月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
2月前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
35 0
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)