CSS 渐变边框及动画-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS 渐变边框及动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

转载请注明出处，点击此处查看更多精彩内容

CSS 渐变边框及动画,css,前端,动画

用 CSS 实现渐变边框及动画，下面对关键点进行解释说明，查看完整代码及预览效果请点击这里。

简单说明原理：使用伪元素 ::before 绘制一个渐变色，然后使用伪元素 ::after 绘制背景，使其遮住渐变色的一部分，仅保留边框部分，然后添加旋转动画即可。

DOM 结构

<div class="container"></div>

.container {
  border-radius: var(--border-radius);
  overflow: hidden;
}

overflow: hidden 防止内部元素溢出。

渐变背景

使用 ::before 伪元素实现一个径向渐变背景。

.container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 150%;
  padding-bottom: 150%;
  background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
  z-index: -1;
}

这里没有直接设置伪元素高度，而是使用 width: 200%; padding-bottom: 200%; 绘制一个正方形，并且尺寸大于父元素，防止动画时背景不能完全覆盖父元素。

渐变边框

使用 ::after 伪元素作为遮罩及背景，遮住 ::before 伪元素使其仅展示出边框区域。

.container::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  background: var(--bg-color);
  border-radius: var(--border-radius);
  z-index: -1;
}

添加动画

给 :before 添加旋转动画。

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
    
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.container::before {
  ...,
  animation: rotate 3s linear infinite;
}

边框追逐效果

通过设置分区的渐变背景即可完成边框上多线条相互追逐的炫酷效果。文章来源地址https://www.toymoban.com/news/detail-593714.html

.container {
  --border-color: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg, transparent 90deg, transparent 180deg, #2a8af6 180deg, transparent 270deg);
}