CSS Animations with Source codes

Comments

  1. Developer18 January 2025 at 23:42

    click on the name of the animations 😀to see the code

    ReplyDelete

Post a Comment

Popular posts from this blog

Bouncing Ball Animation: Simple CSS Code with Explanation

Learn how to create a simple bouncing ball animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality. Code Snippets 1. HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bouncing Ball Animation</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="ball"></div> <h2>Try the Bouncing Ball Animation!</h2> <p>The animation will make the ball bounce up and down.</p> </body> </html> 2. CSS (styles.css) /* Resetting margin and padding for a clean slate */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body styling */ body { font-family: Arial, sans-serif; ...
Read more

Infinite Scroll Animation

Learn how to create a Infinite Scroll Animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality. Code Snippets 1. HTML (index.html) <div class="app"> <header> <h1>Infinite Scroll Animation</h1> <p>CSS only, content independent, bi-directional, customizable</p> <p>This is the React-less version of <a href="https://codepen.io/ykadosh/pen/KKezJzz">this pen</a></p> </header> <div class="tag-list"> <div class="loop-slider" style="--duration:15951ms; --direction:normal;"> <div class="inner"> <div class="tag"><span>#</span> JavaScript</div> <div class="tag"><span>#</span> webdev</div> <div class="tag"><span>#</span> Typescri...
Read more

3D Glowing Bottle HTML CSS

Learn how to create a 3D Glowing Bottle animation using CSS. This beginner-friendly tutorial will guide you through the code and its functionality. Code Snippets 1. HTML (index.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 3D Glowing Bottle </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section> <div class="shadow"></div> <div class="bowl"> <div class="liquid"></div> </div> </section> </body> </html> 2. CSS (styles.css) @import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Kanit&family=Mrs+Sheppards&family=Oswald:wght@700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } section{ display: flex; justify-content: center; align-i...
Read more