Sunrise And Sunset Animation Using HTML & CSS?

HTML Code


<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Sunrise and Sunset</title>
    <link href="style.css" rel="stylesheet"></link>
</head>
<body>
    <div id="sun"></div>
    <div class="hill"></div>
    <div class="hill"></div>
    <div class="hill"></div>
    <div class="hill"></div>
    <div class="hill"></div>
    <div id="land"></div>
</body>
</html>

CSS Code

*{
    box-sizing: border-box;
    margin: 0;
    padding:0;
}
body{
    background-color: rgb(154,209,253);
    overflow:hidden;
    animation: sky 24s infinite linear;
}
@keyframes sky {
    0%{
        background-color: rgb(63, 116, 129);
    }
    10%{
        background-color: rgb(0, 180, 180);
    }
    50%{
        background-color: skyblue;
    }
    90%{
        background-color: rgb(0, 180, 180);
    }
    100%{
        background-color: rgb(63, 116, 129);

    }
    
}
#land{
    width: 100%;
    height: 20%;
    background-color: #848288;
    position: absolute;
    bottom: 0;
}
.hill{
    width: 40vh;
    height: 40vh;
    background-color: green;
    transform: rotate(45deg);
    position: absolute;
    bottom: -1%;
    border-radius: 5%;
}
.hill:nth-child(2){
    left: 40vh;
}

.hill:nth-child(3){
    left: 80vh;
    bottom:-3%;
}

.hill:nth-child(4){
    left: 120vh;
    bottom:1%;
}

.hill:nth-child(5){
    left: 170vh;
    bottom:3%;
}
#sun{
    width: 20vh;
    height: 20vh;
    background-color: rgb(255, 196, 0);
    border-radius: 50%;
    border: 2px solid red;
    position: absolute;
    right: 15%;
    bottom: 20%;
    animation: sun 24s infinite linear;

}
@keyframes sun {
    0%{
        transform: translate(-10%,-10%);
    }
    10%{
        transform: translate(-15%,-50%);
    }
    20%{
        transform: translate(-50%,-100%);
    }
    30%{
        transform: translate(-100%,-150%);
    }
    40%{
        transform: translate(-200%,-200%);
    }
    50%{
        transform: translate(-300%,-220%);
    }
    60%{
        transform: translate(-400%,-210%);
    }
    70%{
        transform: translate(-500%,-200%);
    }
    80%{
        transform: translate(-600%,-150%);
    }
    90%{
        transform: translate(-620%,-50%);
    }
    100%{
       transform: translate(-650%,-10%);
    }
    
}
 

Trending Posts

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
Read More

🚀 Build a QR Code Generator Using HTML, CSS & JavaScript

Image
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript. This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs : CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js ✅ Features Generate QR codes instantly Accepts text or URL Press Enter to generate Download QR code as PNG Modern UI with smooth design 📌 Full Source Code (HTML, CSS & JavaScript) 📄 HTML Code <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="style.css">   <title>QR Code Generator</title> </head> ...
Read More

🚀 Why You Must Learn AI & Machine Learning in 2025/2026 — Even If You're a Beginner

Image
AI is no longer science fiction. It's not something futuristic or reserved for tech giants anymore. It’s here . It’s real . And in 2025 and beyond, it’s going to change everything — from the way we work, learn, and create, to how we do business and live our daily lives. If you've ever wondered whether you should learn AI or machine learning… the answer is YES. And there’s never been a better time to start than now. In this post, I’ll break down why learning AI is one of the smartest moves you can make in 2025 , especially if you're a coder, student, blogger, freelancer — or just tech-curious. 🤖 AI in 2025: Why It’s Bigger Than You Think Let’s face it — AI is everywhere. ChatGPT is writing code and solving problems. Tools like Sora by OpenAI and Google Gemini are generating videos and automating workflows. AI assistants are booking appointments, summarizing reports, and even writing resumes. And this is just the beginning . By 2026, AI will be ...
Read More

Is Web Development Dying In 2022?

Image
Web development is a work that involves the task to develop, create, edit a website. Web development has been popular since the birth of the Internet and it is never going away anytime soon. Is Web Development Dying In 2022? No, web development isn't dying in 2022 or anytime soon. In fact, the demand for web development and web developers is increasing day by day. Every company nowadays wants to build their business online and to do so these companies need web developers. Many new devices are coming into the market in different sizes and web developers are required to make the website responsive so that the website will look good on all different devices. Top companies in the world like Google, Microsoft, Facebook(Meta), Amazon, etc hire many web developers every year with high salary packages to maintain their business online. Web development is one of the fastest-growing jobs right now in the world. Unlike other jobs, no one can replace the web developer's job or it is not go...
Read More

Create Light & Dark Theme Toggle Using HTML, CSS & JavaScript

Image
Dark mode is one of the most popular features in modern websites and apps. In this tutorial, you will learn how to build a simple Light & Dark Theme Toggle using just HTML, CSS, and JavaScript. This small project is perfect for beginners and helps you understand DOM manipulation and event handling. ⭐ GitHub Source Code You can download or view the full project on GitHub: 🔗 View on GitHub 🌗 What We Are Building This project contains a rounded switch. When you click the button: The background switches from light to dark The button slides smoothly The icon changes between ☀️ and 🌙 🧱 1. HTML Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Light and Dark Theme</title> <link rel="stylesheet" href="style.css"> </hea...
Read More

7 AI Hacks to 10x Your Productivity in 2025 (No Coding Required!)

Image
Alright, let's get real for a second, we're all drowning in emails, to-dos, meetings, messages, and more tabs than we can count. It’s 2025, and the grind isn’t slowing down, but guess what? Neither is AI. And the good news? You don’t need to know a single line of code to start using it like a boss. Whether you’re a freelancer, student, entrepreneur, or just someone trying to stay afloat in the digital chaos, these 7 AI hacks will seriously level up your productivity no tech degree needed. So grab your coffee (or energy drink, no judgment), and let’s dive into some of the coolest, simplest, and most powerful AI tricks you can use right now to get more done in less time. 1. Use AI Assistants to Plan Your Day Like a Pro Ever sit down in the morning and feel totally overwhelmed trying to figure out what the heck to do first? You’ve got meetings at weird times, a couple of deadlines, emails to answer, and you still haven’t had breakfast. Instead of spinning your wheels, let A...
Read More

Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

Image
In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript . This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques. 🎯 What You’ll Learn How to structure a calculator interface using HTML. How to style it beautifully using CSS Grid. How to make it functional using JavaScript. 🧱 Step 1: Create the HTML Structure Start by writing the basic layout for your calculator. Create a file named index.html and paste the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="co...
Read More

Why HTML Is Not A Programming Language?

Image
Many of us have seen HTML-related memes and information on the internet like learning HTML doesn't make you a programmer, HTML is not a programming language, etc. Are these allegations on HTML true? Let's find out. Why HTML is Not A Programming Language? Yes, HTML is not a programming language. It's a markup language that is used to structure the website. Yes, it's a language but not a programming language. Here are four reasons that don't make HTML a programming language: No Programming Logic in HTML If you know about programming logic then you can understand it and if you don't then try to understand common logic between us. In the same way, a computer program works under logic and since HTML doesn't do any logical task, we can't call it a programming language. It only structures the website. To make the website logical we use a programming language called JavaScript. No Data Modifying, Functions, and Variables in HTML Programming languages have functi...
Read More

10 Tips for Writing Clean and Maintainable Code in Web Development

Image
As a web developer, writing clean and maintainable code is essential to ensuring your projects are scalable, efficient, and easy to maintain. Clean code is not just a matter of good coding practice, but it also contributes to the overall quality of the software. In this blog post, we will provide 10 tips for writing clean and maintainable code in web development. 1. Use Meaningful Naming Conventions Using meaningful and descriptive names for variables, functions, and classes is essential in making your code easy to read and maintain. Avoid using short, cryptic, or generic names that could confuse others who are reading your code. Use clear and concise names that describe the purpose and functionality of each element. 2. Keep It Simple Simplicity is the key to writing clean and maintainable code. Avoid overcomplicating your code by writing code that is simple, concise, and easy to understand. Simplify your code by breaking down complex problems into smaller, more manageable parts. 3. Av...
Read More

How to Enable Developer Mode On Android Phone? | What is Developer Mode?

Image
If you are a tech geek then you might have heard about the Android Developer Option or Developer Mode, right? But, What is Developer Mode? How To Enable it? What is Developer Mode? Developer Mode is a setting specially made for a developer, advanced user like for example a tech person. It is a setting where you will get lots of hidden features of the smartphone-like USB debugging, Tracking Screen Activity, changing device animation, etc. How to Enable Developer Mode on Android Phone? To Enable Developer Mode On Android Phone. Open Settings of your phone. Tab on About Phone setting. Tab on Software Information. Tab On Build Number for 7 times.   Now, The Developer Option is enabled on your Android Phone.
Read More