정보실

웹학교

정보실

bootstrap 애니메이션 glyphicon

본문

부트스트랩에 기본 제공되는 glyphicon을 움직여 봅시다..

 

 

 

 

html:

        <button class="btn btn-default"><i class="glyphicon glyphicon-repeat gly-spin"></i></button>
        <button class="btn btn-default"><i class="glyphicon glyphicon-cog gly-spin"></i></button>
        <button class="btn btn-default"><i class="glyphicon glyphicon-th-large gly-spin"></i></button>
        <button class="btn btn-default"><i class="glyphicon glyphicon-refresh gly-spin"></i></button>

 

css:

.gly-spin {

  -webkit-animation: spin 2s infinite linear;

  -moz-animation: spin 2s infinite linear;

  -o-animation: spin 2s infinite linear;

  animation: spin 2s infinite linear;

}

@-moz-keyframes spin {

  0% {

    -moz-transform: rotate(0deg);

  }

  100% {

    -moz-transform: rotate(359deg);

  }

}

@-webkit-keyframes spin {

  0% {

    -webkit-transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(359deg);

  }

}

@-o-keyframes spin {

  0% {

    -o-transform: rotate(0deg);

  }

  100% {

    -o-transform: rotate(359deg);

  }

}

@keyframes spin {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(359deg);

    transform: rotate(359deg);

  }

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 1,875회 ]  작성일14-10-23 09:38

웹학교