Design for AIBorda cônica giratória
Borda cônica giratória: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Rotating edge
A conic gradient spins around the card using a registered custom property.
CSS
@property --card-034-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg
}
.card-034 {
width: 280px;
padding: 2px;
border-radius: 16px;
background: conic-gradient(from var(--card-034-a),#22d3ee,#a78bfa,#f472b6,#22d3ee);
animation: card-034-spin 4s linear infinite;
font-family: system-ui,sans-serif
}
.card-034:hover {
animation-duration: 1.5s
}
.card-034__in {
padding: 22px;
border-radius: 14px;
background: #0f172a;
color: #f1f5f9
}
.card-034 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-034 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #94a3b8
}
@keyframes card-034-spin {
to {
--card-034-a: 360deg
}
}
@media (prefers-reduced-motion: reduce) {
.card-034, .card-034 * { animation: none; transition: none; }
}
HTML
<div class="card-034">
<div class="card-034__in">
<h3>Rotating edge</h3>
<p>A conic gradient spins around the card using a registered custom property.</p>
</div>
</div>Prompt
Construa um card de 280px com borda animada em gradiente de 2px. O invólucro externo tem padding de 2px, raio de 16px e um fundo conic-gradient (a partir de um ângulo @property registrado --a, cores #22d3ee, #a78bfa, #f472b6, de volta a #22d3ee) que anima o ângulo de 0 a 360deg em 4s linear infinitamente; no hover a rotação acelera para 1.5s. O painel interno é #0f172a com raio de 14px e padding de 22px, título branco 18px, texto 14px #94a3b8.