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

Recent CrowdStrike Update Causes Big Tech Outage: What Happened and What We Can Learn

Image
In mid-July 2024, many businesses around the world experienced significant IT issues due to a problematic update from CrowdStrike, a leading cybersecurity company. Here's a breakdown of what happened, how it affected various industries, and what we can learn from this incident. What Happened? On July 18, 2024, CrowdStrike rolled out an update to its Falcon agent. Almost immediately, users started reporting major problems. Systems were rebooting unexpectedly, and connectivity issues were rampant. This was especially problematic for Microsoft-based customers who rely on CrowdStrike for cybersecurity. Who Was Affected? The update's impact was widespread. Major airlines like American Airlines, Delta, and United faced disruptions. The UK's National Health Service (NHS) also reported issues, which could have serious implications given the critical nature of their services. Even banks and financial institutions weren't spared, highlighting how a single update can affec
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">         <input type="text" id="clear" placeholder="Ask Me Anything!">         <button id="askme" onclick="myF
Read More

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log In" class="submit">        </div>         </form>     </div>   Then add this CSS code to your CSS file.  *{    box-sizing: border-box;    margin: 0;    padding: 0;    font-family: SFProDisplay-Regular, Helvet
Read More

Harnessing Web Updates to Elevate Your Small Business

Image
In today's digital landscape, keeping your website updated with strategic features is crucial for gaining a competitive advantage. These updates not only enhance operational efficiencies but also improve how you engage with your customers. By embracing these enhancements, your small business can maintain relevance and achieve sustainable growth in a digital-first world. Subscription-Based Business Models Imagine converting your passion into a profitable subscription service. Whether you're providing exclusive digital content, regular product deliveries, or both, a subscription-based business model can create a steady revenue stream. This model not only ensures predictable income but also builds a loyal customer base that values what you offer. Leveraging Education for Enhanced Web Capabilities Diving into web-based projects with a solid educational foundation can significantly amplify your success. Earning a degree in a relevant field provides a deep u
Read More

How Long Does It Take to Learn Web Development?

Image
Web development is a fascinating and rewarding field, but one of the most common questions beginners ask is, "How long does it take to learn web development?" The answer isn't straightforward, as it depends on several factors including your prior experience, learning pace, and the depth of knowledge you wish to acquire. Let's break it down. The Basics: Getting Started with HTML, CSS, and JavaScript For complete beginners, the journey typically starts with understanding the fundamentals of web development. This includes learning: HTML (HyperText Markup Language) : The backbone of any web page. It usually takes a few weeks to become comfortable with HTML, as it involves learning how to structure content with elements like headings, paragraphs, and links. CSS (Cascading Style Sheets) : This is used to style and layout web pages. Mastery of CSS can take another few weeks to a couple of months. It involves understanding how to use
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 more ligh
Read More

Is Web Development Dead In 2023?

Image
In the fast-paced world of technology, trends come and go, leaving some to wonder about the future of web development. Is it still a viable career choice in 2023? In this blog post, we will dive into the topic and explore why web development is far from dead. So, let's debunk the myth and discover the exciting prospects which lie ahead! The Importance of Web Development: Web development remains an essential aspect of our digital lives. Websites are the primary means of accessing information, and services and engaging with businesses online. From e-commerce platforms to entertainment portals, websites are the gateway to a plethora of experiences. And who builds and maintains these websites? Web developers, of course! Their expertise is fundamental to creating engaging and personalized web experiences. Constant Evolution: The web development landscape is constantly evolving, making it an exciting field. New frameworks, tools, and technologies emerge regularly, empowering developers t
Read More

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

Image
Being a computer genius or knowing how to use a computer is one of the great skills in today's world. If you want to become a computer genius or expert then here are 5 tips that will help to develop your computer skill or to become a computer genius/expert. To become a computer genius you should have to follow these tips. You have to spend your time learning and developing new computer-related skills. Learn Computer Basic To Become A Computer Genius In order to become a computer genius, you have to learn computer basics. If you are new to computers, then this is the most necessary step. You should know what is a computer? How does the computer work? What is the use of Keyboard, Mouse, Monitor, CPU? What is Software/Hardware? etc. To learn computer basics you can go search on YouTube and Google and learn it by watching videos and reading articles on different websites. There are lots of professionals who provide Computer Basic Courses on the Internet. You can Google all these kinds
Read More

OPPO New Rollable Smartphone - OPPO X 2021

Image
  We have seen a foldable phone which folds and becomes into a smartphone and after unfolding, it becomes like a tablet. But, OPPO has made a new innovative Rollable Smartphone. The smartphone display can be rolled and convert into a tablet as well as a smartphone. OPPO has used a motor and flexible display to make this innovative smartphone. The flexible OLED display rolls inside and outside the smartphone after pressing or sliding on the power. OPPO also said this smartphone can be rolled 100,000 times which is good for long-term uses of the smartphone. Although it is officially not launched in the market. But, we will soon see this type of rollable smartphone in the future. Advantages And Disadvantages: OPPO X 2021 has advantages over foldable phones like the screen does not get crease like other foldable phones and it has also some disadvantages like the dust can easily get inside the smartphone because of the rollable display, since it has a motor and rollable display it is diffic
Read More

What is JavaScript Used For?

Image
Today, let's talk about one of the most versatile and essential programming languages out there: JavaScript. Whether you're a seasoned developer or just starting out, understanding what JavaScript is used for can open up a world of possibilities for developing skillful IT skill. Enhancing User Interfaces First up, JavaScript is a game-changer when it comes to making websites interactive and user-friendly. Remember those annoying times when we filled out a form online, hit submit, and then had to wait for a new page to load just to see an error message? With JavaScript, we can validate forms right there on the spot, making the process smoother and faster. Plus, JavaScript allows for dynamic content updates. This means parts of a webpage can refresh without the whole page reloading. Think about when we scroll through social media feeds and new posts appear automatically, that's JavaScript in action. Web Development JavaScript is a must-know for w
Read More