SOCIAL ICON ANIMATION

we are going to create social icon animation, When you hover your mouse over it, the icon enlarges and changes color, while a triangle shape glides along the card's edges, producing a 3D effect.

social-icon-animation

Let's create this effect step by step:

HTML:

<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script> 
<div> <a href="#" class="icon"> <box-icon type='logo' name='google'></box-icon> </a> </div>

  1.  including the Boxicons library for Google icons with the <script> tag, making it available for use in your HTML. you can use font-awesome library if you want.

  2. Inside a <div> element, you have an <a> element with the class "icon." This element contains an icon created using Boxicons, specifically the Google logo.

CSS:

body { height: 100vh;
 transform: translate(30%, 40%); }

 div { display: flex; text-align: center; }

 .icon { width: 50px; height: 50px; background-color: #f1f1f1; border-radius: 30%; 
color: #10ac84; box-shadow: 0 5px 15px -5px #00000070; 
position: relative; padding: 10px; overflow: hidden; }

 box-icon { line-height: 55px; font-size: 25px; transition: all 0.2s; }
 .icon:hover box-icon { transform: scale(1.3); color: #f1f1f1; }
 .icon:before { content: ""; position: absolute; width: 120%; 
height: 120%; background-color: #ffa977; left: -100%; top: 90%; transform: rotate(45deg); }
 .icon:hover:before { animation: animation 1s ease-out; } 
@keyframes animation { 0% { left: -110%; top: 90%; } 50% { left: -25%; top: -30%; } 100% { left: -10%; top: -10%; } }

The body element's height is set to 100% of the viewport height (100vh), and the transform attribute is used to translate it 30% to the right and 40% down, giving the page a shifted appearance.

The <div> elements are styled to appear as a flex container with its contents aligned to the center.

The following is how the ".icon" class styles the link:

  • It defines a defined width and height, resulting in a square.
  • For a card-like appearance, include a backdrop color, border radius, and shadow.
  • It positions the element approximately in order for the absolute positioning of pseudo-elements to be correct.
  • Padding is used, and overflow is hidden, to keep the icon and its hover effect within the box.
  • The box-icon class defines the appearance of the Boxicons icon within the link. It specifies a transition effect for hovering scaling.
  • The .icon:hover box-icon rule scales up the icon and changes its color while hovering over the.icon element to create a hover effect.
  • To make a triangular form with a backdrop color, use the.icon:before pseudo-element. It's centered and rotated to form a corner ornament on the card.
  • When you hover your mouse over the.icon element, the following text appears:
  • The hover:before rule uses the "animattion" animation with a length of one second and an ease-out timing function. The triangle form will now move in accordance with the keyframe animation.
  • The @keyframes animation rule defines the "animation" animation:
  • It places the shape in the top-right corner at 0% (left: -110%, top: 90%).
  • It shifts the form to the top-left corner at 50% (left: -25%, top: -30%).
  • It places the shape in the center of the card at 100% (left: -10%, top: -10%).

That's it! see Demo:  Codepen