使用css实现可以用于可视化项目中的比较富有科技感的动态边框，我需要源码并且里边可以填写内容

非常感谢你的问题。感谢你对可视化项目的关注和热爱。下面是一个使用CSS实现比较富有科技感的动态边框的源码，你可以自行添加内容并进行实验。

<div class="tech-border">
  <p>这是一个可以填写内容的动态边框</p>
</div>

<style>
.tech-border {
  border: 2px solid #4682b4;
  background-color: #f2f2f2;
  position: relative; 
  height: 300px; 
  width: 500px; 
}

.tech-border:before, .tech-border:after {
  content: ""; 
  position: absolute; 
}

.tech-border:before {
  top: -2px; 
  left: -2px; 
  right: -2px; 
  bottom: -2px;
  border: 2px solid #4682b4; 
  z-index: -1; 
  animation: tech-border 20s infinite; 
}

.tech-border:after {
  top: 22px; 
  left: 22px; 
  right: 22px;
  bottom: 22px; 
  border: 2px solid #4682b4; 
  z-index: -1; 
  animation: tech-border-inv 20s infinite; 
}

@keyframes tech-border {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(20px, 20px);
  }
  40% {
    transform: translate(0px, 20px);
  }
  60% {
    transform: translate(-20px, 20px);
  }
  80% {
    transform: translate(-20px, -20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes tech-border-inv {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(-20px, -20px);
  }
  40% {
    transform: translate(0px, -20px);
  }
  60% {
    transform: translate(20px, -20px);
  }
  80% {
    transform: translate(20px, 20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
</style>