* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #c8b6ff 0%, #b8a0ff 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 60px;
}
.header h1 {
font-size: 48px;
font-weight: 700;
color: #6a4c93;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.header p {
font-size: 20px;
color: #9d84b7;
font-weight: 500;
}
.section {
background: white;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(106, 76, 147, 0.2);
border: 3px solid #6a4c93;
}
.section-title {
font-size: 28px;
font-weight: 700;
color: #6a4c93;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 15px;
}
.section-description {
font-size: 16px;
color: #9d84b7;
margin-bottom: 30px;
}
.icons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 30px;
}
.icon-box {
background: linear-gradient(135deg, #e6dcff 0%, #f0ebff 100%);
border-radius: 15px;
padding: 30px 20px;
text-align: center;
border: 2px solid #6a4c93;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.icon-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(106, 76, 147, 0.3);
}
.icon-box i {
font-size: 48px;
color: #6a4c93;
margin-bottom: 15px;
}
.icon-label {
font-size: 14px;
font-weight: 600;
color: #6a4c93;
}
/* Spin Animation */
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Pulse Animation */
.pulse {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
/* Bounce Animation */
.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Shake Animation */
.shake:hover {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* Swing Animation */
.swing {
transform-origin: top center;
animation: swing 2s ease-in-out infinite;
}
@keyframes swing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-15deg); }
}
/* Flip Animation */
.flip {
animation: flip 2s infinite;
}
@keyframes flip {
0%, 100% { transform: rotateY(0); }
50% { transform: rotateY(180deg); }
}
/* Tada Animation */
.tada:hover {
animation: tada 1s;
}
@keyframes tada {
0%, 100% { transform: scale(1) rotate(0); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
/* Heartbeat Animation */
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
10%, 30% { transform: scale(0.9); }
20%, 40% { transform: scale(1.1); }
}
/* Wobble Animation */
.wobble:hover {
animation: wobble 1s;
}
@keyframes wobble {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-25px) rotate(-5deg); }
30% { transform: translateX(20px) rotate(3deg); }
45% { transform: translateX(-15px) rotate(-3deg); }
60% { transform: translateX(10px) rotate(2deg); }
75% { transform: translateX(-5px) rotate(-1deg); }
}
/* Rotate Animation */
.rotate {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Float Animation */
.float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Glow Animation */
.glow {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% {
filter: drop-shadow(0 0 5px #6a4c93);
}
50% {
filter: drop-shadow(0 0 20px #6a4c93) drop-shadow(0 0 30px #9d84b7);
}
}
/* Zoom Animation */
.zoom:hover {
animation: zoom 0.5s;
}
@keyframes zoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
/* Fade In/Out Animation */
.fade-pulse {
animation: fade-pulse 2s ease-in-out infinite;
}
@keyframes fade-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Jello Animation */
.jello:hover {
animation: jello 1s;
}
@keyframes jello {
0%, 100% { transform: skewX(0deg) skewY(0deg); }
30% { transform: skewX(25deg) skewY(25deg); }
40% { transform: skewX(-20deg) skewY(-20deg); }
50% { transform: skewX(15deg) skewY(15deg); }
65% { transform: skewX(-10deg) skewY(-10deg); }
75% { transform: skewX(5deg) skewY(5deg); }
}
/* Rubber Band Animation */
.rubber-band:hover {
animation: rubber-band 1s;
}
@keyframes rubber-band {
0%, 100% { transform: scale(1); }
30% { transform: scaleX(1.25) scaleY(0.75); }
40% { transform: scaleX(0.75) scaleY(1.25); }
50% { transform: scaleX(1.15) scaleY(0.85); }
65% { transform: scaleX(0.95) scaleY(1.05); }
75% { transform: scaleX(1.05) scaleY(0.95); }
}
/* Interactive Demo Section */
.demo-section {
background: white;
border-radius: 20px;
padding: 50px;
box-shadow: 0 10px 40px rgba(106, 76, 147, 0.2);
border: 3px solid #6a4c93;
text-align: center;
}
.demo-icon {
font-size: 120px;
color: #6a4c93;
margin: 40px 0;
display: inline-block;
}
.animation-controls {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.control-btn {
padding: 12px 24px;
background: #6a4c93;
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.control-btn:hover {
background: #9d84b7;
transform: translateY(-2px);
}
.control-btn.active {
background: #c8b6ff;
color: #6a4c93;
}
@media (max-width: 768px) {
.header h1 {
font-size: 36px;
}
.section {
padding: 25px;
}
.icons-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
}
.icon-box i {
font-size: 36px;
}
.demo-icon {
font-size: 80px;
}
.demo-section {
padding: 30px 20px;
}
}
const demoIcon = document.getElementById('demoIcon');
const buttons = document.querySelectorAll('.control-btn');
function changeAnimation(animationClass) {
// Remove all animation classes
demoIcon.className = 'fas fa-star demo-icon';
// Remove active state from all buttons
buttons.forEach(btn => btn.classList.remove('active'));
// Add new animation class
demoIcon.classList.add(animationClass);
// Add active state to clicked button
event.target.classList.add('active');
// For hover animations, trigger them programmatically
if (['shake', 'tada', 'wobble', 'zoom', 'jello', 'rubber-band'].includes(animationClass)) {
// Remove and re-add to restart animation
void demoIcon.offsetWidth;
demoIcon.style.animation = 'none';
setTimeout(() => {
demoIcon.style.animation = '';
}, 10);
}
}
No comments yet. Be the first!