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

Easy Light Bulb Project: HTML, CSS, and JavaScript

Image
In this tutorial, we will learn how to create a light bulb using HTML, CSS, and JavaScript. We will go step by step, explaining the code and its functionality. By the end of this tutorial, you will have a working light bulb that can be toggled on and off with a button. HTML Markup <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Light</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="light"></div>         <div class="cap"></div>     </div>     <button id="power">OFF</button>     <script src="script.js"></sc...
Read More

Creating a Netflix-inspired Animation using HTML and CSS

Image
In this blog post, we will explore how to create a simple yet captivating animation inspired by the Netflix logo using HTML and CSS. By following the provided code snippets and step-by-step instructions, you'll be able to replicate the animation and gain insights into the key concepts involved. So, let's dive in and bring some Netflix vibes to your web project! HTML Structure: To get started, create a new HTML file and paste the following code inside the `<body>` tags: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Netflix</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="netflix"></div>       ...
Read More

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Image
Right now, In a smartphone, you will get a 48MP Camera, 64MP Camera, 108MP Camera, and so on. But, Does this number of megapixels improve the image quality? What is a Megapixel? Megapixel means a million pixels in an image. Pixel is the small dot or square on the image. By combining millions of pixels, one image is formed. 1 Megapixel = 1 Million Pixel, 2 Megapixel = 2 Million Pixel, 12 Megapixel = 12 Million Pixel, 48 Megapixel = 48 Million Pixel, 64 Megapixel = 64 Million Pixel, and so on.   Does More Megapixel equal better image quality? No. A Megapixel is just a million pixels in an image. Many other factors also matter while capturing an image like Image Sensor, Aperture, Megapixel, Lens, and Software.    If you have a 108 Megapixel Camera with a small image sensor and a 12 Megapixel camera with a big image sensor. Then, The second one will have better quality. It's because, in a big image sensor, the pixel size is bigger. If the pixel size is bigger, it can capture...
Read More

Create a Stunning Personal Portfolio Website with HTML & CSS

Image
Are you looking to design an impressive personal portfolio website that showcases your skills, projects, and contact information? In this post, I’ll guide you through a simple yet elegant portfolio website built using HTML and CSS. Whether you’re a beginner or an experienced developer, this project can be a great addition to your web development journey. Project Overview This portfolio website is designed to highlight your personal and professional details in a clean and visually appealing way. It features multiple sections like About Me , Skills , Portfolio , and Contact Form . The design is responsive, making it accessible on all devices, including desktops, tablets, and smartphones. Features of the Portfolio Navigation Bar: Smooth navigation to all sections with a stylish hover effect. Intro Section: A bold introduction with a profile image and social links. About Me: A...
Read More

How to Become a Web Designer: A Complete Guide

Image
Have you ever admired a beautifully designed website and wondered how you can create something similar? If yes, then becoming a web designer might be the perfect career for you. Web design is a blend of creativity and technical skills, where you can bring ideas to life and make an impact on the digital world. In this blog, we will guide you step by step on how to become a web designer, even if you're starting from scratch. 1. Understand What Web Design Is Before jumping into web design, it’s important to understand what it actually means. Web design is about creating the layout, look, and feel of a website. It involves working on the visual aspects like colors, typography, and images, as well as ensuring the website is user-friendly and responsive on all devices. A good web designer focuses on creating websites that are not only attractive but also functional and easy to use. 2. Learn the Basics of Web Design To start your journey, you need to learn some basic concepts and s...
Read More

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">      ...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

Is HTML a Programming Language?

Image
When you step into the world of web development, one of the first tools you encounter is HTML. However, a common question that arises among beginners is: "Is HTML a programming language?" Let’s dive deep into this topic to clear up any confusion. What is HTML? HTML stands for HyperText Markup Language . It is the standard language used to structure and display content on the web. HTML uses elements (tags) to define the structure of a webpage, including headings, paragraphs, links, images, and more. For example, a basic HTML document looks like this: <!DOCTYPE html> <html> <head>   <title>My First Page</title> </head> <body>   <h1>Welcome to SmartTechTip!</h1>   <p>This is an example of an HTML page.</p> </body> </html> Why Isn’t HTML a Programming Language? To answer the main question: No, HTML is ...
Read More

Is Blogging Dead? Exploring the Relevance of Blogging in 2025

Image
In a world dominated by social media platforms, video content, and instant gratification, many wonder, “Is blogging dead?” The short answer is no—blogging is far from dead. However, the blogging landscape has evolved dramatically, and its relevance now depends on adapting to the current digital trends. Let’s dive into why blogging still matters, how it has changed, and what you can do to make your blog thrive in 2025. The Evolution of Blogging Blogging in the Early Days Blogging began as a way for individuals to share personal stories, opinions, and expertise. It was informal, community-driven, and lacked commercial intent. Over time, blogging became a powerful tool for businesses, marketers, and influencers to build an audience and generate revenue. Blogging in the Age of Social Media Platforms like Instagram, TikTok, and YouTube have shifted the spotlight from text-based content to visually engaging and short-form media. Audiences now prefer quick, interactive content, le...
Read More