✨ How to Create Eye-Catching 🎨 Animated Cards with HTML & CSS Step-by-Step Guide
HTML CODE
<!-- From Uiverse.io by iconicchandu -->
<div class="card">
<div class="card__border"></div>
<div class="card_title__container">
<span class="card_title">Keys to Success</span>
<p class="card_paragraph">Best way to be success in your life.</p>
</div>
<hr class="line" />
<ul class="card__list">
<li class="card__list_item">
<span class="check">
<svg
class="check_svg"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="list_text">Set Clear Goals</span>
</li>
<li class="card__list_item">
<span class="check">
<svg
class="check_svg"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="list_text">Stay Organized</span>
</li>
<li class="card__list_item">
<span class="check">
<svg
class="check_svg"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="list_text">Continuous Learning</span>
</li>
<li class="card__list_item">
<span class="check">
<svg
class="check_svg"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="list_text">Time Management</span>
</li>
<li class="card__list_item">
<span class="check">
<svg
class="check_svg"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
fill-rule="evenodd"
></path>
</svg>
</span>
<span class="list_text">Maintain a Positive Attitude</span>
</li>
</ul>
<button class="button">Get Your Success</button>
</div>
CSS CODE
/* From Uiverse.io by iconicchandu */
.card {
--white: hsl(0, 0%, 100%);
--black: hsl(240, 15%, 9%);
--paragraph: hsl(0, 0%, 83%);
--line: hsl(240, 9%, 17%);
--primary: hsl(189, 92%, 58%);
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
width: 19rem;
background-color: hsla(240, 15%, 9%, 1);
background-image: radial-gradient(
at 88% 40%,
hsla(240, 15%, 9%, 1) 0px,
transparent 85%
),
radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
border-radius: 1rem;
box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
}
.card .card__border {
overflow: hidden;
pointer-events: none;
position: absolute;
z-index: -10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 2px);
height: calc(100% + 2px);
background-image: linear-gradient(
0deg,
hsl(0, 0%, 100%) -50%,
hsl(0, 0%, 40%) 100%
);
border-radius: 1rem;
}
.card .card__border::before {
content: "";
pointer-events: none;
position: fixed;
z-index: 200;
top: 50%;
left: 50%;
transform: translate(-50%, -50%), rotate(0deg);
transform-origin: left;
width: 200%;
height: 10rem;
background-image: linear-gradient(
0deg,
hsla(0, 0%, 100%, 0) 0%,
hsl(189, 100%, 50%) 40%,
hsl(189, 100%, 50%) 60%,
hsla(0, 0%, 40%, 0) 100%
);
animation: rotate 8s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
.card .card_title__container .card_title {
font-size: 1rem;
color: var(--white);
}
.card .card_title__container .card_paragraph {
margin-top: 0.25rem;
width: 65%;
font-size: 0.5rem;
color: var(--paragraph);
}
.card .line {
width: 100%;
height: 0.1rem;
background-color: var(--line);
border: none;
}
.card .card__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card .card__list .card__list_item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.card .card__list .card__list_item .check {
display: flex;
justify-content: center;
align-items: center;
width: 1rem;
height: 1rem;
background-color: var(--primary);
border-radius: 50%;
}
.card .card__list .card__list_item .check .check_svg {
width: 0.75rem;
height: 0.75rem;
fill: var(--black);
}
.card .card__list .card__list_item .list_text {
font-size: 0.75rem;
color: var(--white);
}
.card .button {
cursor: pointer;
padding: 0.5rem;
width: 100%;
background-image: linear-gradient(
0deg,
hsl(189, 92%, 58%),
hsl(189, 99%, 26%) 100%
);
font-size: 0.75rem;
color: var(--white);
border: 0;
border-radius: 9999px;
box-shadow: inset 0 -2px 25px -4px var(--white);
}
0 Comments