메뉴 막대 '3'이 'X'로 변환되는 CSS3 전환 애니메이션에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-06 11:13:512730검색
최근 페이지를 흉내내고 싶었는데 효과 중 하나가 메뉴바 3개가
로 바뀌는 효과입니다.
그림(2) 마우스 호버 효과
아이디어:
가로선 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으로 문의하세요.