用纯css实现丝滑边框线条动画

2024-06-06 10-48-47.2024-06-06 10_49_19.gif

// react component render
<div className="w-full h-screen flex items-center justify-center">
      <div
        className={classNames(
          "relative mx-auto w-[300px] h-[200px] p-[1px] bg-[#04071D]",
          "rounded-xl",
          "overflow-hidden",
        )}
      >
        <div
          className={classNames(
            "absolute inset-0 w-[80px] h-[80px] rounded-xl",
            "animate-moveAround translate-x-[-40px] translate-y-[-40px]",
            "bg-[radial-gradient(#CBACF9_40%,transparent_60%)] opacity-80",
          )}
        />
        <div
          className={classNames(
            "relative w-full h-full",
            "bg-slate-900/[0.] backdrop-blur-xl",
            "border-slate-800 border-[0.5px] rounded-xl",
          )}
        />
      </div>
    </div>

export default {
  content: ["./src/**/*.{jsx,tsx,js,ts}"],
  theme: {
    extend: ...,  
    animation: {    
      moveAround: "moveAround 10s linear infinite",
    },
    keyframes: {   
      moveAround: {
        "0% 100%": {
          top: 0,
          left: 40,
        },
        "27.2%": {
          top: 0,
          left: "calc(100%-40px)",
        },
        "30.23%": {
          top: 40,
          left: "calc(100%)",
        },
        "46.96%": {
          top: "calc(100%-40px)",
          left: "calc(100%)",
        },
        "50%": {
          top: "calc(100%)",
          left: "calc(100%-40px)",
        },
        "77.19%": {
          top: "calc(100%)",
          left: 40,
        },
        "80.23%": {
          top: "calc(100%-40px)",
          left: 0,
        },
        "96.96%": {
          top: 40,
          left: 0,
        },
      },
    },
  },
  plugins: ...,
};