How to create shock wave or explosion effect using HTML and CSS ? - GeeksforGeeks

27 Apr, 2020
The shock wave effect is also known as the explosion effect. It is one of the simple CSS effects. For a beginner, it is one of the best examples to learn the concept of pseudo-elements. The pseudo-element that we are using is hover. I recommend you to go through it before jumping into the code to understand it better. For the briefing, hover is used to applying styles to an element when the mouse hovers over it.
HTML Code: By using HTML, we will create a normal structure where we use the explosion or shock wave effect.<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"        content="width=device-width, initial-scale=1.0" />    <title>Document</title></head>  <body>    <div class="geeks"></div></body>  </html>                    
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"        content="width=device-width, initial-scale=1.0" />    <title>Document</title></head>  <body>    <div class="geeks"></div></body>  </html>                    
CSS Code: The first step is to aligning our div to the center of the page using flexbox, then we have to create a circle using border-radius property. We have increased the value of it’s offset at every step. Then we will use a transition duration to the div. Now use hover selector and copy and paste the box-shadow property which we used earlier and increased it’s offset value. We have increased its value so that on hover it feels like coming out of the center(explosion effect). You can play with the color of the box-shadow to have a different or even multiple color explosion.<style>     body {        margin: 0;        padding: 0;        background: black;        display: flex;        justify-content: center;        align-items: center;        height: 100vh;    }      .geeks {        width: 20px;        height: 20px;        background: green;        border-radius: 50%;        box-shadow: 0 0 20px rgb(127, 153, 127),                     0 0 40px rgb(127, 153, 127),                     0 0 60px rgb(127, 153, 127),                     0 0 80px rgb(127, 153, 127),                    0 0 120px rgb(127, 153, 127),                     0 0 220px rgb(127, 153, 127),                    0 0 320px rgb(127, 153, 127);        transition: 2s;    }      .geeks:hover {        box-shadow: 0 0 0 30px rgb(83, 224, 83),                     0 0 0 60px rgb(83, 224, 83),                    0 0 0 100px rgb(83, 224, 83),                    0 0 0 120px rgb(82, 226, 82),                     0 0 0 200px rgb(37, 214, 37),                     0 0 0 400px rgb(27, 165, 27),                     0 0 0 450px rgb(63, 235, 63);    }</style>
<style>     body {        margin: 0;        padding: 0;        background: black;        display: flex;        justify-content: center;        align-items: center;        height: 100vh;    }      .geeks {        width: 20px;        height: 20px;        background: green;        border-radius: 50%;        box-shadow: 0 0 20px rgb(127, 153, 127),                     0 0 40px rgb(127, 153, 127),                     0 0 60px rgb(127, 153, 127),                     0 0 80px rgb(127, 153, 127),                    0 0 120px rgb(127, 153, 127),                     0 0 220px rgb(127, 153, 127),                    0 0 320px rgb(127, 153, 127);        transition: 2s;    }      .geeks:hover {        box-shadow: 0 0 0 30px rgb(83, 224, 83),                     0 0 0 60px rgb(83, 224, 83),                    0 0 0 100px rgb(83, 224, 83),                    0 0 0 120px rgb(82, 226, 82),                     0 0 0 200px rgb(37, 214, 37),                     0 0 0 400px rgb(27, 165, 27),                     0 0 0 450px rgb(63, 235, 63);    }</style>
Final solution: In this section we will combine the above two sections together to achieve the mentioned task.
Program:<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"           content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>        body {            margin: 0;            padding: 0;            background: black;            display: flex;            justify-content: center;            align-items: center;            height: 100vh;        }                  .geeks {            width: 20px;            height: 20px;            background: green;            border-radius: 50%;            box-shadow: 0 0 20px rgb(127, 153, 127),                        0 0 40px rgb(127, 153, 127),                         0 0 60px rgb(127, 153, 127),                         0 0 80px rgb(127, 153, 127),                         0 0 120px rgb(127, 153, 127),                        0 0 220px rgb(127, 153, 127),                        0 0 320px rgb(127, 153, 127);            transition: 2s;        }                  .geeks:hover {            box-shadow: 0 0 0 30px rgb(83, 224, 83),                         0 0 0 60px rgb(83, 224, 83),                        0 0 0 100px rgb(83, 224, 83),                        0 0 0 120px rgb(82, 226, 82),                         0 0 0 200px rgb(37, 214, 37),                        0 0 0 400px rgb(27, 165, 27),                         0 0 0 450px rgb(63, 235, 63);        }    </style></head>  <body>    <div class="geeks"></div></body>  </html>
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"           content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>        body {            margin: 0;            padding: 0;            background: black;            display: flex;            justify-content: center;            align-items: center;            height: 100vh;        }                  .geeks {            width: 20px;            height: 20px;            background: green;            border-radius: 50%;            box-shadow: 0 0 20px rgb(127, 153, 127),                        0 0 40px rgb(127, 153, 127),                         0 0 60px rgb(127, 153, 127),                         0 0 80px rgb(127, 153, 127),                         0 0 120px rgb(127, 153, 127),                        0 0 220px rgb(127, 153, 127),                        0 0 320px rgb(127, 153, 127);            transition: 2s;        }                  .geeks:hover {            box-shadow: 0 0 0 30px rgb(83, 224, 83),                         0 0 0 60px rgb(83, 224, 83),                        0 0 0 100px rgb(83, 224, 83),                        0 0 0 120px rgb(82, 226, 82),                         0 0 0 200px rgb(37, 214, 37),                        0 0 0 400px rgb(27, 165, 27),                         0 0 0 450px rgb(63, 235, 63);        }    </style></head>  <body>    <div class="geeks"></div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS-Selectors
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)