前端之路

标签：alternate   animation   infinite   动画   

一.loging动画   http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html 

上下浮动动画

.xx {
	animation: ghostUpdown 0.7s infinite alternate;
	-webkit-animation: ghostUpdown 0.7s infinite alternate;
}

@keyframes ghostUpdown {
	from {
		margin-bottom: 20px;
	}
	to {
		margin-bottom: 10px;
	}
}

@-webkit-keyframes ghostUpdown {
	from {
		margin-bottom: 20px;
	}
	to {
		margin-bottom: 10px;
	}
}

二.页面滚动动画  wow.js   http://www.dowebok.com/131.html

 WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

  1、引入文件

 <link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

3、JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({
    boxClass: ‘wow‘,
    animateClass: ‘animated‘,
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};

三.弹窗 绝对定位居中 left:50%,top:50%; margin:-高度一半,-宽度一半;

   html

<div class="content hide">	
    <div class="warp content-main">
       <a href="javascript:void(0);" class="content-close js-content-close"></a>	    	
    </div>
    <div class="content-mask js-content-close"></div>
</div>

 css

.content{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.warp{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -145px 0 0 -291px;
    z-index: 10;	
}

.content-main{
   width: 582px;
   height: 290px;
   background: url(../images/rul_bg.jpg) no-repeat;
}

.content-close{
  position: absolute;
}

.content-mask{
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

 js

var $content = $(‘.content‘);

	$(‘.content-btn‘).on(‘click‘, function() {
		$content.show();
	});

	$content.on(‘click‘, ‘.js-content-close‘, function() {
		$content.fadeOut();
	});

四.获取浏览器高度

 js  当浏览器高度大于多少时...

var mouse = $(‘.icon-mouse‘);
	$(window).scroll(function() {
		if ($(window).scrollTop() > 1600) {
			mouse.addClass(‘hide‘);
		} else {
			mouse.removeClass(‘hide‘);
		}
	});

五.图片放大

 css

.zooming{
	overflow: hidden;
}

.zooming span {
	-webkit-transition-duration: 350ms;
	-moz-transition-duration: 350ms;
	-o-transition-duration: 350ms;
	-ms-transform-duration: 350ms;
	transition-duration: 350ms;
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition-property: color, background-color, visibility, opacity;
	-moz-transition-property: color, background-color, visibility, opacity;
	-o-transition-property: color, background-color, visibility, opacity;
	-ms-transition-property: color, background-color, visibility, opacity;
	transition-property: color, background-color, visibility, opacity;
}

.zooming span img {
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.zooming:hover img {
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

六.弹出层相册

  引入 

<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.js"></script>

html

<div class="tab-box">
  <div class="tab-list">
	<a class="fancybox" href="images/M51.jpg" data-fancybox-group="gallery1"><img src="images/M5_1.jpg"/><span></span></a>
	<aclass="fancybox" href="images/M52.jpg" data-fancybox-group="gallery1"><img src="images/M5_2.jpg"/><span></span></a>   			
  </div>
  <div class="tab-list hide">
	<a class="fancybox" href="images/1.jpg" data-fancybox-group="gallery2"><img src="images/yuyue_2.jpg"/><span></span></a>
	<aclass="fancybox" href="images/2.jpg" data-fancybox-group="gallery2"><img src="images/v3_2.jpg"/><span></span></a>
  </div>
  <div class="tab-list hide">
	<a class="fancybox" href="images/V31.jpg" data-fancybox-group="gallery3"><img src="images/v3_1.jpg"/><span></span></a>
	<a class="fancybox" href="images/2.jpg" data-fancybox-group="gallery3"><img src="images/v3_2.jpg"/><span></span></a>
   </div>
</div>

rel="group1"

rel="group2"

rel="group3"

js

$(".fancybox").fancybox({
		padding: 0,
		closeBtn:true,
		showNavArrows:true ,
		helpers : {
			overlay : {
					css : {
						‘background‘ : ‘rgba(0,0,0,0.7)‘
					}
				}
		}
	});

本文出自 “11330179” 博客，请务必保留此出处http://11340179.blog.51cto.com/11330179/1825991

前端之路

标签：alternate   animation   infinite   动画   

原文地址：http://11340179.blog.51cto.com/11330179/1825991