标签: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">
<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>
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