DIV 边框环绕效果

DIV 边框环绕效果实现方式，通过让背景DIV 实现旋转，给背景色加上渐变色，通过不同层级进行背景色覆盖操作完成。

import clsx from 'clsx'
import React from 'react'

export default function AnimationWapper({
  children,
  className
}: {
  children: React.ReactNode
  className?: string
}) {
  const mainClass =
    'flex justify-center items-center relative w-auto rounded-[16px] overflow-hidden z-0'
// before 伪类实现环绕元素效果
  const beforeClass =
    'before:w-[120%] before:h-[120%] before:absolute before:bat-animation_4s_spin_linear_infinite before:bat-bg-img_conic-gradient before:-z-10'
//  after 伪类实现背景覆盖效果
 const afterClass =
    'after:absolute after:-z-[9] after:inset-[1px] after:bg-white after:rounded-[15px]'

  const clsxs = clsx(mainClass, beforeClass, afterClass, className)

  return <div className={clsxs}>{children}</div>
}
复制