Html 使用 CSS 的发光边框动画没有流畅的过渡

发布于12月04日

我在YouTube上关注一个教程，关于如何创建一个Glowing Border Animation with CSS

我试着自己实施，并取得了相当的成功，然而，我遇到了一个我无法解决的问题.当我观看我的动画时，有一个不均匀的过渡.看起来就像是两个图像粘在一起， colored颜色过渡被切断了.

我如何才能在过渡看起来很顺利的情况下解决那里的问题？

我创建了一个JSFdle来显示我的意思:

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151320;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  color: #fff;
  font: 300 2rem 'Montserrat';
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.box::before,
.box::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  top: -15px;
  left: -15px;
  background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
  background-repeat: repeat;
  border-radius: 5px;
  background-size: 600%;
  animation: border 12s linear infinite;
}

.box::after {
  filter: blur(25px);
}

@keyframes border {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 250% 250%;
  }
}

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>

<div class="box">
  Greetings fellow developer!
</div>

注意:动画一开始看起来很流畅，但在大约70秒后，你会遇到过渡不对准的"截断".

body { background: #151320; } .box { position: relative; width: 300px; height: 300px; } .box::before, .box::after { content: ''; z-index: -1; position: absolute; inset: -15px; background: repeating-linear-gradient(45deg, #0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B, #00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%); border-radius: 5px; background-size: 200% 200%; animation: border 2s linear infinite; } .box::after { filter: blur(25px); } @keyframes border { 0% { background-position: bottom left; } 100% { background-position: top right; } }

Html 使用 CSS 的发光边框动画没有流畅的过渡

推荐答案

Html相关问答推荐

有没有一种方法可以用css和html在桌面上并排显示列，在移动设备上显示一个下方的列？

创建具有圆锥渐变的水平CSS聚光灯

如何在所有屏幕大小下使带有背景图像的伪元素作为标题的衬底？

如何使用CSS在NSAttributedString中为HTML文本中的图像制作覆盖图

风格规则应该适用于响应图像的哪些方面？哪种规则适用于<；图片和gt；，哪种规则适用于<；img>；？

不能以Angular 更改输入的S边框 colored颜色

轨道上的居中范围滑块拇指(Webkit)

防止position：relative的child在出界时收缩

浏览器是否可以呈现存储在代码点0x09处的字形？

div 中的垂直中心表格

如何使用多边形制作如图所示的背景

当div位于flexbox中时，如何使div的宽度与高度相同

如何将元素与常规文本垂直对齐

为什么每当我调整图片大小时它都会使我的其他元素移动

为什么 text-align 应用于 span 而不是 CSS 中的 img

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

不理解 CSS 中的 General sibling combinator (~)

为什么浏览器在 Select 一个包裹在  标签中的块级元素后包含相邻元素？

如何使文本显示在页眉/页脚之外？

在 Vue 3 中使用 JavaScript 数组显示 FontAwesome 图标