>  기사  >  웹 프론트엔드  >  jquery 및 CSS3를 사용하여 탄력적인 애니메이션 효과를 제공하는 도구 모음 메뉴

jquery 및 CSS3를 사용하여 탄력적인 애니메이션 효과를 제공하는 도구 모음 메뉴

黄舟
黄舟원래의
2017-01-19 14:53:451254검색

간단한 튜토리얼

jquery와 CSS3를 이용하여 만든 탄력적인 애니메이션 효과를 담은 툴바 메뉴 효과입니다. 도구 모음 메뉴는 기본적으로 원형 버튼만 표시합니다. 버튼을 클릭하면 하위 메뉴 항목이 탄력적인 애니메이션으로 확장되며 효과가 매우 멋집니다.

사용법

jquery와 글꼴 아이콘 파일인font-awesome.css를 페이지에 도입하세요.

<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="path/to/jquery.min.js"></script>

HTML 구조

툴바 메뉴의 HTML 구조는 다음과 같습니다.

<div id="wrapper">
  <div id="toolbar">
        <div class="button"></div>
        <ul class="icons">
              <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
              <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
        </ul>
      </div>
</div>

CSS 스타일

툴바 메뉴에 다음 CSS 스타일을 추가합니다. :

#wrapper {
  text-align:center;
  font-family: &#39;Lato&#39;, sans-serif;
  text-transform:uppercase;
}
#toolbar {  
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}
.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}
.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
  content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:60px;
}
.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}
 
.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}
 
.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}
 
.icons.open li {
  width:16%;
  display: inline-block;
}

초기화 플러그인

페이지 DOM 요소가 로드된 후 다음 jquery 코드를 사용하여 툴바 메뉴를 열고 닫습니다.

$( ".button" ).click(function() {
  $(this).toggleClass( "active" );
  $(".icons").toggleClass( "open" );
});

위는 탄력적인 애니메이션 효과를 적용한 jquery와 CSS3 툴바 메뉴의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


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