Detailed explanation of the css3 transition animation of menu bar 'three' transforming into 'X'-CSS Tutorial-php.cn

Detailed explanation of the css3 transition animation of menu bar 'three' transforming into 'X'

高洛峰

Release： 2017-03-06 11:13:51

Original

2751 people have browsed it

I recently wanted to imitate a page. One of the effects is that the three menu bars are transformed into X.

The effect is as follows:

菜单栏 “三” 变形为“X”css3过渡动画详解

Picture (1) Initial effect

菜单栏 “三” 变形为“X”css3过渡动画详解

Picture (2) Mouse hover effect

Idea:

The implementation of three horizontal lines: Traditionally, it can be achieved with three span tags, but there is a more clever method. One tag can achieve the three horizontal effect. According to Master Zhang Xinxu shared the idea of using padding to achieve the effect of three with one label. The general principle is to use border-top, background and border-bottom for the upper, middle and lower horizontal lines respectively. Use background-clip: content-box to cut, and finally use padding to spread it up and down to achieve the visual effect of three horizontal lines, the realization of

X: and the deformed X There is no need for additional labels, and it is implemented using its own after before pseudo-class transform rotation and offset. It takes patience to adjust the angle.

It should be noted that using padding to achieve the three-horizontal effect, the trigger is not very sensitive. It is best to wrap the icon label with a label, and do: hover trigger on the wrapping layer

The following is the code

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style type="text/css">
  .icon{
   width: 50px;
   height: 10px;
   padding: 10px 0;
   border-top: 10px solid #000;
   border-bottom: 10px solid #000;
   background: #000;
   background-clip: content-box;
  }
  .fa{   
   cursor: pointer;
   width: 50px;
   height: 50px;
   transition: .3s ease;
  }
  .fa:hover>.icon{
   border: 0;
   background: none;
  }
  .icon:before,.icon:after{
   position: absolute;
   content: "";
   width: 60px;
   height: 60px;
   transition: .3s ease;
   -webkit-transition: .3s ease;
   opacity: 0;
  }
  .icon:before{
   top: -5px;
   border-bottom: 10px solid #000;
  }
  .icon:after{
   top: 15px;
   border-top: 10px solid #000;
  }
  .fa:hover>.icon:before{
   opacity: 1;
   transform: rotate(135deg) translateX(5px) translateY(-25px);
   -webkit-transform: rotate(135deg) translateX(5px) translateY(-25px);
  }
  .fa:hover>.icon:after{
   opacity: 1;
   transform: rotate(-135deg) translateX(20px) translateY(39px);
   -webkit-transform: rotate(-135deg) translateX(20px) translateY(39px);
  }
 </style>
</head>
<body>
 <p class="fa">
  <p class="icon"></p>
 </p>
 <script type="text/javascript">
 </script>
</body>
</html>

Copy after login

More menu bar "three" transforms into "X" css3 transition animation for detailed explanation. Please pay attention to the PHP Chinese website for related articles!