一.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>
无限 data-wow-iteration="infinite"
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
ie浏览器rgb
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
.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(../p_w_picpaths/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="p_w_picpaths/M51.jpg" data-fancybox-group="gallery1"><img src="p_w_picpaths/M5_1.jpg"/><span></span></a>
<aclass="fancybox" href="p_w_picpaths/M52.jpg" data-fancybox-group="gallery1"><img src="p_w_picpaths/M5_2.jpg"/><span></span></a>
</div>
<div class="tab-list hide">
<a class="fancybox" href="p_w_picpaths/1.jpg" data-fancybox-group="gallery2"><img src="p_w_picpaths/yuyue_2.jpg"/><span></span></a>
<aclass="fancybox" href="p_w_picpaths/2.jpg" data-fancybox-group="gallery2"><img src="p_w_picpaths/v3_2.jpg"/><span></span></a>
</div>
<div class="tab-list hide">
<a class="fancybox" href="p_w_picpaths/V31.jpg" data-fancybox-group="gallery3"><img src="p_w_picpaths/v3_1.jpg"/><span></span></a>
<a class="fancybox" href="p_w_picpaths/2.jpg" data-fancybox-group="gallery3"><img src="p_w_picpaths/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)' } } } });
转载于:https://blog.51cto.com/11340179/1825991