CSS使用Animate.css制作动画效果_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

一使用Animate.css动画

二自定义Animate.css动画

三使用JavaScript控制动画

집

웹 프론트엔드

HTML 튜토리얼

CSS使用Animate.css制作动画效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

一使用Animate.css动画

// 通过@import引入外部CSS资源;

// 引入线上图片及JS文件;

// 通过更改CSS类名生成不同类型的CSS3动画;

로그인 후 복사

 1 <!DOCTYPE html> 2 <html lang="en"> 3     <head> 4         <meta charset="utf-8"> 5     </head> 6     <style> 7         /* Animate.css GitHub地址:https://github.com/daneden/animate.css */ 8         /* Animate.css 演示地址:https://daneden.github.io/animate.css/ */ 9 10         @import url("http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css");11         body {12             background: #cfcfcf;13         }14         img {15             position: absolute;16             left: 50%;17             top:50%;18             margin-left: -100px;19             margin-top: -100px;20             width:200px;21             height:200px;22         }23 24     </style>25     <body>26         <img src="/static/imghw/default1.png"  data-src="http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png"  class="lazy" alt="">27     </body>28     <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>29     <script>30         function rock (x) {                             // 定义事件函数;31             $('img').not('.center')32                     .addClass(x + ' animated')          // 添加CSS类名;33                     .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'34                     ,function(){35                         $(this).removeClass();36                     });37         };38 39         $(document).ready(function(){40             rock("rubberBand infinite");                // 添加CSS类名生成相应的动态效果;41             setTimeout(function(){window.lcation.href = "http://www.kiklink.com"},6000);42             // 设置时间跳转;43         });44     </script>45 </html>

로그인 후 복사

二自定义Animate.css动画

// 可以使用animate.css代码作为基础,编写自定义的动画效果;

 1 @keyframes bounce {                     /*通过@keyframes规则,创建bounce动画;*/ 2     0%,20%,50%,80%,100% { 3         transform:translateY(0); 4     } 5     40% { 6         transform:translateY(-30px); 7     } 8     60% { 9         transform:translateY(-15px);10     }11 }12 .bounce {13     animation-name:bounce;              /*调用bounce动画;*/14 }15 .animated {16     animation-duration:3s;              /*一个动画周期的时长;*/17     animation-fill-mode:both;           /*指定动画执行之前之后的样式;*/18 }19 .animated.infinite {20     animation-iteration-count:infinite; /*定义动画播放的次数;(n次/infinite无限次);*/21 }

로그인 후 복사

1 <img class="animated bounce infinite lazy"  src="/static/imghw/default1.png"  data-src="http://www.gbtags.com/gb/laitu/150x150"  alt="">

로그인 후 복사

三使用JavaScript控制动画

1 $('img').click(function(){              // 给Img元素绑定点击事件;2     var $this = $(this);                // 鼠标点击之后添加相应的动画类名; 3     $this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){4                                         //<strong> 当-webkit-animation动画结束之后会有一个webkitAnimationEnd事件;</strong>5                                         //<strong> 当one()方法监听到webkitAnimationEnd事件之后才执行function函数;one()方法只能执行一次;</strong>6         $this.removeClass();            // 清除相应的动画类名;7     })8 });

로그인 후 복사

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7345

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1214

Related knowledge

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.