Skip to main content

The Sticky Flag Animation

The Sticky Flag Animation with Hover Effect
        

   Here is the new animation of the sticky like flag. When the mouse is close or on the object, the flag flip and flop with hover effect and display the text in it. 
   Try once the code and stay loving codoblog...Happy here.


 
  CODE - 
  

       <html>
<head>
      <style type="text/css">
      .animation{
      transition:all 750ms ease-in-out;
      }
      #Awesome{
      position: relative;
      width: 180px;
      height: 180px;
      margin:  0 auto;
      backface-visibility:hidden;
      }
      #Awesome .sticky{
      transform:rotate(45deg);
      }
      #Awesome:hover .sticky{
      transform:rotate(10deg);
      }
     #Awesome .sticky{
      position: absolute;
      top: 0;
      left: 0;
      width: 180px;
      height: 180px;
     }
     #Awesome .reveal .circle{
      box-shadow: 0 1px 0px rgba(0,0,0,.15);
      font-family: 'helvetica neue',arial;
      font-weight: 200;
      line-height: 140px;
      text-align: center;
      cursor: pointer;
     }
     #Awesome .reveal .circle{
      background: red;
     }
     #Awesome .circle_wrapper{
      position: absolute;
      height: 180px;
      width: 180px;
      left: 0px;
      top: 0px;
      overflow: hidden;
     }
     #Awesome .circle{
      position: absolute;
      width: 140px;
      height: 140px;
      margin: 20px;
      border-radius: 999px;
     }
     #Awesome .back{
      height: 90px;
      top: 30px;
     }
     #Awesome:hover .back{
      height: 90px;
      top: 110px;
     }
     #Awesome .back .circle{
      margin-top: -130px;
      background-color: white;
      background-image: -webkit-linear-gradient(bottom,rgba(252,236,63,.0),rgba(255,255,255,.8));

     }
     #Awesome:hover .back .circle{
      margin-top: -50px;
     }
     #Awesome .front{
      height: 150px;
      bottom: 0;
      top: auto;

      -webkit-box-shadow : 0 -140px 20px -140px rgba(0,0,0,.3);
     }
     #Awesome:hover .front{
      height: 70px;
      -webkit-box-shadow : 0 -60px 10px -60px rgba(0,0,0,.1);
     }
     #Awesome .front .circle{
      margin-top: -10px;
      background: orange;
      background-image: -webkit-linear-gradient(bottom,rgba(251,136,63,.0) 75% ,#f7bb37 95%);
      background-image: -moz-linear-gradient(bottom,rgba(251,236,63,.0)75%, #f7bb37 95%);
      background-image: linear-gradient(bottom,rgba(251,236,63,.0)75%, #f7bb37 95%);

     }
     #Awesome h4{
      font-family: 'helvetica neue',arial;
      font-weight: 200;
      text-align: center;
      position: absolute;
      color: white;
      width: 180px;
      height: 140px;
      line-height: 140px;
      transition:opacity 50ms linear 400ms;
     }
     #Awesome:hover h4{
      opacity: 0;
      transition:opacity 50ms linear 300ms;
     }
     #Awesome:hover .front .circle{
      margin-top: -90px;
      background-color: #e2d439;
      background-position: 0 100px;
     }

      </style>
</head>
<body>
<div id="Awesome" class="animation">
<div class="reveal circle_wrapper">
<div class="circle" style="color:white"> Please Subscribe</div>
  </div>
  <div class="sticky animation"> 
  <div class="front circle_wrapper animation">
  <div class="circle animation"></div>
  </div>
  </div>
  <h4>CodoBlog</h4>
  <div class="sticky animation">
  <div class="back circle_wrapper animation">
  <div class="circle animation"></div>
  </div>
  </div>
  </div>

</body>
</html>




OUTPUT - 
           
            1. After run the project
 



            2. When the mouse pointer crosses object



            3. With the Hover Effect

            




    So, Let's try the code and stay loving it..😊😊😊😊
            Watch video if geting some problem.



       





Labels:

Comments

Post a Comment

The Most Populer

SideBar PLUS Icon with animation

SideBar PLUS Icon with Animation || POP UP icon Box || Icon Interaction in HTML                      Here is the best code for pop up icon box with the animation effect. These icons will be use in the many website for users attraction. Do the code now..! #CODE : --     <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             * {     margin: 0;     padding: 0;     box-sizing: border-box; } body {     display: flex;     justify-content: center;     align-items: center;     min-height: 100vh;     --light-color: #f8f9fd;     background: #FF6347; } .container {     position: relative;     display: flex;     flex-wrap: wrap; ...
Post a Comment
Read more

POP UP | ALERT MESSAGE

 || POP UP MESSAGE BOX || ALERT  MESSAGE BOX || CODE BY CODOBLOG || codoblog giving the code for designing the code for POP UP message Box. This box also helpfull for giving the message of alerting also. Design it and use properly in your websites. This pop up message is so helpful for the alerting users during interacting with our web. So, try to do the code for it, and keep connected with the codoblog.   #CODE -         <!DOCTYPE html> <html> <head>   <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Pop up</title>     <link rel="stylesheet">     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>     <style type="text/css">     h3{     font-family: lucida Handwriting;     text-ali...
Post a Comment
Read more

my profile code by html || shutter animation with hover effect of html-css

                                              My Profile Viewer #CODE :       <!-- Created By Aziz Sobirov --> <!DOCTYPE html> <html>     <head>     <meta name="viewport" content="width=device-width, initial-scale=1" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <title>Img hover</title>         <style type="text/css">           *{     margin:0;     padding:0;    ...
Post a Comment
Read more