CSS3 Bezier curve example: create link hover animation effect

Time:2022-1-13

We will use CSS3 animation transition to create a simple but fascinating link hover effect. When you hover over the link, a small pop-up box will pop up.

We’ll also look at the CSS3 cubic Bezier curve, which is a CSS transition that provides smoother motion for pop-up boxes rather than rigid mechanical motion.

This is our final effect:

Let’s start!

HTML part

This is the HTML of our link, and the icon is from iconfont cn。


<div class="container">
  <section>
    <a href="#">
      <i class="fab fa-instagram"></i>
      <span>Instagram</span>
    </a>
    <a href="#">
      <i class="fab fa-github"></i>
      <span>Github</span>
    </a>
  </section>
</div>

When you hover over the link, the span tag becomes a pop-up box. Next, let’s go to CSS.

CSS styles and animation

We center the div container so that the two links are centered on the screen. This also makes it easy to animate small pop ups because they will pop up from the top of the link.


div.container {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Next, we style the link, create a simple background hover effect, and locate the social media icon.


a {
  color: #fff;
  background: #8a938b;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  padding-top: 12px;
  margin: 0 2px;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-font-smoothing: antialiased;
}
a:hover {
  background: #5a665e;
}
i {
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 20%;
}

Next, we will style and animate the pop-up text.

a span {
  color: #666;
  position: absolute;
  font-family: "Chelsea Market", cursive;
  bottom: 0;
  left: -15px;
  right: -15px;
  padding: 15px 7px;
  z-index: -1;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}/ * when the icon is hovering, the text will pop up*/
a:hover span {
  bottom: 130px;
  visibility: visible;
  opacity: 1;
}

CSS3 cubic Bezier curve is defined by four points P0, P1, P2 and P3. Point P0 is the starting point of the curve, and point P3 is the end point of the curve. The more linear the curve, the stiffer (or less smooth) the motion.

If one point is positive at first and the next point is negative, the motion will be slow at first. When the point value becomes higher than the previous point value, the motion accelerates.

This is the meaning of cubic Bezier point in CSS. Because the animation is short, the action is very subtle. The pop-up box starts slowly from the bottom of the square and then accelerates to the top.

Although you can create an animation without cubic Bezier curve transition, the animation differs as follows:

Animation with cubic Bezier curve transition

Animation without cubic Bezier curve transition

You can see that the animation adds vitality to the hover effect.

The last set of CSS involves stylizing the small arrows at the bottom of the pop-up box. To learn more about how to make triangles in CSS, check out this CSS tip.

summary

We created a simple button style link. Links have a basic background hover effect, but we don’t stop there. We added a small pop-up box to display the text of the link. With the help of CSS3 cubic Bezier curve, the animation is smooth and pleasant.

This knowledge is very useful as part of your website design to display your social media account.

Please visit the following address for the sample demonstration and complete code in this article. It is recommended to open it on the PC sidehttps://coding.zhanbing.site

The above is the example of CSS3 Bezier curve: details of creating link hover animation effect. For more information about CSS3 Bezier curve, please pay attention to other related articles of developeppaer!

Recommended Today

Shell script implementation determines whether the IP address is code shared within an IP segment

cat ipcalc.sh #!/bin/bash IP=$1 if [ -z $IP ] then echo -e “\e[31;42m sh ipcalc.sh IP \e[0m” exit fi while read MASK do min=`/usr/bin/ipcalc $MASK|awk ‘/HostMin:/{print $2}’` max=`/usr/bin/ipcalc $MASK|awk ‘/HostMax:/{print $2}’` MIN=`echo $min|awk -F”.” ‘{printf”%.0f\n”,$1*256*256*256+$2*256*256+$3*256+$4}’` MAX=`echo $max|awk -F”.” ‘{printf”%.0f\n”,$1*256*256*256+$2*256*256+$3*256+$4}’` IPvalue=`echo $IP|awk -F”.” ‘{printf”%.0f\n”,$1*256*256*256+$2*256*256+$3*256+$4}’` if [ “$IPvalue” -gt “$MIN” ] && [ “$IPvalue” -lt “$MAX” ] […]