Skip to content

feat: add Animated Weather Widget with pure CSS animations #1000

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+923 −110
Open

feat: add Animated Weather Widget with pure CSS animations #1000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e80def
feat: add Animated Weather Widget with pure CSS animations
dinilH Oct 31, 2025
cb5b40f
Animation not working fixed
dinilH Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 156 additions & 0 deletions Animated-Weather-Widget/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# 🌤️ Animated Weather Widget - Pure CSS

A beautiful, fully animated weather widget created entirely with **HTML and CSS** - no JavaScript required!

## ✨ Features

- **🌞 Sunny Mode**: Animated sun with rotating rays and pulsing effect
- **☁️ Cloudy Mode**: Floating clouds with smooth animations
- **🌧️ Rainy Mode**: Realistic falling rain with gradient effects
- **❄️ Snowy Mode**: Gently falling snowflakes with rotation
- **🌙 Night Mode**: Moon with twinkling stars
- **📱 Fully Responsive**: Works perfectly on all devices
- **🎨 Smooth Transitions**: Beautiful color transitions between weather states
- **🚫 Zero JavaScript**: Pure CSS animations and `:checked` pseudo-class magic!

## 🎯 How It Works

This widget uses CSS-only techniques to create interactive weather animations:

1. **Radio Button States**: Uses `:checked` pseudo-class to switch between weather conditions
2. **CSS Animations**: Keyframe animations for sun rays, clouds, rain, snow, and stars
3. **CSS Variables**: Easy theming and color management
4. **Gradient Backgrounds**: Dynamic sky backgrounds that change with weather
5. **Transform & Opacity**: Smooth element transitions

## 🛠️ Technologies Used

- **HTML5**: Semantic markup
- **CSS3**: Advanced animations, transitions, and effects
- Keyframe animations
- Pseudo-classes (`:checked`, `:hover`, `::before`, `::after`)
- CSS Variables (Custom Properties)
- Flexbox & Grid layouts
- Backdrop filters
- Transform & transition properties

## 📂 File Structure

```
Animated-Weather-Widget/
├── index.html # Main HTML structure
├── style.css # All styling and animations
└── README.md # Documentation
```

## 🚀 How to Use

1. **Clone or Download** the files
2. **Open** `index.html` in any modern browser
3. **Click** on the weather condition buttons to see different animations
4. **Enjoy** the smooth CSS animations!

## 🎨 Customization

### Change Colors

Edit the CSS variables in `style.css`:

```css
:root {
--sunny-sky: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--cloudy-sky: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
--rainy-sky: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
--snowy-sky: linear-gradient(135deg, #d7e1ec 0%, #ffffff 100%);
--night-sky: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
```

### Adjust Animation Speed

Modify animation durations:

```css
/* Clouds - change 20s to your preferred speed */
animation: floatCloud1 20s linear infinite;

/* Rain - change 1s to your preferred speed */
animation: fall 1s linear infinite;

/* Snow - change 4s to your preferred speed */
animation: snowfall 4s linear infinite;
```

### Add More Weather Conditions

1. Add a new radio button in HTML:
```html
<input type="radio" name="weather" id="stormy">
<label for="stormy">⛈️ Stormy</label>
```

2. Add corresponding CSS styling:
```css
#stormy:checked ~ .weather-widget .sky {
background: var(--stormy-sky);
}
```

## 📱 Browser Compatibility

- ✅ Chrome (Latest)
- ✅ Firefox (Latest)
- ✅ Safari (Latest)
- ✅ Edge (Latest)
- ⚠️ Internet Explorer (Limited support)

## 🎓 Learning Points

This project demonstrates:

- **State Management with CSS**: Using `:checked` pseudo-class for interactivity
- **Advanced CSS Animations**: Creating complex weather effects
- **CSS Architecture**: Organizing styles with comments and sections
- **Responsive Design**: Mobile-first approach
- **Performance**: Using CSS transforms for smooth animations

## 🤝 Contributing

Contributions are welcome! Ideas for improvement:

- Add more weather conditions (foggy, windy, stormy)
- Create day/night cycle animation
- Add weather forecast cards
- Include temperature conversion toggle
- Add accessibility improvements (ARIA labels, keyboard navigation)

## 📄 License

This project is open source and available under the [MIT License](../LICENSE).

## 👨‍💻 Author

**Dinil Hansara**
- GitHub: [@dinilH](https://github.com/dinilH)
- LinkedIn: [dinilhansara](https://www.linkedin.com/in/dinilhansara)

## 🙏 Acknowledgments

- Inspired by modern weather apps
- Created for the "You Don't Need JavaScript" project
- Part of Hacktoberfest 2025 contributions

## 📸 Screenshots

### Sunny Mode
![Sunny Weather](screenshots/sunny.png)

### Rainy Mode
![Rainy Weather](screenshots/rainy.png)

### Night Mode
![Night Weather](screenshots/night.png)

---

**Made with ❤️ and Pure CSS** | #Hacktoberfest2025 | #YouDontNeedJavaScript
153 changes: 153 additions & 0 deletions Animated-Weather-Widget/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Animated Weather Widget</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">Pure CSS Weather Widget</h1>
<p class="subtitle">Switch between weather conditions using radio buttons - No JavaScript!</p>

<!-- Weather Type Selector -->
<!-- Radio buttons must be siblings of weather-widget for CSS to work -->
<input type="radio" name="weather" id="sunny" checked>
<input type="radio" name="weather" id="cloudy">
<input type="radio" name="weather" id="rainy">
<input type="radio" name="weather" id="snowy">
<input type="radio" name="weather" id="night">

<div class="weather-selector">
<label for="sunny">☀️ Sunny</label>
<label for="cloudy">☁️ Cloudy</label>
<label for="rainy">🌧️ Rainy</label>
<label for="snowy">❄️ Snowy</label>
<label for="night">🌙 Night</label>
</div>

<!-- Weather Widget -->
<div class="weather-widget">
<!-- Background Sky -->
<div class="sky">
<!-- Sun -->
<div class="sun">
<div class="sun-rays"></div>
</div>

<!-- Moon -->
<div class="moon">
<div class="crater crater1"></div>
<div class="crater crater2"></div>
<div class="crater crater3"></div>
</div>

<!-- Stars (for night mode) -->
<div class="stars">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
<div class="star star6"></div>
<div class="star star7"></div>
<div class="star star8"></div>
</div>

<!-- Clouds -->
<div class="cloud cloud1">
<div class="cloud-part"></div>
<div class="cloud-part"></div>
<div class="cloud-part"></div>
</div>
<div class="cloud cloud2">
<div class="cloud-part"></div>
<div class="cloud-part"></div>
<div class="cloud-part"></div>
</div>
<div class="cloud cloud3">
<div class="cloud-part"></div>
<div class="cloud-part"></div>
<div class="cloud-part"></div>
</div>

<!-- Rain -->
<div class="rain">
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
<div class="raindrop"></div>
</div>

<!-- Snow -->
<div class="snow">
<div class="snowflake">❅</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❅</div>
</div>
</div>

<!-- Weather Info Card -->
<div class="weather-info">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span class="city">San Francisco</span>
</div>

<div class="temperature">
<span class="temp-value">72</span>
<span class="temp-unit">°F</span>
</div>

<div class="condition">Partly Cloudy</div>

<div class="details">
<div class="detail-item">
<span class="detail-label">Humidity</span>
<span class="detail-value">65%</span>
</div>
<div class="detail-item">
<span class="detail-label">Wind</span>
<span class="detail-value">12 mph</span>
</div>
<div class="detail-item">
<span class="detail-label">Pressure</span>
<span class="detail-value">1013 mb</span>
</div>
</div>
</div>
</div>

<!-- Info Section -->
<div class="info-section">
<h3>✨ Pure CSS Features</h3>
<ul>
<li>🎨 Animated sun with rotating rays</li>
<li>☁️ Floating clouds with smooth motion</li>
<li>🌧️ Realistic rain animation</li>
<li>❄️ Falling snowflakes</li>
<li>🌙 Night mode with twinkling stars</li>
<li>📱 Fully responsive design</li>
<li>🚫 Zero JavaScript required!</li>
</ul>
</div>
</div>
</body>
</html>
Loading