> 웹 프론트엔드 > HTML 튜토리얼 > Magic CSS3 ? 创建各种神奇的交互动画效果_html/css_WEB-ITnose

Magic CSS3 ? 创建各种神奇的交互动画效果_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:06:05
원래의
1312명이 탐색했습니다.

  Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上,包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。

 

 

使用方法: 

  首先引入样式文件:

<link rel="stylesheet" href="yourpath/magic.css">
로그인 후 복사

  然后给你想要实现动画效果的元素添加类 magictime 以及动画类名,例如:

$('.yourdiv').hover(function () {  $(this).addClass('magictime puffIn');});
로그인 후 복사

  如果你要一定时间后执行动画,可以这样写:

setTimeout(function(){    $('.yourdiv').addClass('magictime puffIn');}, 5000);
로그인 후 복사

  循环执行动画也是可以的:

setInterval(function(){     $('.yourdiv').toggleClass('magictime puffIn');}, 3000 );
로그인 후 복사

  你还可以自定义动画的执行时间,修改时间参数即可:

.magictime {	-webkit-animation-duration: 1s;	-moz-animation-duration: 1s;	-o-animation-duration: 1s;	animation-duration: 1s;}
로그인 후 복사

  如果是针对特定动画效果的修改,则可以这样:

.magictime.magic {	-webkit-animation-duration: 10s;	-moz-animation-duration: 10s;	-o-animation-duration: 10s;	animation-duration: 10s;}
로그인 후 복사

  

立即下载      在线演示

 

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿