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

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 Create A Simple Navigation Bar Using Only HTML and CSS?

Image
STEP 1: Add a ul tag and inside it add li tag. Inside li tag add a tag with the Name. 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>Document</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="header"><h1>SmartTechTip</h1></div> <ul>   <li><a href="">Home</a></li>   <li><a href="">HTML</a></li>   <li><a href="">CSS</a></li>   <li><a href="">JS</a></li>   <li><a href="">About</a></li> </ul> </div> </body> </html> STEP ...
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 ...
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

Build a Responsive Product Card Gallery with Plain HTML & CSS

Image
What’s up, SmartTechTip fam? If you’ve ever wanted to showcase your products in a sleek, responsive grid—complete with hover effects and clean buttons—today’s tutorial is for you. We’ll take your basic HTML and CSS (no frameworks!) and turn it into an eye‑catching product card gallery that adapts to any screen. Ready? Let’s dive in! For souce code and images click on this Github Link . 1. HTML Structure First, let’s lay out the markup. We’ll wrap all of our cards in a <div class="container"> and give each product its own <div class="card"> : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Card</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> ...
Read More

What is Blogging Business? A Beginner’s Guide to Making Money Online

Image
Ever scrolled through a blog and thought, "Wait… do people actually make money doing this?" If so, you’re not alone. Blogging started as a way for people to share their thoughts online, but today, it’s a full-fledged business model. In fact, many bloggers earn six figures (or more!) just by writing about topics they love. Sounds interesting, right? Let’s dive into what the blogging business is all about and how you can turn it into a money-making machine. What is a Blogging Business? A blogging business is simply a blog that’s monetized. Instead of writing just for fun, bloggers strategically create content that attracts readers and generates income. Think of it as running a media company—but instead of newspapers or TV channels, your blog is the main platform. And the best part? You don’t need a degree, a fancy office, or a huge team to get started. All you need is a website, valuable content, and a plan to grow and monetize your audience. How Do Blogs Make Money? ...
Read More

How To Create a Fan Using Only HTML and CSS?

Image
STEP 1: Add <div class="fan"></div> inside the body section.   STEP 2: Add an image inside the div. <img src="fan.png" alt="fan"> Download Image( Click Here ) <!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" />          <link rel="stylesheet" href="style.css" />          <title>Fan</title>          </head>          <body>          <div class="fan">          <img src="fan...
Read More

The Secret to Flawless Web Design: Mastering Responsive Layouts

Image
Ever visited a website that looked great on your laptop but was a total mess on your phone? Maybe the text was too small, the images were all over the place, or buttons were impossible to click. Annoying, right? Well, that’s exactly why responsive web design is a game-changer. If you’re a web developer (or aspiring to be one), mastering responsive layouts is the secret sauce to making websites look flawless on all devices —whether it’s a massive desktop monitor, a tablet, or a tiny smartphone screen. What is a Responsive Layout? A responsive layout is a web design approach where your website automatically adjusts to fit any screen size. Instead of designing separate sites for desktop and mobile, responsive design ensures one website works everywhere. Why Does It Matter? Better User Experience (UX): No one likes zooming in and out just to read content. SEO Boost: Google ranks mobile-friendly websites higher. More C...
Read More

Lock the Digital Door: What Aspiring Entrepreneurs Need to Know About Cybersecurity

Image
(Photo via Pexels) As a fresh-faced business owner, you're probably laser-focused on your product, your pitch deck, and your bottom line. But if you're not paying attention to the security of your digital space, you’re building your dream on a house of sand. Cybersecurity isn’t just a tech department issue anymore—it’s a cornerstone of business resilience, no matter how small your operation might be. If you're running lean and fast, a single breach could gut your operations, sink your reputation, and leave your customers scrambling to protect themselves from the mess you didn’t see coming. Your Data Is the Business Now You might think you're not big enough to be a target, but cybercriminals don’t discriminate . If your systems house customer data, vendor contracts, or intellectual property, then you’re already a high-value mark. A successful cyberattack could expose your customers' personal information, lock you out of your own systems, or even wi...
Read More