Add interactive visual content system for kids
✨ New Features: - Visual animations for science concepts (sky, birds, water, etc.) - Interactive educational illustrations with emoji and animations - Topic-based visual content mapping system - Kid-friendly CSS animations and effects - Enhanced learning experience for ages 8-12 🎨 Visual Content Includes: - Sky/atmosphere light scattering animation - Bird flight mechanics visualization - Water molecule structure and behavior - Earth orbit and seasons explanation - Computer data flow representation - Brain and dream visualization - Rainbow light spectrum breakdown - General thinking process animations 📱 Features: - Responsive design for all devices - Smooth animations and transitions - Auto-detection of topics from questions - Multi-language visual descriptions - Engaging educational content
This commit is contained in:
root
571
visual-animations.css
Normal file
571
visual-animations.css
Normal file
@@ -0,0 +1,571 @@
|
||||
/* Visual Animations for Educational Concepts */
|
||||
|
||||
/* General Visual Concept Styles */
|
||||
.visual-concept {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: slideInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.visual-concept::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
|
||||
animation: shimmer 3s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Sky/Atmosphere Animation */
|
||||
.sky-layers {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.atmosphere-layer {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.light-rays {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.light-ray {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 0, 0.6), transparent);
|
||||
animation: lightScatter 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.light-ray:nth-child(1) {
|
||||
left: 20%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.light-ray:nth-child(2) {
|
||||
left: 50%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.light-ray:nth-child(3) {
|
||||
left: 80%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.scattered-light {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 100, 255, 0.8);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
/* Bird Flight Animation */
|
||||
.bird-flight {
|
||||
height: 180px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bird {
|
||||
position: relative;
|
||||
animation: bobbing 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.wing {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
animation: wingFlap 1s infinite;
|
||||
}
|
||||
|
||||
.wing-left {
|
||||
left: -30px;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.wing-right {
|
||||
right: -30px;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.bird-body {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.air-currents {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.air-flow {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
animation: floatUpDown 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.up-flow {
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
background: rgba(0, 255, 0, 0.2);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.down-flow {
|
||||
bottom: 20%;
|
||||
right: 20%;
|
||||
background: rgba(255, 0, 0, 0.2);
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
/* Water Molecule Animation */
|
||||
.water-molecules {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.molecule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
animation: moleculeVibrate 1.5s infinite;
|
||||
}
|
||||
|
||||
.atom {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hydrogen {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.oxygen {
|
||||
background: #4ecdc4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bond {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: #333;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.water-droplet {
|
||||
font-size: 48px;
|
||||
animation: dropletBounce 2s infinite;
|
||||
}
|
||||
|
||||
.wetness-effect {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Seasons/Earth Animation */
|
||||
.solar-system {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sun {
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
animation: sunGlow 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.earth-orbit {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: orbit 8s infinite linear;
|
||||
}
|
||||
|
||||
.earth {
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.earth.tilted {
|
||||
transform: translateX(-50%) rotate(23.5deg);
|
||||
}
|
||||
|
||||
.season-labels {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.season {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.season.summer {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.season.winter {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* Computer/Data Flow Animation */
|
||||
.computer-brain {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cpu {
|
||||
font-size: 24px;
|
||||
padding: 10px;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
animation: cpuPulse 2s infinite;
|
||||
}
|
||||
|
||||
.data-flow {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.binary-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: #00ff00;
|
||||
background: #000;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
animation: binaryScroll 1s infinite;
|
||||
}
|
||||
|
||||
.binary-code:nth-child(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.memory {
|
||||
font-size: 18px;
|
||||
padding: 8px 12px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Dream Animation */
|
||||
.sleeping-brain {
|
||||
height: 180px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brain {
|
||||
font-size: 48px;
|
||||
animation: brainPulse 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.dream-bubbles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dream-bubble {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
animation: dreamFloat 4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.dream-bubble:nth-child(1) {
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.dream-bubble:nth-child(2) {
|
||||
left: 50%;
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
|
||||
.dream-bubble:nth-child(3) {
|
||||
right: 10%;
|
||||
animation-delay: 2.6s;
|
||||
}
|
||||
|
||||
.sleep-waves {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
font-size: 18px;
|
||||
color: #667eea;
|
||||
animation: waveMove 2s infinite;
|
||||
}
|
||||
|
||||
/* Rainbow/Light Spectrum Animation */
|
||||
.light-spectrum {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.white-light {
|
||||
font-size: 24px;
|
||||
animation: lightPulse 2s infinite;
|
||||
}
|
||||
|
||||
.prism {
|
||||
font-size: 32px;
|
||||
animation: prismRotate 4s infinite linear;
|
||||
}
|
||||
|
||||
.rainbow-colors {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
animation: colorSpread 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.rainbow-colors span {
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
animation: colorPulse 1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* General Thinking Animation */
|
||||
.thinking-process {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brain-icon {
|
||||
font-size: 48px;
|
||||
animation: thinkingPulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.thought-bubbles {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
font-size: 24px;
|
||||
animation: bubbleFloat 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.bubble:nth-child(1) { animation-delay: 0s; }
|
||||
.bubble:nth-child(2) { animation-delay: 1s; }
|
||||
.bubble:nth-child(3) { animation-delay: 2s; }
|
||||
|
||||
/* Keyframe Animations */
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightScatter {
|
||||
0%, 100% { opacity: 0.3; transform: translateY(0); }
|
||||
50% { opacity: 1; transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
|
||||
40% { transform: translateX(-50%) translateY(-10px); }
|
||||
60% { transform: translateX(-50%) translateY(-5px); }
|
||||
}
|
||||
|
||||
@keyframes bobbing {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes wingFlap {
|
||||
0%, 100% { transform: rotateZ(0deg); }
|
||||
50% { transform: rotateZ(-30deg); }
|
||||
}
|
||||
|
||||
@keyframes floatUpDown {
|
||||
0%, 100% { transform: translateY(0); opacity: 0.7; }
|
||||
50% { transform: translateY(-15px); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes moleculeVibrate {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px); }
|
||||
75% { transform: translateX(2px); }
|
||||
}
|
||||
|
||||
@keyframes dropletBounce {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes sunGlow {
|
||||
0%, 100% { transform: scale(1); filter: brightness(1); }
|
||||
50% { transform: scale(1.1); filter: brightness(1.2); }
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes cpuPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes binaryScroll {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes brainPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes dreamFloat {
|
||||
0% { opacity: 0; transform: translateY(30px); }
|
||||
25% { opacity: 1; transform: translateY(0); }
|
||||
75% { opacity: 1; transform: translateY(-20px); }
|
||||
100% { opacity: 0; transform: translateY(-40px); }
|
||||
}
|
||||
|
||||
@keyframes waveMove {
|
||||
0% { transform: translateX(-10px); }
|
||||
50% { transform: translateX(10px); }
|
||||
100% { transform: translateX(-10px); }
|
||||
}
|
||||
|
||||
@keyframes lightPulse {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
@keyframes prismRotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes colorSpread {
|
||||
0% { transform: scale(0.8); opacity: 0.8; }
|
||||
50% { transform: scale(1); opacity: 1; }
|
||||
100% { transform: scale(0.8); opacity: 0.8; }
|
||||
}
|
||||
|
||||
@keyframes colorPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes thinkingPulse {
|
||||
0%, 100% { transform: scale(1) rotate(0deg); }
|
||||
25% { transform: scale(1.05) rotate(-2deg); }
|
||||
75% { transform: scale(1.05) rotate(2deg); }
|
||||
}
|
||||
|
||||
@keyframes bubbleFloat {
|
||||
0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
|
||||
50% { transform: translateY(-15px) scale(1.1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.visual-concept {
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.sky-layers,
|
||||
.bird-flight,
|
||||
.solar-system {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.bird-body, .earth, .brain {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user