css 炫酷旋转光圈

css 炫酷旋转光圈

预览图

html

<div id="box"><span></span></div>

css

 body {
    background-color: #0d1126;
  }

  #box {
    width: 300px;
    height: 400px;
    margin: 200px auto  0;
    border-radius: 20px;
    background-color: #04040a;
    position: relative;
    overflow: hidden;
  }
  #box::before{
    content: '';
    width: 500px;
    height: 500px;
    background-image: conic-gradient(transparent,transparent,transparent,#d400d4);
    position: absolute;
    left: -100px;
    top: -50px;
    animation: animate 4s linear infinite;
  }
  #box::after{
    content: '';
    width: 500px;
    height: 500px;
    left: -100px;
    top: -50px;
    background-image: conic-gradient(transparent,transparent,transparent,#00ccff);
    position: absolute;
    animation: animate 4s linear infinite;
    animation-delay: -2s;
  }
  @keyframes animate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  #box span {
    position: absolute;
    inset: 5px;
    background-color: #04040a;
    z-index: 1;
    border-radius: 20px;
  }

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!