body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background: #000;

}

​

*, *::before, *::after {

  box-sizing: border-box;

}

​

@keyframes rotate {

  100% {

    transform: rotate(1turn);

  }

}

​

.conic {

  position: relative;

  z-index: 0;

  width: 400px;

  height: 300px;

  margin: 20px;

  border-radius: 10px;

  overflow: hidden;

  padding: 2rem;

  &::before {

    content: '';

    position: absolute;

    z-index: -2;

    left: -50%;

    top: -50%;

    width: 200%;

    height: 200%;

    background-color: #1a232a;

    background-repeat: no-repeat;

    background-position: 0 0;

    background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);

    animation: rotate 4s linear infinite;

  }

  &::after {

    content: '';

    position: absolute;

    z-index: -1;

    left: 6px;

    top: 6px;

    width: calc(100% - 12px);

    height: calc(100% - 12px);

    background: #000;

    border-radius: 5px;

  }

}

​

.conic-demo::after {

  animation: opacityChange 5s infinite linear;

}

​

@keyframes opacityChange {

  50% {

    opacity:.5;

  }

  100% {

    opacity: 1;

  }

}