메뉴 막대 '3'이 'X'로 변환되는 CSS3 전환 애니메이션에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

메뉴 막대 '3'이 'X'로 변환되는 CSS3 전환 애니메이션에 대한 자세한 설명

高洛峰

Mar 06, 2017 am 11:13 AM

최근 페이지를 흉내내고 싶었는데 효과 중 하나가 메뉴바 3개가

그림(1) 초기 효과

로 바뀌는 효과입니다.

그림(2) 마우스 호버 효과 菜单栏 “三” 变形为“X”css3过渡动画详解

아이디어:

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

가로선 3개 구현

: 전통적으로, 3개의 스팬 태그로 달성할 수 있지만 더 영리한 방법이 있습니다. 마스터 Zhang Xinxu는 하나의 레이블로 3개의 효과를 달성하기 위해 패딩을 사용하는 아이디어를 공유했습니다. 일반적인 원칙은 위쪽, 중간, 아래쪽 수평선에 각각 border-top, background 및 border-bottom을 사용하는 것입니다. background-clip: content-box를 사용하여 자르고 마지막으로 padding을 사용하여 위아래로 펼쳐서 가로 세 줄의 시각적 효과를 얻습니다.

X 구현: 및 변형된 X 별도의 라벨이 필요 없으며, 전 의사 클래스 변환 회전 및 오프셋을 사용하여 자체적으로 구현됩니다. 각도를 조정하려면 인내심이 필요합니다. 세 가지 수평 효과를 얻기 위해 패딩을 사용하는 것은 트리거에 그다지 민감하지 않다는 점에 유의해야 합니다. 아이콘 태그를 레이블로 래핑하고 래핑 레이어에서 수행하는 것이 가장 좋습니다. 호버 트리거

다음은 코드입니다

<!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>

로그인 후 복사

자세한 설명을 위해 메뉴바 "3"이 "X" css3 전환 애니메이션으로 변환됩니다. PHP 중국어 웹사이트를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.