Glowing Box Animation CSS || Html + CSS Effect ||

Glowing Box Animation CSS || Html + CSS Effect || 


Today We Are making a CSS Project called "Glowing Animation Box". Its a very sipmle and easy to use and easy to make. We are also provide you copmlete code to make your work easy , Just copy and paste this code in your code and enjoy.


Html Code 

Here is Your HTML Code . You can use this code anywhere you want, You can also modify this code according to yourself.
Make sure before use this Code You can use <html> tag. bcoz its a primary tag to any hmtl programming language.

  <title>Abhay

  </title>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Neon Animation Box</title>


</head>

<body>

    <div class="neon-box">

      <div style="background: yellow ">

        <a href="https://Telegram.me/Contect_me"> Follow Me </a>

      </div>

    </div>


   

</body>



CSS code 

Here Is We Will provide you CSS Code for this project. You can free to use this code anywhere in your programming code. 
Make sure when you use this code then use <style> tag , bcoz its a complasory tag for using any CSS Code.
  

  body {

        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .neon-box {
        width: 200px;
        height: 200px;
        background-color: #111;
        border: 2px solid #0ff;
        border-radius: 10px;
        animation: neon-pulse 1s ease-in-out infinite;
        transition: all 0.3s;
    }

    .neon-box:hover {
        transform: scale(1.2); /* Increase the size on hover */
        background-color: #ff0; /* Change background color on hover */
        box-shadow: 0 0 20px 20px #0ff; /* Add a shadow on hover */
        animation: none; /* Stop the glowing animation on hover */
    }

    @keyframes neon-pulse {
        0% {
            box-shadow: 0 0 5px 5px #0ff;
        }
        50% {
            box-shadow: 0 0 20px 20px #0ff;
        }
        100% {
            box-shadow: 0 0 5px 5px #0ff;
        }
    }

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.