* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
}
h1 {
color: white;
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 3rem;
text-align: center;
}
.checkmark-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 40px;
max-width: 1000px;
width: 100%;
}
.checkmark-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.checkmark-label {
color: white;
font-size: 14px;
font-weight: 300;
text-align: center;
}
/* Checkmark 1: Draw Animation */
.checkmark-draw {
width: 80px;
height: 80px;
border-radius: 50%;
display: block;
stroke-width: 3;
stroke: #10ac84;
stroke-miterlimit: 10;
box-shadow: inset 0 0 0 #10ac84;
animation: fill-draw 0.4s ease-in-out 0.4s forwards, scale-draw 0.3s ease-in-out 0.9s both;
}
.checkmark-draw-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #10ac84;
fill: none;
animation: stroke-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-draw-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke-draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke-draw {
100% { stroke-dashoffset: 0; }
}
@keyframes scale-draw {
0%, 100% { transform: none; }
50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill-draw {
100% { box-shadow: inset 0 0 0 40px #10ac84; }
}
/* Checkmark 2: Bounce */
.checkmark-bounce {
width: 80px;
height: 80px;
border-radius: 50%;
background: #ee5a6f;
position: relative;
animation: bounce-circle 0.6s ease-in-out;
}
.checkmark-bounce::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg) scale(0);
animation: bounce-check 0.4s ease-in-out 0.3s forwards;
}
@keyframes bounce-circle {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes bounce-check {
0% { transform: translate(-50%, -60%) rotate(45deg) scale(0); }
50% { transform: translate(-50%, -60%) rotate(45deg) scale(1.2); }
100% { transform: translate(-50%, -60%) rotate(45deg) scale(1); }
}
/* Checkmark 3: Fade & Rotate */
.checkmark-fade {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f39c12;
position: relative;
opacity: 0;
transform: rotate(-180deg);
animation: fade-rotate 0.6s ease-out forwards;
}
.checkmark-fade::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg);
}
@keyframes fade-rotate {
to {
opacity: 1;
transform: rotate(0deg);
}
}
/* Checkmark 4: Pop */
.checkmark-pop {
width: 80px;
height: 80px;
border-radius: 50%;
background: #9b59b6;
position: relative;
animation: pop-anim 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.checkmark-pop::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg);
animation: pop-check 0.3s ease-out 0.2s backwards;
}
@keyframes pop-anim {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes pop-check {
0% { opacity: 0; transform: translate(-50%, -60%) rotate(45deg) scale(0); }
100% { opacity: 1; transform: translate(-50%, -60%) rotate(45deg) scale(1); }
}
/* Checkmark 5: Slide In */
.checkmark-slide {
width: 80px;
height: 80px;
border-radius: 50%;
background: #3498db;
position: relative;
animation: slide-in 0.5s ease-out;
}
.checkmark-slide::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-150%, -60%) rotate(45deg);
animation: slide-check 0.4s ease-out 0.3s forwards;
}
@keyframes slide-in {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-check {
to { transform: translate(-50%, -60%) rotate(45deg); }
}
/* Checkmark 6: Pulse */
.checkmark-pulse {
width: 80px;
height: 80px;
border-radius: 50%;
background: #e74c3c;
position: relative;
animation: pulse-anim 1s ease-in-out infinite;
}
.checkmark-pulse::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg);
}
@keyframes pulse-anim {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
}
/* Checkmark 7: Flip */
.checkmark-flip {
width: 80px;
height: 80px;
border-radius: 50%;
background: #1abc9c;
position: relative;
animation: flip-anim 0.6s ease-in-out;
transform-style: preserve-3d;
}
.checkmark-flip::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg);
}
@keyframes flip-anim {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
/* Checkmark 8: Glow */
.checkmark-glow {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f368e0;
position: relative;
animation: glow-anim 2s ease-in-out infinite;
}
.checkmark-glow::after {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 4px solid white;
border-top: 0;
border-left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) rotate(45deg);
}
@keyframes glow-anim {
0%, 100% {
box-shadow: 0 0 10px rgba(243, 104, 224, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(243, 104, 224, 1),
0 0 50px rgba(243, 104, 224, 0.8);
}
}
@media (max-width: 768px) {
.checkmark-container {
grid-template-columns: repeat(2, 1fr);
}
h1 {
font-size: 2rem;
}
}
No comments yet. Be the first!