* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a040f 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header p {
font-size: 1.25rem;
opacity: 0.9;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.arrow-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.card-title {
font-size: 1.25rem;
color: #2c3e50;
font-weight: 600;
text-align: center;
}
.arrow-container {
width: 100%;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 12px;
padding: 2rem;
}
/* 1. Bouncing Arrow */
.arrow-bounce {
font-size: 3rem;
color: #667eea;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* 2. Sliding Arrow */
.arrow-slide {
font-size: 3rem;
color: #667eea;
animation: slide 1.5s ease-in-out infinite;
}
@keyframes slide {
0%, 100% { transform: translateX(-20px); opacity: 0; }
50% { transform: translateX(0); opacity: 1; }
}
/* 3. Pulsing Arrow */
.arrow-pulse {
font-size: 3rem;
color: #667eea;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
/* 4. Rotating Arrow */
.arrow-rotate {
font-size: 3rem;
color: #667eea;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 5. Sequential Arrows */
.arrows-sequential {
display: flex;
gap: 0.5rem;
}
.arrows-sequential ion-icon {
font-size: 2.5rem;
color: #667eea;
animation: fadeInOut 1.5s ease-in-out infinite;
}
.arrows-sequential ion-icon:nth-child(2) {
animation-delay: 0.3s;
}
.arrows-sequential ion-icon:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* 6. Growing Arrow */
.arrow-grow {
font-size: 3rem;
color: #667eea;
animation: grow 1.5s ease-in-out infinite;
}
@keyframes grow {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.2); opacity: 0; }
}
/* 7. Shaking Arrow */
.arrow-shake {
font-size: 3rem;
color: #667eea;
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* 8. Wave Arrow */
.arrow-wave {
font-size: 3rem;
color: #667eea;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-10px) rotate(-10deg); }
75% { transform: translateY(10px) rotate(10deg); }
}
/* 9. Spinning Arrows Circle */
.arrows-circle {
position: relative;
width: 100px;
height: 100px;
}
.arrows-circle ion-icon {
position: absolute;
font-size: 2rem;
color: #667eea;
top: 50%;
left: 50%;
}
.arrows-circle ion-icon:nth-child(1) {
transform: translate(-50%, -50%) translateY(-40px);
animation: circleRotate 2s linear infinite;
}
.arrows-circle ion-icon:nth-child(2) {
transform: translate(-50%, -50%) translateX(40px);
animation: circleRotate 2s linear infinite;
animation-delay: 0.5s;
}
.arrows-circle ion-icon:nth-child(3) {
transform: translate(-50%, -50%) translateY(40px);
animation: circleRotate 2s linear infinite;
animation-delay: 1s;
}
.arrows-circle ion-icon:nth-child(4) {
transform: translate(-50%, -50%) translateX(-40px);
animation: circleRotate 2s linear infinite;
animation-delay: 1.5s;
}
@keyframes circleRotate {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
/* 10. Glowing Arrow */
.arrow-glow {
font-size: 3rem;
color: #667eea;
animation: glow 1.5s ease-in-out infinite;
filter: drop-shadow(0 0 0px #667eea);
}
@keyframes glow {
0%, 100% { filter: drop-shadow(0 0 5px #667eea); }
50% { filter: drop-shadow(0 0 20px #667eea); }
}
/* 11. Zigzag Arrow */
.arrow-zigzag {
font-size: 3rem;
color: #667eea;
animation: zigzag 1s ease-in-out infinite;
}
@keyframes zigzag {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(15px, -15px); }
50% { transform: translate(0, 0); }
75% { transform: translate(-15px, 15px); }
}
/* 12. Typing Arrow */
.arrow-typing {
font-size: 3rem;
color: #667eea;
animation: typing 1.5s steps(3) infinite;
}
@keyframes typing {
0% { transform: translateX(-30px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/* 13. Elastic Arrow */
.arrow-elastic {
font-size: 3rem;
color: #667eea;
animation: elastic 2s ease-in-out infinite;
}
@keyframes elastic {
0%, 100% { transform: scale(1, 1); }
25% { transform: scale(1.2, 0.8); }
50% { transform: scale(0.8, 1.2); }
75% { transform: scale(1.1, 0.9); }
}
/* 14. Double Arrow */
.arrows-double {
position: relative;
width: 80px;
height: 80px;
}
.arrows-double ion-icon {
position: absolute;
font-size: 3rem;
color: #667eea;
}
.arrows-double ion-icon:first-child {
animation: doubleArrow1 1.5s ease-in-out infinite;
}
.arrows-double ion-icon:last-child {
animation: doubleArrow2 1.5s ease-in-out infinite;
}
@keyframes doubleArrow1 {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(20px); opacity: 0.3; }
}
@keyframes doubleArrow2 {
0%, 100% { transform: translateX(-20px); opacity: 0.3; }
50% { transform: translateX(0); opacity: 1; }
}
/* 15. Loading Arrows */
.arrows-loading {
display: flex;
gap: 0.75rem;
}
.arrows-loading ion-icon {
font-size: 2rem;
color: #667eea;
animation: loading 1s ease-in-out infinite;
}
.arrows-loading ion-icon:nth-child(1) {
animation-delay: 0s;
}
.arrows-loading ion-icon:nth-child(2) {
animation-delay: 0.2s;
}
.arrows-loading ion-icon:nth-child(3) {
animation-delay: 0.4s;
}
.arrows-loading ion-icon:nth-child(4) {
animation-delay: 0.6s;
}
@keyframes loading {
0%, 100% { transform: translateY(0); opacity: 0.3; }
50% { transform: translateY(-20px); opacity: 1; }
}
/* 16. Breathing Arrow */
.arrow-breathe {
font-size: 3rem;
color: #667eea;
animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(0.9); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.grid {
grid-template-columns: 1fr;
}
}
No comments yet. Be the first!