css实现渐变色边框动态旋转

113 阅读 0 评论 75 点赞

我是靠谱客的博主追寻苗条，最近开发中收集的这篇文章主要介绍css实现渐变色边框动态旋转，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述

场景：实现渐变色边框旋转
思路是：利用渐变色的背景旋转动画来实现边框旋转
代码如下：

<body>
  <!-- 最外层仅起到限制渐变区域大小的作用 -->
  <div class="wrap">
    <!-- 渐变显示区域 -->
    <div class="rotate"></div>
    <!-- 内容区域 -->
    <div class="content">渐变色边框</div>
  </div>
</body>

  /* 最外层的作用是让中间的.rotate溢出部分隐藏 大小根据内容区域与边框大小自由调整 */
  .wrap {
    width: 400px;
    height: 166px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 最终动态渐变边框实际内容 比.wrap大 但是因为溢出部分被隐藏 
    而中间部分又因为层级关系被.content盖住 
    最后只有.wrap和.content之间的缝隙显示这个旋转的渐变色背景 */
  .rotate {
    width: 500px;
    height: 500px;
    background: linear-gradient(rgba(255, 59, 48, 1), rgba(255, 194, 48, 1));
    animation: rotate 2s infinite linear;
    position: absolute;
    z-index: -1;
  }

  /* 内容区域 根据自身情况调整大小 */
  .content {
    width: 396px;
    height: 162px;
    background-color: #fff;
  }

  /* 渐变色背景旋转动画 */
  @keyframes rotate {
    0% {
      transform: rotateZ(0);
    }

    100% {
      transform: rotateZ(360deg);
    }
  }