用純css實現(xiàn)絲滑邊框線條動畫
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: ...,
};
