How to Create Animated Glowing Aurhor Profile HTML Css Blogger

 

Demo

Past this stylesheet before </head>

    
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> </link>
  <link rel="stylesheet" type="text/css" href="style.css"> </link>
  

Past this Css Code Before ]]></b:skin> 

    <style>
   .glow-border {
  width: 250px;
  height: 350px;
  border: 2px solid transparent;
  border-radius: 10px;
  color: blue;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18, 2px 2px 2px rgba(206,89,55,0);
  animation: glowing-border 2s ease-in-out infinite;
}

@keyframes glowing-border {
  0% {
    box-shadow: 0 0 30px #0049FF;
  }
  50% {
    box-shadow: 0 0 20px #42FF00, 0 0 30px #FF0000;
  }
  100% {
    box-shadow: 0 0 5px #FF00E8;
    
    
  }
}

     </style>

Past this HTML Code in your Post

    

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">

  <center>
<div class="glow-border">
 
    <img src="https://tiny.cc/priyanshu" width="200" , height="200" title="Priyanshu Kashyap">
    <h2> Priyanshu Kashyap </h2>
     <div class="social-icons">
    <a href="https://facebook.com/officialpomsd"> <span title="Facebook"><i class="fab fa-facebook"></i> </span></a>
      
 <a href="https://instagram.com/its_prince9014"> <span title="Instagram"><i class="fab fa-instagram"></i> </span></a>
      
       
       <a href="https://codepen.io/pomsd"><span title="Codepen"><i class="fab fa-codepen"></i></span></a> 
       
          <a href="https://priyanshuomsd.blogspot.com"><span title="Blogger"><i class="fab fa-blogger"></i></span></a> 
  </div>
   
  </div> </center>


  

Edit in this post

Also Read this Posts

Screen Recorder HTML,CSS and JS || Blog,Website

How to Customize Audio Player HTML Css in Blogger

How to Add Target Tooltip with Title HTML and Css in Blogger

Animated Gradient Color Background HTML and Css

Hide Sidebar in Blogger || Css || Blog

Top 5 Free Fire Bundles 3D Model in Free

Motu,Patlu, Dr. Jhatka and Ghasitaram 3d Model

Countdown Clock HTML CSS and JS

Internet Detector || Css,HTML,JS || Script for Your Website

Search by Your Voice HTML CSS and JS || SearchBar || for Blogger

Animated Links Hover Effect HTML,Css