├── .DS_Store ├── 3DTransform ├── .DS_Store ├── README.md ├── common │ ├── jquery.min.js │ ├── modernizr.custom.js │ └── sea.js ├── css │ ├── animation.css │ └── style.css ├── index.html ├── js │ ├── baseFunc.js │ └── index.js └── resource │ ├── .DS_Store │ └── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ └── arrow.png ├── AnnualMeeting ├── .DS_Store ├── README.md ├── common │ ├── jquery.min.js │ ├── modernizr.custom.js │ └── sea.js ├── css │ ├── animation.css │ └── style.css ├── index.html ├── js │ ├── baseFunc.js │ ├── index.js │ ├── nameList.js │ └── object.js └── resource │ ├── .DS_Store │ └── images │ ├── .DS_Store │ ├── award.png │ ├── begin.png │ ├── bg.jpg │ ├── bg1.jpg │ ├── cover.png │ ├── logo.png │ ├── noise.png │ ├── photo.rar │ ├── round.png │ ├── title.png │ ├── 挑战.html │ └── 挑战_files │ ├── picNum.png │ ├── tiaozhanshai.jpg │ ├── timeLine.png │ └── video.png ├── README.md ├── base.css ├── blur ├── .DS_Store ├── index.html ├── resource │ ├── .DS_Store │ └── images │ │ ├── .DS_Store │ │ └── bg1.jpg └── style.css ├── filter ├── .DS_Store ├── index.html ├── resource │ ├── .DS_Store │ └── images │ │ ├── .DS_Store │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 7.jpg │ │ └── bg.jpg └── style.css ├── fragment ├── .DS_Store ├── images │ ├── .DS_Store │ ├── a.jpg │ ├── b.jpg │ ├── bg.jpg │ ├── c.jpg │ ├── d.jpg │ └── e.jpg ├── index.html ├── index.js ├── npm-debug.log └── style.css ├── panorama ├── .DS_Store ├── download.js ├── index.html └── src │ ├── .DS_Store │ ├── hammer.js │ ├── images │ ├── .DS_Store │ ├── 0.jpg │ ├── Group.jpg │ └── load.png │ ├── index.js │ └── main.css ├── shadow ├── .DS_Store ├── index.html ├── resource │ ├── .DS_Store │ └── images │ │ ├── .DS_Store │ │ └── bg1.jpg └── style.css └── trajectory ├── .DS_Store ├── images ├── air-1.png └── sss2.png ├── index.html ├── index.js └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/.DS_Store -------------------------------------------------------------------------------- /3DTransform/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/.DS_Store -------------------------------------------------------------------------------- /3DTransform/README.md: -------------------------------------------------------------------------------- 1 | # 3DTransform 2 | 3D transform picture carousel by CSS3
3 | CSS3实现的3D变换图片轮播 4 | 5 | play: http://darylxyx.github.io/CSS3/3DTransform 6 | -------------------------------------------------------------------------------- /3DTransform/common/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssanimations-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.cssanimations=function(){return F("animationName")},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f0||47===c?a:a+".js"}function h(a){var b=v.alias;return b&&x(b[a])?b[a]:a}function i(a){var b=v.paths,c;return b&&(c=a.match(H))&&x(b[c[1]])&&(a=b[c[1]]+c[2]),a}function j(a){var b=v.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(I,function(a,c){return x(b[c])?b[c]:a})),a}function k(a){var b=v.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f=b[d];if(c=z(f)?f(a)||a:a.replace(f[0],f[1]),c!==a)break}return c}function l(a,b){var c,d=a.charCodeAt(0);if(J.test(a))c=a;else if(46===d)c=(b?e(b):v.cwd)+a;else if(47===d){var g=v.cwd.match(K);c=g?g[0]+a.substring(1):a}else c=v.base+a;return 0===c.indexOf("//")&&(c=location.protocol+c),f(c)}function m(a,b){if(!a)return"";a=h(a),a=i(a),a=h(a),a=j(a),a=h(a),a=g(a),a=h(a);var c=l(a,b);return c=h(c),c=k(c)}function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}function o(a,b,c){var d;try{importScripts(a)}catch(e){d=e}b(d)}function p(a,b,c){var d=Y.createElement("script");if(c){var e=z(c)?c(a):c;e&&(d.charset=e)}q(d,b,a),d.async=!0,d.src=a,bb=d,ab?_.insertBefore(d,ab):_.appendChild(d),bb=null}function q(a,b,c){function d(c){a.onload=a.onerror=a.onreadystatechange=null,v.debug||_.removeChild(a),a=null,b(c)}var e="onload"in a;e?(a.onload=d,a.onerror=function(){C("error",{uri:c,node:a}),d(!0)}):a.onreadystatechange=function(){/loaded|complete/.test(a.readyState)&&d()}}function r(){if(bb)return bb;if(cb&&"interactive"===cb.readyState)return cb;for(var a=_.getElementsByTagName("script"),b=a.length-1;b>=0;b--){var c=a[b];if("interactive"===c.readyState)return cb=c}}function s(a){function b(){l=a.charAt(k++)}function c(){return/\s/.test(l)}function d(){return'"'==l||"'"==l}function e(){var c=k,d=l,e=a.indexOf(d,c);if(-1==e)k=m;else if("\\"!=a.charAt(e-1))k=e+1;else for(;m>k;)if(b(),"\\"==l)k++;else if(l==d)break;o&&(r.push(a.slice(c,k-1)),o=0)}function f(){for(k--;m>k;)if(b(),"\\"==l)k++;else{if("/"==l)break;if("["==l)for(;m>k;)if(b(),"\\"==l)k++;else if("]"==l)break}}function g(){return/[a-z_$]/i.test(l)}function h(){var b=a.slice(k-1),c=/^[\w$]+/.exec(b)[0];p={"if":1,"for":1,"while":1,"with":1}[c],n={"break":1,"case":1,"continue":1,"debugger":1,"delete":1,"do":1,"else":1,"false":1,"if":1,"in":1,"instanceof":1,"return":1,"typeof":1,"void":1}[c],o=/^require\s*\(\s*(['"]).+?\1\s*\)/.test(b),o?(c=/^require\s*\(\s*['"]/.exec(b)[0],k+=c.length-2):k+=/^[\w$]+(?:\s*\.\s*[\w$]+)*/.exec(b)[0].length-1}function i(){return/\d/.test(l)||"."==l&&/\d/.test(a.charAt(k))}function j(){var b=a.slice(k-1),c;c="."==l?/^\.\d+(?:E[+-]?\d*)?\s*/i.exec(b)[0]:/^0x[\da-f]*/i.test(b)?/^0x[\da-f]*\s*/i.exec(b)[0]:/^\d+\.?\d*(?:E[+-]?\d*)?\s*/i.exec(b)[0],k+=c.length-1,n=0}if(-1==a.indexOf("require"))return[];for(var k=0,l,m=a.length,n=1,o=0,p=0,q=[],r=[];m>k;)b(),c()||(d()?(e(),n=1):"/"==l?(b(),"/"==l?(k=a.indexOf("\n",k),-1==k&&(k=a.length)):"*"==l?(k=a.indexOf("*/",k),-1==k?k=m:k+=2):n?(f(),n=0):(k--,n=1)):g()?h():i()?j():"("==l?(q.push(p),n=1):")"==l?n=q.pop():(n="]"!=l,o=0));return r}function t(a,b){this.uri=a,this.dependencies=b||[],this.deps={},this.status=0,this._entry=[]}if(!a.seajs){var u=a.seajs={version:"3.0.0"},v=u.data={},w=c("Object"),x=c("String"),y=Array.isArray||c("Array"),z=c("Function"),A=0,B=v.events={};u.on=function(a,b){var c=B[a]||(B[a]=[]);return c.push(b),u},u.off=function(a,b){if(!a&&!b)return B=v.events={},u;var c=B[a];if(c)if(b)for(var d=c.length-1;d>=0;d--)c[d]===b&&c.splice(d,1);else delete B[a];return u};var C=u.emit=function(a,b){var c=B[a];if(c){c=c.slice();for(var d=0,e=c.length;e>d;d++)c[d](b)}return u},D=/[^?#]*\//,E=/\/\.\//g,F=/\/[^/]+\/\.\.\//,G=/([^:/])\/+\//g,H=/^([^/:]+)(\/.+)$/,I=/{([^{]+)}/g,J=/^\/\/.|:\//,K=/^.*?\/\/.*?\//;u.resolve=m;var L="undefined"==typeof window&&"undefined"!=typeof importScripts&&z(importScripts),M=/^(about|blob):/,N,O,P=!location.href||M.test(location.href)?"":e(location.href);if(L){var Q;try{var R=Error();throw R}catch(S){Q=S.stack.split("\n")}Q.shift();for(var T,U=/.*?((?:http|https|file)(?::\/{2}[\w]+)(?:[\/|\.]?)(?:[^\s"]*)).*?/i,V=/(.*?):\d+:\d+\)?$/;Q.length>0;){var W=Q.shift();if(T=U.exec(W),null!=T)break}var X;if(null!=T)var X=V.exec(T[1])[1];O=X,N=e(X||P),""===P&&(P=N)}else{var Y=document,Z=Y.scripts,$=Y.getElementById("seajsnode")||Z[Z.length-1];O=n($),N=e(O||P)}if(L)u.request=o;else{var Y=document,_=Y.head||Y.getElementsByTagName("head")[0]||Y.documentElement,ab=_.getElementsByTagName("base")[0],bb;u.request=p}var cb,db=u.cache={},eb,fb={},gb={},hb={},ib=t.STATUS={FETCHING:1,SAVED:2,LOADING:3,LOADED:4,EXECUTING:5,EXECUTED:6,ERROR:7};t.prototype.resolve=function(){for(var a=this,b=a.dependencies,c=[],d=0,e=b.length;e>d;d++)c[d]=t.resolve(b[d],a.uri);return c},t.prototype.pass=function(){for(var a=this,b=a.dependencies.length,c=0;cf;f++){var g=a.deps[a.dependencies[f]];g.status0&&(d.remain+=e-1,a._entry.shift(),c--)}},t.prototype.load=function(){var a=this;if(!(a.status>=ib.LOADING)){a.status=ib.LOADING;var c=a.resolve();C("load",c);for(var d=0,e=c.length;e>d;d++)a.deps[a.dependencies[d]]=t.get(c[d]);if(a.pass(),a._entry.length)return a.onload(),b;var f={},g;for(d=0;e>d;d++)g=db[c[d]],g.statusb;b++){var d=a._entry[b];0===--d.remain&&d.callback()}delete a._entry},t.prototype.error=function(){var a=this;a.onload(),a.status=ib.ERROR},t.prototype.exec=function(){function a(b){var d=c.deps[b]||t.get(a.resolve(b));if(d.status==ib.ERROR)throw Error("module was broken: "+d.uri);return d.exec()}var c=this;if(c.status>=ib.EXECUTING)return c.exports;if(c.status=ib.EXECUTING,c._entry&&!c._entry.length&&delete c._entry,!c.hasOwnProperty("factory"))return c.non=!0,b;var e=c.uri;a.resolve=function(a){return t.resolve(a,e)},a.async=function(b,c){return t.use(b,c,e+"_async_"+d()),a};var f=c.factory,g=z(f)?f(a,c.exports={},c):f;return g===b&&(g=c.exports),delete c.factory,c.exports=g,c.status=ib.EXECUTED,C("exec",c),c.exports},t.prototype.fetch=function(a){function c(){u.request(g.requestUri,g.onRequest,g.charset)}function d(a){delete fb[h],gb[h]=!0,eb&&(t.save(f,eb),eb=null);var b,c=hb[h];for(delete hb[h];b=c.shift();)a===!0?b.error():b.load()}var e=this,f=e.uri;e.status=ib.FETCHING;var g={uri:f};C("fetch",g);var h=g.requestUri||f;return!h||gb.hasOwnProperty(h)?(e.load(),b):fb.hasOwnProperty(h)?(hb[h].push(e),b):(fb[h]=!0,hb[h]=[e],C("request",g={uri:f,requestUri:h,onRequest:d,charset:z(v.charset)?v.charset(h)||"utf-8":v.charset}),g.requested||(a?a[g.requestUri]=c:c()),b)},t.resolve=function(a,b){var c={id:a,refUri:b};return C("resolve",c),c.uri||u.resolve(c.id,b)},t.define=function(a,c,d){var e=arguments.length;1===e?(d=a,a=b):2===e&&(d=c,y(a)?(c=a,a=b):c=b),!y(c)&&z(d)&&(c=b===s?[]:s(""+d));var f={id:a,uri:t.resolve(a),deps:c,factory:d};if(!L&&!f.uri&&Y.attachEvent&&b!==r){var g=r();g&&(f.uri=g.src)}C("define",f),f.uri?t.save(f.uri,f):eb=f},t.save=function(a,b){var c=t.get(a);c.statusf;f++)b[f]=db[d[f]].exec();c&&c.apply(a,b),delete e.callback,delete e.history,delete e.remain,delete e._entry},e.load()},u.use=function(a,b){return t.use(a,b,v.cwd+"_use_"+d()),u},t.define.cmd={},a.define=t.define,u.Module=t,v.fetchedList=gb,v.cid=d,u.require=function(a){var b=t.get(t.resolve(a));return b.status 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 3DTransform 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
  • 30 |
  • 31 |
  • 32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 47 | 48 | -------------------------------------------------------------------------------- /3DTransform/js/baseFunc.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module) { 2 | var a = { 3 | 4 | init: function($page) { 5 | 6 | this.current = 0; //当前页码 7 | 8 | this.intervalObj = null; 9 | 10 | this.$page = $page; //page集合 11 | 12 | this.$point = $('.point'); 13 | 14 | // this.$pointList = $('.point-list').find('li'); 15 | 16 | this.$page.each(function(index, item) { 17 | $(item).data('originalClassList', $(item).attr('class')); 18 | }); 19 | 20 | this.$page.eq(0).addClass('page-current'); 21 | 22 | // this.$pointList.eq(0).addClass('checked-point'); 23 | 24 | this.isAnimating = false; 25 | }, 26 | 27 | _turnPage: function(current, style, type) { 28 | 29 | var $page = this.$page, 30 | pageCount = $page.length, 31 | animationInName = '', 32 | animationOutName = '', 33 | animationEventNames = { 34 | 'WebkitAnimation' : 'webkitAnimationEnd', 35 | 'OAnimation' : 'oAnimationEnd', 36 | 'msAnimation' : 'MSAnimationEnd', 37 | 'animation' : 'animationend' 38 | }, 39 | animationEventName = animationEventNames[Modernizr.prefixed('animation')], 40 | _this = this; 41 | 42 | // console.log(animationEventName); 43 | 44 | switch(style) { 45 | case 'cubeLeft': 46 | animationOutName = 'page-cubeLeftOut page-ontop'; 47 | animationInName = 'page-cubeLeftIn'; 48 | break; 49 | case 'cubeRight': 50 | animationOutName = 'page-cubeRightOut page-ontop'; 51 | animationInName = 'page-cubeRightIn'; 52 | break; 53 | case 'cubeTop': 54 | animationOutName = 'page-cubeTopOut page-ontop'; 55 | animationInName = 'page-cubeTopIn'; 56 | break; 57 | case 'cubeBottom': 58 | animationOutName = 'page-cubeBottomOut page-ontop'; 59 | animationInName = 'page-cubeBottomIn'; 60 | } 61 | 62 | var $outPage = $page.eq(current); 63 | 64 | if (type == 1) { //下一页 65 | if (current < pageCount - 1) { 66 | current ++; 67 | } else { 68 | current = 0; 69 | } 70 | } else if (type == 0) { //上一页 71 | if (current > 0) { 72 | current --; 73 | } else { 74 | current = pageCount - 1; 75 | } 76 | } 77 | 78 | var $inPage = $page.eq(current); 79 | $inPage.addClass('page-current'); 80 | 81 | _this._checkPoint(current); 82 | 83 | $outPage.addClass(animationOutName).on(animationEventName, function() { 84 | $outPage.off(animationEventName).attr('class', $outPage.data('originalClassList')); 85 | }); 86 | 87 | $inPage.addClass(animationInName).on(animationEventName, function() { 88 | $('.logo-box').hide(); 89 | $inPage.off(animationEventName).attr('class', $inPage.data('originalClassList') + ' page-current'); 90 | _this.isAnimating = false; 91 | _this.current = current; 92 | }); 93 | }, 94 | 95 | nextPage: function() { 96 | 97 | var _this = a; 98 | 99 | if (_this.isAnimating) { //正在切换页面 100 | return; 101 | }; 102 | 103 | _this.isAnimating = true; 104 | 105 | var current = _this.current, 106 | animatNames = ['cubeTop', 'cubeBottom', 'cubeLeft', 'cubeRight'], 107 | animatName = animatNames[Math.floor(Math.random() * 4)], 108 | type = $(this).attr('data-type'); 109 | 110 | if (animatName) { 111 | _this._turnPage(current, animatName, type); 112 | } 113 | }, 114 | 115 | _checkPoint: function(current) { 116 | this.$point.animate({ 117 | marginLeft: current * 20 118 | },300,'linear'); 119 | } 120 | }; 121 | 122 | module.exports = a; 123 | }) -------------------------------------------------------------------------------- /3DTransform/js/index.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | define(function(require, exports, module) { 3 | var a = require('baseFunc'); 4 | a.init($('.page')); 5 | $('.turn-btn').on('click', a.nextPage); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /3DTransform/resource/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/.DS_Store -------------------------------------------------------------------------------- /3DTransform/resource/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/1.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/2.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/3.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/4.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/5.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/6.jpg -------------------------------------------------------------------------------- /3DTransform/resource/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/3DTransform/resource/images/arrow.png -------------------------------------------------------------------------------- /AnnualMeeting/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/.DS_Store -------------------------------------------------------------------------------- /AnnualMeeting/README.md: -------------------------------------------------------------------------------- 1 | # AnuualMeeting 2 | 3 | 基于3D变换的年会抽奖系统
4 | Lottery draw system based on 3Dtransform 5 | -------------------------------------------------------------------------------- /AnnualMeeting/common/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssanimations-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.cssanimations=function(){return F("animationName")},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f0||47===c?a:a+".js"}function h(a){var b=v.alias;return b&&x(b[a])?b[a]:a}function i(a){var b=v.paths,c;return b&&(c=a.match(H))&&x(b[c[1]])&&(a=b[c[1]]+c[2]),a}function j(a){var b=v.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(I,function(a,c){return x(b[c])?b[c]:a})),a}function k(a){var b=v.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f=b[d];if(c=z(f)?f(a)||a:a.replace(f[0],f[1]),c!==a)break}return c}function l(a,b){var c,d=a.charCodeAt(0);if(J.test(a))c=a;else if(46===d)c=(b?e(b):v.cwd)+a;else if(47===d){var g=v.cwd.match(K);c=g?g[0]+a.substring(1):a}else c=v.base+a;return 0===c.indexOf("//")&&(c=location.protocol+c),f(c)}function m(a,b){if(!a)return"";a=h(a),a=i(a),a=h(a),a=j(a),a=h(a),a=g(a),a=h(a);var c=l(a,b);return c=h(c),c=k(c)}function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}function o(a,b,c){var d;try{importScripts(a)}catch(e){d=e}b(d)}function p(a,b,c){var d=Y.createElement("script");if(c){var e=z(c)?c(a):c;e&&(d.charset=e)}q(d,b,a),d.async=!0,d.src=a,bb=d,ab?_.insertBefore(d,ab):_.appendChild(d),bb=null}function q(a,b,c){function d(c){a.onload=a.onerror=a.onreadystatechange=null,v.debug||_.removeChild(a),a=null,b(c)}var e="onload"in a;e?(a.onload=d,a.onerror=function(){C("error",{uri:c,node:a}),d(!0)}):a.onreadystatechange=function(){/loaded|complete/.test(a.readyState)&&d()}}function r(){if(bb)return bb;if(cb&&"interactive"===cb.readyState)return cb;for(var a=_.getElementsByTagName("script"),b=a.length-1;b>=0;b--){var c=a[b];if("interactive"===c.readyState)return cb=c}}function s(a){function b(){l=a.charAt(k++)}function c(){return/\s/.test(l)}function d(){return'"'==l||"'"==l}function e(){var c=k,d=l,e=a.indexOf(d,c);if(-1==e)k=m;else if("\\"!=a.charAt(e-1))k=e+1;else for(;m>k;)if(b(),"\\"==l)k++;else if(l==d)break;o&&(r.push(a.slice(c,k-1)),o=0)}function f(){for(k--;m>k;)if(b(),"\\"==l)k++;else{if("/"==l)break;if("["==l)for(;m>k;)if(b(),"\\"==l)k++;else if("]"==l)break}}function g(){return/[a-z_$]/i.test(l)}function h(){var b=a.slice(k-1),c=/^[\w$]+/.exec(b)[0];p={"if":1,"for":1,"while":1,"with":1}[c],n={"break":1,"case":1,"continue":1,"debugger":1,"delete":1,"do":1,"else":1,"false":1,"if":1,"in":1,"instanceof":1,"return":1,"typeof":1,"void":1}[c],o=/^require\s*\(\s*(['"]).+?\1\s*\)/.test(b),o?(c=/^require\s*\(\s*['"]/.exec(b)[0],k+=c.length-2):k+=/^[\w$]+(?:\s*\.\s*[\w$]+)*/.exec(b)[0].length-1}function i(){return/\d/.test(l)||"."==l&&/\d/.test(a.charAt(k))}function j(){var b=a.slice(k-1),c;c="."==l?/^\.\d+(?:E[+-]?\d*)?\s*/i.exec(b)[0]:/^0x[\da-f]*/i.test(b)?/^0x[\da-f]*\s*/i.exec(b)[0]:/^\d+\.?\d*(?:E[+-]?\d*)?\s*/i.exec(b)[0],k+=c.length-1,n=0}if(-1==a.indexOf("require"))return[];for(var k=0,l,m=a.length,n=1,o=0,p=0,q=[],r=[];m>k;)b(),c()||(d()?(e(),n=1):"/"==l?(b(),"/"==l?(k=a.indexOf("\n",k),-1==k&&(k=a.length)):"*"==l?(k=a.indexOf("*/",k),-1==k?k=m:k+=2):n?(f(),n=0):(k--,n=1)):g()?h():i()?j():"("==l?(q.push(p),n=1):")"==l?n=q.pop():(n="]"!=l,o=0));return r}function t(a,b){this.uri=a,this.dependencies=b||[],this.deps={},this.status=0,this._entry=[]}if(!a.seajs){var u=a.seajs={version:"3.0.0"},v=u.data={},w=c("Object"),x=c("String"),y=Array.isArray||c("Array"),z=c("Function"),A=0,B=v.events={};u.on=function(a,b){var c=B[a]||(B[a]=[]);return c.push(b),u},u.off=function(a,b){if(!a&&!b)return B=v.events={},u;var c=B[a];if(c)if(b)for(var d=c.length-1;d>=0;d--)c[d]===b&&c.splice(d,1);else delete B[a];return u};var C=u.emit=function(a,b){var c=B[a];if(c){c=c.slice();for(var d=0,e=c.length;e>d;d++)c[d](b)}return u},D=/[^?#]*\//,E=/\/\.\//g,F=/\/[^/]+\/\.\.\//,G=/([^:/])\/+\//g,H=/^([^/:]+)(\/.+)$/,I=/{([^{]+)}/g,J=/^\/\/.|:\//,K=/^.*?\/\/.*?\//;u.resolve=m;var L="undefined"==typeof window&&"undefined"!=typeof importScripts&&z(importScripts),M=/^(about|blob):/,N,O,P=!location.href||M.test(location.href)?"":e(location.href);if(L){var Q;try{var R=Error();throw R}catch(S){Q=S.stack.split("\n")}Q.shift();for(var T,U=/.*?((?:http|https|file)(?::\/{2}[\w]+)(?:[\/|\.]?)(?:[^\s"]*)).*?/i,V=/(.*?):\d+:\d+\)?$/;Q.length>0;){var W=Q.shift();if(T=U.exec(W),null!=T)break}var X;if(null!=T)var X=V.exec(T[1])[1];O=X,N=e(X||P),""===P&&(P=N)}else{var Y=document,Z=Y.scripts,$=Y.getElementById("seajsnode")||Z[Z.length-1];O=n($),N=e(O||P)}if(L)u.request=o;else{var Y=document,_=Y.head||Y.getElementsByTagName("head")[0]||Y.documentElement,ab=_.getElementsByTagName("base")[0],bb;u.request=p}var cb,db=u.cache={},eb,fb={},gb={},hb={},ib=t.STATUS={FETCHING:1,SAVED:2,LOADING:3,LOADED:4,EXECUTING:5,EXECUTED:6,ERROR:7};t.prototype.resolve=function(){for(var a=this,b=a.dependencies,c=[],d=0,e=b.length;e>d;d++)c[d]=t.resolve(b[d],a.uri);return c},t.prototype.pass=function(){for(var a=this,b=a.dependencies.length,c=0;cf;f++){var g=a.deps[a.dependencies[f]];g.status0&&(d.remain+=e-1,a._entry.shift(),c--)}},t.prototype.load=function(){var a=this;if(!(a.status>=ib.LOADING)){a.status=ib.LOADING;var c=a.resolve();C("load",c);for(var d=0,e=c.length;e>d;d++)a.deps[a.dependencies[d]]=t.get(c[d]);if(a.pass(),a._entry.length)return a.onload(),b;var f={},g;for(d=0;e>d;d++)g=db[c[d]],g.statusb;b++){var d=a._entry[b];0===--d.remain&&d.callback()}delete a._entry},t.prototype.error=function(){var a=this;a.onload(),a.status=ib.ERROR},t.prototype.exec=function(){function a(b){var d=c.deps[b]||t.get(a.resolve(b));if(d.status==ib.ERROR)throw Error("module was broken: "+d.uri);return d.exec()}var c=this;if(c.status>=ib.EXECUTING)return c.exports;if(c.status=ib.EXECUTING,c._entry&&!c._entry.length&&delete c._entry,!c.hasOwnProperty("factory"))return c.non=!0,b;var e=c.uri;a.resolve=function(a){return t.resolve(a,e)},a.async=function(b,c){return t.use(b,c,e+"_async_"+d()),a};var f=c.factory,g=z(f)?f(a,c.exports={},c):f;return g===b&&(g=c.exports),delete c.factory,c.exports=g,c.status=ib.EXECUTED,C("exec",c),c.exports},t.prototype.fetch=function(a){function c(){u.request(g.requestUri,g.onRequest,g.charset)}function d(a){delete fb[h],gb[h]=!0,eb&&(t.save(f,eb),eb=null);var b,c=hb[h];for(delete hb[h];b=c.shift();)a===!0?b.error():b.load()}var e=this,f=e.uri;e.status=ib.FETCHING;var g={uri:f};C("fetch",g);var h=g.requestUri||f;return!h||gb.hasOwnProperty(h)?(e.load(),b):fb.hasOwnProperty(h)?(hb[h].push(e),b):(fb[h]=!0,hb[h]=[e],C("request",g={uri:f,requestUri:h,onRequest:d,charset:z(v.charset)?v.charset(h)||"utf-8":v.charset}),g.requested||(a?a[g.requestUri]=c:c()),b)},t.resolve=function(a,b){var c={id:a,refUri:b};return C("resolve",c),c.uri||u.resolve(c.id,b)},t.define=function(a,c,d){var e=arguments.length;1===e?(d=a,a=b):2===e&&(d=c,y(a)?(c=a,a=b):c=b),!y(c)&&z(d)&&(c=b===s?[]:s(""+d));var f={id:a,uri:t.resolve(a),deps:c,factory:d};if(!L&&!f.uri&&Y.attachEvent&&b!==r){var g=r();g&&(f.uri=g.src)}C("define",f),f.uri?t.save(f.uri,f):eb=f},t.save=function(a,b){var c=t.get(a);c.statusf;f++)b[f]=db[d[f]].exec();c&&c.apply(a,b),delete e.callback,delete e.history,delete e.remain,delete e._entry},e.load()},u.use=function(a,b){return t.use(a,b,v.cwd+"_use_"+d()),u},t.define.cmd={},a.define=t.define,u.Module=t,v.fetchedList=gb,v.cid=d,u.require=function(a){var b=t.get(t.resolve(a));return b.status 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Camera360年会抽奖 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 |
四等奖
30 |
    31 |
    • 32 |
    • 33 |
    • 34 |
    • 35 |
    • 36 |
37 |
    38 |
    • 39 |
    • 40 |
    • 41 |
    • 42 |
    • 43 |
44 |
45 | 46 | 47 | 48 |
49 |
50 |
51 | 52 | 53 |

三等奖

54 |
    55 |
    • 56 |
    • 57 |
    • 58 |
    • 59 |
    • 60 |
61 |
    62 |
    • 63 |
    • 64 |
    • 65 |
    • 66 |
    • 67 |
68 |
69 | 70 | 71 | 72 |
73 |
74 |
75 | 76 | 77 |

二等奖

78 |
    79 |
    • 80 |
    • 81 |
    • 82 |
    • 83 |
    • 84 |
85 |
    86 |
    • 87 |
    • 88 |
    • 89 |
    • 90 |
    • 91 |
92 |
93 | 94 | 95 | 96 |
97 |
98 |
99 | 100 |

一等奖

101 |
    102 |
    • 103 |
    • 104 |
105 |
106 | 107 | 108 | 109 |
110 |
111 |
112 |

补抽

113 | 114 |
    115 |
    • 116 |
117 |
118 | 119 | 120 |
121 |
122 |
123 | 124 | 125 | 126 | 127 | 133 | 134 | -------------------------------------------------------------------------------- /AnnualMeeting/js/baseFunc.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module) { 2 | var a = { 3 | 4 | init: function($page) { 5 | 6 | //-------------------全局参数初始化---------------------- 7 | 8 | this.prevCurrent = 0; //前一次页码（用于记录补抽页跳转） 9 | 10 | this.current = 0; //当前页码 11 | 12 | this.intervalObj = null; 13 | 14 | this.intervalDuration = 10; 15 | 16 | this.sliceArr = null; //随机拆分的名单列表 17 | 18 | this.$page = $page; //page集合 19 | 20 | this.nameList = require('nameList'); //名单列表 21 | 22 | this.isAnimating = false; 23 | 24 | this.isRunning = false; 25 | 26 | this.recordObj = { 27 | 1: [], 28 | 2: [], 29 | 3: [], 30 | 4: [] 31 | }; 32 | 33 | //------------------------------------------------------ 34 | 35 | this.$page.each(function(index, item) { 36 | $(item).data('originalClassList', $(item).attr('class')); 37 | }); 38 | this.$page.eq(0).addClass('page-current'); 39 | 40 | this.screenWidth = document.body.clientWidth; 41 | this.itemWidth = Math.ceil(this.screenWidth * 0.1); 42 | this.itemHeight = Math.ceil(this.itemWidth * (3/2)); 43 | 44 | $('.box-list').find('li').css({ 45 | width: this.itemWidth, 46 | height: this.itemHeight 47 | }); 48 | 49 | this.$page.eq(4).find('li').css({ 50 | width: this.itemWidth * 2, 51 | height: this.itemHeight * 2 52 | }); 53 | 54 | this.$page.eq(5).find('li').css({ 55 | width: this.itemWidth * 2, 56 | height: this.itemHeight * 2 57 | }); 58 | }, 59 | 60 | _turnPage: function(current, style, type) { 61 | 62 | var $page = this.$page, 63 | pageCount = $page.length, 64 | animationInName = '', 65 | animationOutName = '', 66 | animationEventNames = { 67 | 'WebkitAnimation' : 'webkitAnimationEnd', 68 | 'OAnimation' : 'oAnimationEnd', 69 | 'msAnimation' : 'MSAnimationEnd', 70 | 'animation' : 'animationend' 71 | }, 72 | animationEventName = animationEventNames[Modernizr.prefixed('animation')], 73 | _this = this; 74 | 75 | // console.log(animationEventName); 76 | 77 | switch(style) { 78 | case 'cubeLeft': 79 | animationOutName = 'page-rotateCubeLeftOut page-ontop'; 80 | animationInName = 'page-rotateCubeLeftIn'; 81 | break; 82 | case 'cubeRight': 83 | animationOutName = 'page-rotateCubeRightOut page-ontop'; 84 | animationInName = 'page-rotateCubeRightIn'; 85 | break; 86 | case 'cubeTop': 87 | animationOutName = 'page-rotateCubeTopOut page-ontop'; 88 | animationInName = 'page-rotateCubeTopIn'; 89 | break; 90 | case 'cubeBottom': 91 | animationOutName = 'page-rotateCubeBottomOut page-ontop'; 92 | animationInName = 'page-rotateCubeBottomIn'; 93 | } 94 | 95 | var $outPage = $page.eq(current); 96 | 97 | if (type == 1) { //下一页 98 | if (current < pageCount) { 99 | current ++; 100 | } else { 101 | current = 0; 102 | } 103 | } else if (type == 0) { //上一页 104 | if (current > 1) { 105 | current --; 106 | } else { 107 | current = 4; 108 | } 109 | } else if (type == 3) { //前去补抽 110 | this.prevCurrent = current; 111 | current = 5; 112 | } else if (type == 2) { //补抽完成 113 | current = this.prevCurrent; 114 | } 115 | 116 | var $inPage = $page.eq(current); 117 | $inPage.addClass('page-current'); 118 | 119 | this._initPageData(current); 120 | 121 | $outPage.find('.photo-cover').removeClass('hide'); 122 | $outPage.find('.name').addClass('name-animate'); 123 | 124 | $outPage.addClass(animationOutName).on(animationEventName, function() { 125 | $outPage.off(animationEventName).attr('class', $outPage.data('originalClassList')); 126 | }); 127 | 128 | $inPage.addClass(animationInName).on(animationEventName, function() { 129 | $('.logo-box').hide(); 130 | $inPage.off(animationEventName).attr('class', $inPage.data('originalClassList') + ' page-current'); 131 | _this.isAnimating = false; 132 | _this.current = current; 133 | }); 134 | }, 135 | 136 | nextPage: function() { 137 | 138 | var _this = a; 139 | 140 | if (_this.isAnimating) { //正在切换页面 141 | return; 142 | }; 143 | 144 | if (_this.isRunning) { //正在抽奖 145 | return; 146 | }; 147 | 148 | _this.isAnimating = true; 149 | 150 | var current = _this.current, 151 | type = $(this).attr('data-turnType'), //0:前一页 1:后一页 2:退出补抽页 3:前往补抽页 152 | animatName = ''; 153 | 154 | console.log(current); 155 | switch(Math.floor(current)) { 156 | case 0: 157 | animatName = 'cubeTop'; 158 | break; 159 | case 1: 160 | animatName = 'cubeLeft'; 161 | break; 162 | case 2: 163 | if (type == 1) { 164 | animatName = 'cubeLeft'; 165 | } else { 166 | animatName = 'cubeRight'; 167 | } 168 | break; 169 | case 3: 170 | if (type == 1) { 171 | animatName = 'cubeBottom'; 172 | } else { 173 | animatName = 'cubeRight'; 174 | } 175 | break; 176 | case 4: 177 | animatName = 'cubeTop'; 178 | break; 179 | } 180 | 181 | if (type == 2) { 182 | animatName = 'cubeBottom'; 183 | } else if (type == 3) { 184 | animatName = 'cubeTop'; 185 | } 186 | 187 | if (animatName) { 188 | _this._turnPage(current, animatName, type); 189 | } 190 | }, 191 | 192 | _initPageData: function(current) { 193 | var Person = require('object'), 194 | itemWidth = this.itemWidth, 195 | itemHeight = this.itemHeight, 196 | _this = this; 197 | 198 | if (current == 4) { //一等奖领奖页 199 | this.sliceArr = this._sliceList(2); 200 | itemWidth *= 2; 201 | itemHeight *= 2; 202 | } else if (current == 5) { //补抽页 203 | this.sliceArr = this._sliceList(1); 204 | itemWidth *= 2; 205 | itemHeight *= 2; 206 | } else { //其他页 207 | this.sliceArr = this._sliceList(10); 208 | } 209 | 210 | this.objArr = []; 211 | 212 | $.each(this.sliceArr, function(index, item) { 213 | var obj = new Person(item, _this.$page.eq(current).find('.photo-list').eq(index), itemWidth, itemHeight, _this.intervalDuration); 214 | obj.createList(); 215 | _this.objArr.push(obj); 216 | }); 217 | }, 218 | 219 | _sliceList: function(num) { 220 | 221 | if (this.sliceArr) { //是否分割过名单列表 222 | this._joinList(); 223 | } 224 | 225 | var nameList = this.nameList, 226 | dataLength = nameList.length, 227 | range = Math.round(dataLength / num), 228 | slicePosition = 0, 229 | sliceArr = []; 230 | 231 | console.log(this.nameList.length); 232 | 233 | //打乱数组 234 | nameList.sort(function() {return 0.5 - Math.random()}); 235 | 236 | for (var i = 0; i < num; i ++) { 237 | var arr = null; 238 | if (i !== (num - 1)) { 239 | arr = nameList.slice(slicePosition, slicePosition + range); 240 | } else { 241 | arr = nameList.slice(slicePosition); 242 | } 243 | slicePosition += range; 244 | sliceArr.push(arr); 245 | } 246 | return sliceArr; 247 | }, 248 | 249 | start: function() { 250 | var _this = a; 251 | 252 | if (_this.isRunning) { 253 | return; 254 | } 255 | 256 | _this.$page.eq(_this.current).find('.photo-cover').addClass('hide'); 257 | 258 | _this.isRunning = true; 259 | 260 | console.log(_this.sliceArr); 261 | 262 | _this.intervalObj = window.setInterval(function() { 263 | $.each(_this.objArr, function(index, item) { 264 | item.createCircle(); 265 | }); 266 | },_this.intervalDuration); 267 | }, 268 | 269 | stop: function() { 270 | var _this = a; 271 | 272 | if (!_this.isRunning) { 273 | return; 274 | } 275 | 276 | window.clearInterval(_this.intervalObj); 277 | window.setTimeout(function() { 278 | _this.$page.eq(_this.current).find('.photo-list').each(function(index) { 279 | var checked = $(this).find('.photo-item').first(); 280 | _this._removePerson(index, checked.attr('data-name')); 281 | //显示名字 282 | checked.find('.name').removeClass('name-animate'); 283 | _this.isRunning = false; 284 | }); 285 | console.log(_this.recordObj); 286 | }, 500); 287 | }, 288 | 289 | _removePerson: function(index, name) { 290 | this.objArr[index].endFlag = true; 291 | var deleteIndex = -1; 292 | $.each(this.sliceArr[index], function(index0, item) { 293 | if (item.name == name) { 294 | deleteIndex = index0; 295 | return; 296 | } 297 | }); 298 | this.sliceArr[index].splice(deleteIndex, 1); 299 | this._recordPerson(name); 300 | }, 301 | 302 | _joinList: function() { 303 | var arr = []; 304 | $.each(this.sliceArr, function(index, item) { 305 | arr = arr.concat(item); 306 | }); 307 | this.nameList = arr; 308 | }, 309 | 310 | _recordPerson: function(name) { 311 | // console.log(this.current, name); 312 | 313 | var current = this.current == 5 ? this.prevCurrent : this.current; 314 | 315 | this.recordObj[current].push(name); 316 | window.localStorage.setItem('recordObj',JSON.stringify(this.recordObj)); 317 | }, 318 | 319 | _checkPersonRepeat: function() { 320 | var record = this.recordObj, 321 | arr = []; 322 | for (var o in record) { 323 | $.each(record[o], function(index, item) { 324 | arr.push(item); 325 | }); 326 | } 327 | $.each(arr, function(index, item) { 328 | 329 | }); 330 | } 331 | }; 332 | 333 | module.exports = a; 334 | }) -------------------------------------------------------------------------------- /AnnualMeeting/js/index.js: -------------------------------------------------------------------------------- 1 | // author by pinguo-xieyuxiao 2016.1.28 2 | $(function() { 3 | define(function(require, exports, module) { 4 | var c360 = require('baseFunc'); 5 | 6 | c360.init($('.page')); 7 | 8 | $('.btn-turn').on('click', c360.nextPage); 9 | 10 | $('.btn-start').on('click', c360.start); 11 | 12 | $('.btn-stop').on('click', c360.stop); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /AnnualMeeting/js/nameList.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module) { 2 | var nameList = [ 3 | {name: '', photo: ''} 4 | ]; 5 | module.exports = nameList; 6 | }) 7 | -------------------------------------------------------------------------------- /AnnualMeeting/js/object.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module) { 2 | 3 | function Person(list, container, width, height, duration) { 4 | this.list = list; 5 | this.$container = container; 6 | this.photoWidth = width; 7 | this.photoHeight = height; 8 | this.duration = duration; 9 | this.endFlag = false; 10 | } 11 | 12 | Person.prototype = { 13 | createList: function() { 14 | var templ = '', 15 | _this = this; 16 | $.each(this.list, function(index, item) { 17 | templ += '
' + 18 | '

'+item.name+'

'+ 19 | '
'; 20 | }); 21 | this.$container.html(templ); 22 | }, 23 | 24 | createCircle: function() { 25 | var _this = this; 26 | this.$container.animate({top: '-'+this.photoHeight}, this.duration, 'linear', function() { 27 | var firstNode = $(this).find('.photo-item').first(); 28 | if (!_this.endFlag) { 29 | var cloneNode = firstNode.clone(); 30 | $(this).append(cloneNode).css('top','0'); 31 | firstNode.remove(); 32 | } else { 33 | $(this).css('top','0'); 34 | firstNode.remove(); 35 | _this.endFlag = false; 36 | } 37 | }); 38 | } 39 | }; 40 | module.exports = Person; 41 | }) -------------------------------------------------------------------------------- /AnnualMeeting/resource/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/.DS_Store -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/.DS_Store -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/award.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/award.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/begin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/begin.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/bg.jpg -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/bg1.jpg -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/cover.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/logo.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/noise.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/photo.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/photo.rar -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/round.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/title.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/挑战.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 挑战

获得30美金 + 20C币奖励

展示你手中“最摄影”的作品

4 | 描述 5 |

6 |

7 | 你的好作品是否还安静的躺在手机中，如果是这样，请将它发布给Camera360，让全球的用户来为你打分，另有现金大奖等你来拿，行动起来吧！大家可能更喜欢用手机拍摄出的作品哦！ 8 |

9 |

10 | 范例 11 |

12 |

13 | 14 |

15 |

16 |

17 |

18 | 奖励 19 |

20 |

21 | 22 |

23 |

24 | 1、挑战前十名将获得30美金奖励 25 |

26 |

27 | 2、参与挑战即可赢取20C币奖励 28 |

29 |

30 | 3、获得排名赢取更多C币奖励（C币奖励规则） 31 |

32 |

33 | 一等奖：前10% 获得100C币 34 |

35 |

36 | 二等奖：10%-30% 获得60C币 37 |

38 |

39 | 三等奖：30%-60% 获得30C币 40 |

41 |

42 | Ps. C币商城即将上线，可兑换丰富奖品，敬请期待 43 |

44 |

45 | 46 |

47 |

48 | 备注 49 |

50 |

51 | 举办方：Camera360
52 | 53 |

54 |

55 | * 本次活动与苹果公司及其子公司无关，相关内容请查阅“ 授权许可协议 ”和“ Camera360用户协议 ”。 56 |

57 |

58 | 59 |

排名

1
2
3
4
5
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Camera360

拍照挑战，等你来战

前往挑战
-------------------------------------------------------------------------------- /AnnualMeeting/resource/images/挑战_files/picNum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/挑战_files/picNum.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/挑战_files/tiaozhanshai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/挑战_files/tiaozhanshai.jpg -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/挑战_files/timeLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/挑战_files/timeLine.png -------------------------------------------------------------------------------- /AnnualMeeting/resource/images/挑战_files/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/AnnualMeeting/resource/images/挑战_files/video.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## DEMO 2 | * [3DTransform](https://darylxyx.github.io/Demo/3DTransform/) 3 | * [blur](https://darylxyx.github.io/Demo/blur/) 4 | * [filter](https://darylxyx.github.io/Demo/filter/) 5 | * [panorama](https://darylxyx.github.io/Demo/panorama/) 6 | * [fragment](https://darylxyx.github.io/Demo/fragment/) 7 | -------------------------------------------------------------------------------- /base.css: -------------------------------------------------------------------------------- 1 | html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | ul, ol { 7 | list-style-type: none; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | } 13 | 14 | hr { 15 | border: none; 16 | outline: none; 17 | } 18 | 19 | .l { 20 | float: left; 21 | } 22 | 23 | .r { 24 | float: right; 25 | } 26 | 27 | .bg-img { 28 | background-position: center; 29 | background-repeat: no-repeat; 30 | background-size: cover; 31 | } 32 | 33 | .ic-img { 34 | background-position: center; 35 | background-repeat: no-repeat; 36 | background-size: contain; 37 | } 38 | 39 | .f-13 { 40 | font-size: 13px; 41 | } 42 | 43 | .f-14 { 44 | font-size: 14px; 45 | } 46 | 47 | .f-15 { 48 | font-size: 15px; 49 | } 50 | 51 | .f-16 { 52 | font-size: 16px; 53 | } 54 | 55 | .f-18 { 56 | font-size: 18px; 57 | } 58 | 59 | .f-20 { 60 | font-size: 20px; 61 | } 62 | 63 | .f-bold { 64 | font-weight: bold; 65 | } 66 | 67 | .f-bolder { 68 | font-weight: bolder; 69 | } 70 | 71 | .c-white { 72 | color: #fff; 73 | } 74 | 75 | .c-black { 76 | color: #000; 77 | } 78 | 79 | .c-cc { 80 | color: #ccc; 81 | } 82 | 83 | .c-c9 { 84 | color: #c9c9c9; 85 | } 86 | 87 | .lh-100 { 88 | line-height: 100%; 89 | } 90 | 91 | .lh-130 { 92 | line-height: 130%; 93 | } 94 | 95 | .lh-140 { 96 | line-height: 140%; 97 | } 98 | 99 | .lh-150 { 100 | line-height: 150%; 101 | } 102 | 103 | .lh-170 { 104 | line-height: 170%; 105 | } 106 | 107 | .lh-200 { 108 | line-height: 200%; 109 | } 110 | 111 | .inline { 112 | display: inline; 113 | } 114 | 115 | .block { 116 | display: block; 117 | } 118 | 119 | .inline-block { 120 | display: inline-block; 121 | } 122 | 123 | .border-box { 124 | -webkit-box-sizing: border-box; 125 | -moz-box-sizing: border-box; 126 | box-sizing: border-box; 127 | } 128 | 129 | .clear { 130 | clear: both; 131 | } 132 | 133 | .overflow { 134 | overflow: hidden; 135 | } 136 | 137 | .text-left { 138 | text-align: left; 139 | } 140 | 141 | .text-center { 142 | text-align: center; 143 | } 144 | 145 | .text-right { 146 | text-align: right; 147 | } 148 | 149 | .text-overflow { 150 | white-space: nowrap; 151 | overflow: hidden; 152 | text-overflow: ellipsis; 153 | } 154 | 155 | .text-indent { 156 | text-indent: 2em; 157 | } 158 | 159 | .text-wrap { 160 | word-wrap: break-word; 161 | word-break: normal; 162 | } 163 | 164 | .absolute { 165 | position: absolute; 166 | } 167 | 168 | .relative { 169 | position: relative; 170 | } 171 | 172 | .fixed { 173 | position: fixed; 174 | } 175 | 176 | .cusor { 177 | cursor: pointer; 178 | } 179 | 180 | .hidden { 181 | display: none; 182 | } 183 | 184 | .opacity { 185 | opacity: 0; 186 | } 187 | -------------------------------------------------------------------------------- /blur/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/blur/.DS_Store -------------------------------------------------------------------------------- /blur/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | WARFRAME 9 | 10 | 11 | 12 |
13 |
14 |

WARFRAME

15 |

The Grineer, with their endless clone armies, have plunged the system into chaos. There is only one force that can match them, you. 16 | You are Tenno, an ancient warrior, a master of gun and blade. You wield the mighty Warframes and command their awesome powers. Forge your weapons. Gather like-minded Tenno and take the fight back to the Grineer. The Origin System needs you once again. Are you ready?

17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /blur/resource/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/blur/resource/.DS_Store -------------------------------------------------------------------------------- /blur/resource/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/blur/resource/images/.DS_Store -------------------------------------------------------------------------------- /blur/resource/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/blur/resource/images/bg1.jpg -------------------------------------------------------------------------------- /blur/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body { 7 | font-size: 19px; 8 | font-family: 'Verdana','Arial'; 9 | color: rgba(0,0,0,0.8); 10 | } 11 | 12 | .container { 13 | width: 100%; 14 | height: 100%; 15 | position: relative; 16 | background-image: url(./resource/images/bg1.jpg); 17 | background-position: center top; 18 | background-size: cover; 19 | } 20 | 21 | .content { 22 | width: 800px; 23 | height: 400px; 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | margin-top: -200px; 28 | margin-left: -400px; 29 | border-radius: 8px; 30 | box-shadow: 0 10px 20px rgba(0,0,0,0.5); 31 | overflow: hidden; 32 | z-index: 2; 33 | padding: 50px; 34 | box-sizing: border-box; 35 | } 36 | 37 | .content::before { 38 | content: ''; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | right: 0; 43 | bottom: 0; 44 | -webkit-filter: blur(20px); 45 | -moz-filter: blur(20px); 46 | -ms-filter: blur(20px); 47 | -o-filter: blur(20px); 48 | filter: blur(20px); 49 | z-index: -3; 50 | margin: -30px; 51 | background-image: url(./resource/images/bg1.jpg); 52 | background-position: center top; 53 | background-size: cover; 54 | background-attachment: fixed; 55 | } 56 | 57 | .content h1 { 58 | text-align: center; 59 | margin-bottom: 20px; 60 | } 61 | 62 | .content p { 63 | text-indent: 2em; 64 | line-height: 1.7; 65 | } 66 | -------------------------------------------------------------------------------- /filter/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/.DS_Store -------------------------------------------------------------------------------- /filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | OVERWATCH 9 | 10 | 11 | 12 |
13 |
    14 |
    • 15 |
    • 16 |
    • 17 |
    • 18 |
    • 19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /filter/resource/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/.DS_Store -------------------------------------------------------------------------------- /filter/resource/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/.DS_Store -------------------------------------------------------------------------------- /filter/resource/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/1.jpg -------------------------------------------------------------------------------- /filter/resource/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/10.jpg -------------------------------------------------------------------------------- /filter/resource/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/2.jpg -------------------------------------------------------------------------------- /filter/resource/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/3.jpg -------------------------------------------------------------------------------- /filter/resource/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/4.jpg -------------------------------------------------------------------------------- /filter/resource/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/7.jpg -------------------------------------------------------------------------------- /filter/resource/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/filter/resource/images/bg.jpg -------------------------------------------------------------------------------- /filter/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, ul, li { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body { 7 | text-align: center; 8 | background-color: #f7f7f7; 9 | } 10 | 11 | ul, ol, li { 12 | list-style-type: none; 13 | } 14 | 15 | .bg { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | z-index: 1; 22 | background: url(./resource/images/bg.jpg) center / cover; 23 | -webkit-filter: blur(5px); 24 | -moz-filter: blur(5px); 25 | -ms-filter: blur(5px); 26 | -o-filter: blur(5px); 27 | filter: blur(5px); 28 | } 29 | 30 | .container { 31 | width: 100%; 32 | height: 100%; 33 | position: relative; 34 | z-index: 2; 35 | } 36 | 37 | .container ul { 38 | /*width: 100%;*/ 39 | padding-top: 10%; 40 | display: inline-block; 41 | } 42 | 43 | .container li { 44 | width: 15vw; 45 | margin: 20px; 46 | float: left; 47 | } 48 | 49 | .card { 50 | width: 100%; 51 | padding-bottom: 150%; 52 | /*height: 100%;*/ 53 | background-size: cover; 54 | background-position: center top; 55 | border-radius: 8px; 56 | box-shadow: 0 0 20px rgba(255,255,255,0.4); 57 | -webkit-transition: all ease-out 0.5s; 58 | -moz-transition: all ease-out 0.5s; 59 | -ms-transition: all ease-out 0.5s; 60 | -o-transition: all ease-out 0.5s; 61 | transition: all ease-out 0.5s; 62 | -webkit-filter: sepia(1) saturate(0.5); 63 | -moz-filter: sepia(1) saturate(0.5); 64 | -ms-filter: sepia(1) saturate(0.5); 65 | -o-filter: sepia(1) saturate(0.5); 66 | filter: sepia(1) saturate(0.5); 67 | -webkit-backface-visibility: visible; 68 | -moz-backface-visibility: visible; 69 | -ms-backface-visibility: visible; 70 | backface-visibility: visible; 71 | } 72 | 73 | .container li:hover .card { 74 | -webkit-filter: none; 75 | -moz-filter: none; 76 | -ms-filter: none; 77 | -o-filter: none; 78 | filter: none; 79 | -webkit-transform-origin: center 60%; 80 | -moz-transform-origin: center 60%; 81 | -ms-transform-origin: center 60%; 82 | -o-transform-origin: center 60%; 83 | transform-origin: center 60%; 84 | -webkit-transform: scale(1.2) rotateY(180deg); 85 | -moz-transform: scale(1.2) rotateY(180deg); 86 | -ms-transform: scale(1.2) rotateY(180deg); 87 | -o-transform: scale(1.2) rotateY(180deg); 88 | transform: scale(1.2) rotateY(180deg); 89 | } 90 | -------------------------------------------------------------------------------- /fragment/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/.DS_Store -------------------------------------------------------------------------------- /fragment/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/.DS_Store -------------------------------------------------------------------------------- /fragment/images/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/a.jpg -------------------------------------------------------------------------------- /fragment/images/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/b.jpg -------------------------------------------------------------------------------- /fragment/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/bg.jpg -------------------------------------------------------------------------------- /fragment/images/c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/c.jpg -------------------------------------------------------------------------------- /fragment/images/d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/d.jpg -------------------------------------------------------------------------------- /fragment/images/e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/fragment/images/e.jpg -------------------------------------------------------------------------------- /fragment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | FINAL FANTASY XII THE ZODIAC AGE 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 您的浏览器不支持CANVAS 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /fragment/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | function SubType() { 4 | var doc = document; 5 | this.cvs = doc.querySelector('#myCanvas'); 6 | this.ctx = this.cvs.getContext('2d'); 7 | this.imgList = doc.querySelectorAll('.img'); 8 | this.imgIndex = 0; 9 | this.isAnimating = false; 10 | this.autoPlayObj = null; 11 | 12 | this.imgW = 1920; //图片原始宽/高 13 | this.imgH = 1080; 14 | 15 | this.conW = 800; //画布宽/高 16 | this.conH = 450; 17 | 18 | this.dw = 25; //画布单元宽/高 19 | this.dh = 25; 20 | 21 | this.I = this.conH / this.dh; //单元行/列数 22 | this.J = this.conW / this.dw; 23 | 24 | this.DW = this.imgW / this.J; //原图单元宽/高 25 | this.DH = this.imgH / this.I; 26 | 27 | this.randomPoint = [{ 28 | x: 0, 29 | y: 0 30 | }, { 31 | x: this.I - 1, 32 | y: 0 33 | }, { 34 | x: 0, 35 | y: this.J - 1 36 | }, { 37 | x: this.I - 1, 38 | y: this.J - 1 39 | }, { 40 | x: 0, 41 | y: Math.ceil(this.J / 2) 42 | }, { 43 | x: this.I - 1, 44 | y: Math.ceil(this.J / 2) 45 | }, { 46 | x: Math.ceil(this.I / 2), 47 | y: 0 48 | }, { 49 | x: Math.ceil(this.I / 2), 50 | y: this.J - 1 51 | }] 52 | } 53 | 54 | SubType.prototype = { 55 | init() { 56 | 57 | this.ctx.beginPath(); 58 | 59 | for (var i = 0; i < this.I; i ++) { 60 | for (var j = 0; j < this.J; j ++) { 61 | this.handleDraw(this.imgList[this.imgIndex], i, j); 62 | } 63 | } 64 | 65 | this.ctx.closePath(); 66 | this.ctx.stroke(); 67 | 68 | this.autoPlay(); 69 | }, 70 | 71 | start(i, j, callback) { 72 | 73 | if (this.isAnimating) return; 74 | 75 | this.isAnimating = true; 76 | 77 | this.imgIndex ++; 78 | 79 | if (this.imgIndex > (this.imgList.length - 1)) this.imgIndex = 0; 80 | 81 | var _this = this, 82 | dst = 0, 83 | intervalObj = setInterval(function() { 84 | var resArr = _this.countAround(i, j, dst); 85 | 86 | resArr.forEach(function(item, index) { 87 | _this.handleClear(item.x, item.y); 88 | _this.handleDraw(_this.imgList[_this.imgIndex], item.x, item.y); 89 | }); 90 | 91 | if (!resArr.length) { 92 | clearInterval(intervalObj); 93 | _this.isAnimating = false; 94 | return callback && callback(); 95 | } 96 | dst ++; 97 | }, 20); 98 | }, 99 | 100 | handleClick(e) { 101 | 102 | var offsetX = e.offsetX, 103 | offsetY = e.offsetY, 104 | j = Math.floor(offsetX / this.dw), 105 | i = Math.floor(offsetY / this.dh), 106 | _this = this; 107 | 108 | clearInterval(this.autoPlayObj); 109 | 110 | this.start(i, j, function() { 111 | _this.autoPlay(); 112 | }); 113 | }, 114 | 115 | autoPlay() { 116 | var _this = this; 117 | this.autoPlayObj = setInterval(function() { 118 | var randomIndex = Math.floor(Math.random()*_this.randomPoint.length), 119 | point = _this.randomPoint[randomIndex]; 120 | // console.log(point); 121 | _this.start(point.x, point.y); 122 | }, 3000); 123 | }, 124 | 125 | handleDraw(img, i, j) { //负责绘制，i: 单元行号；j: 单元列号 126 | this.ctx.drawImage(img, this.DW*j, this.DH*i, this.DW, this.DH, this.dw*j, this.dh*i, this.dw, this.dh); 127 | }, 128 | 129 | handleClear(i, j) { 130 | this.ctx.clearRect(this.dw*j, this.dh*i, this.dw, this.dh); 131 | }, 132 | 133 | countAround(i, j, dst) { 134 | // console.log(i, j); 135 | var resArr = []; 136 | for (var m = (i-dst); m <= (i+dst); m++) { 137 | for (var n = (j-dst); n <= (j+dst); n++) { 138 | if ((Math.abs(m-i) + Math.abs(n-j) == dst) && (m >=0 && n >= 0) && (m <= (this.I-1) && n <= (this.J-1))) { 139 | resArr.push({x: m, y: n}); 140 | } 141 | } 142 | } 143 | // console.log(resArr); 144 | return resArr; 145 | } 146 | }; 147 | 148 | var app = new SubType(); 149 | 150 | app.init(); 151 | 152 | app.cvs.onclick = function(e) { 153 | app.handleClick(e); 154 | } 155 | }; -------------------------------------------------------------------------------- /fragment/npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 3 | 2 info using npm@3.10.10 4 | 3 info using node@v6.9.5 5 | 4 verbose stack Error: ENOENT: no such file or directory, open '/Users/xieyuxiao/Desktop/Self/git/css-collection/fragment/package.json' 6 | 4 verbose stack at Error (native) 7 | 5 verbose cwd /Users/xieyuxiao/Desktop/Self/git/css-collection/fragment 8 | 6 error Darwin 15.5.0 9 | 7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" 10 | 8 error node v6.9.5 11 | 9 error npm v3.10.10 12 | 10 error path /Users/xieyuxiao/Desktop/Self/git/css-collection/fragment/package.json 13 | 11 error code ENOENT 14 | 12 error errno -2 15 | 13 error syscall open 16 | 14 error enoent ENOENT: no such file or directory, open '/Users/xieyuxiao/Desktop/Self/git/css-collection/fragment/package.json' 17 | 15 error enoent ENOENT: no such file or directory, open '/Users/xieyuxiao/Desktop/Self/git/css-collection/fragment/package.json' 18 | 15 error enoent This is most likely not a problem with npm itself 19 | 15 error enoent and is related to npm not being able to find a file. 20 | 16 verbose exit [ -2, true ] 21 | -------------------------------------------------------------------------------- /fragment/style.css: -------------------------------------------------------------------------------- 1 | html, body, div { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container { 7 | width: 100%; 8 | height: 100%; 9 | overflow: hidden; 10 | background-repeat: no-repeat; 11 | background-position: center; 12 | background-image: url(./images/bg.jpg); 13 | -webkit-filter: blur(2px); 14 | -moz-filter: blur(2px); 15 | -ms-filter: blur(2px); 16 | -o-filter: blur(2px); 17 | filter: blur(2px); 18 | } 19 | 20 | .hide { 21 | width: 0; 22 | height: 0; 23 | display: none; 24 | } 25 | 26 | #myCanvas { 27 | position: absolute; 28 | top: 50%; 29 | left: 50%; 30 | margin-left: -400px; 31 | margin-top: -250px; 32 | display: block; 33 | cursor: pointer; 34 | border-radius: 6px; 35 | box-shadow: 0 10px 20px rgba(0,0,0,0.5); 36 | } -------------------------------------------------------------------------------- /panorama/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/panorama/.DS_Store -------------------------------------------------------------------------------- /panorama/download.js: -------------------------------------------------------------------------------- 1 | var http = require("http"), 2 | fs = require("fs"); 3 | var imgPath = 'http://open.youtu.qq.com/content/img/product/face/face_'; 4 | 5 | fs.mkdir('./downloadImg', (err) => { 6 | if (err && err.code != 'EEXIST') return; 7 | downloadImg(); 8 | }); 9 | 10 | function downloadImg() { 11 | for (var i = 0; i < 16; i ++) { 12 | 13 | var index = (function() { 14 | var j = i + 1; 15 | j = j < 10 ? '0'+j : j; 16 | return j; 17 | })(); 18 | 19 | var url = imgPath + index + ".jpg?v=2.0"; 20 | // console.log(url); 21 | ((i) => { 22 | http.get(url, (res) => { 23 | var out = fs.createWriteStream('./downloadImg/face_'+i+'.jpg', { 24 | encoding: 'binary' 25 | }); 26 | 27 | res.on('data', (chunk) => { 28 | out.write(chunk); 29 | }); 30 | 31 | res.on('end', () => { 32 | console.log('Image_'+i+' download complete.'); 33 | out.end(''); 34 | }); 35 | }); 36 | })(i); 37 | } 38 | } -------------------------------------------------------------------------------- /panorama/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 全景Lexus 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /panorama/src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/panorama/src/.DS_Store -------------------------------------------------------------------------------- /panorama/src/hammer.js: -------------------------------------------------------------------------------- 1 | /*! Hammer.JS - v2.0.8 - 2016-04-23 2 | * http://hammerjs.github.io/ 3 | * 4 | * Copyright (c) 2016 Jorik Tangelder; 5 | * Licensed under the MIT license */ 6 | !function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&la(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==oa?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;dc[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g1&&!c.firstMultiple?c.firstMultiple=D(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=E(d);b.timeStamp=ra(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=I(h,i),b.distance=H(h,i),B(c,b),b.offsetDirection=G(b.deltaX,b.deltaY);var j=F(b.deltaTime,b.deltaX,b.deltaY);b.overallVelocityX=j.x,b.overallVelocityY=j.y,b.overallVelocity=qa(j.x)>qa(j.y)?j.x:j.y,b.scale=g?K(g.pointers,d):1,b.rotation=g?J(g.pointers,d):0,b.maxPointers=c.prevInput?b.pointers.length>c.prevInput.maxPointers?b.pointers.length:c.prevInput.maxPointers:b.pointers.length,C(c,b);var k=a.element;o(b.srcEvent.target,k)&&(k=b.srcEvent.target),b.target=k}function B(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};b.eventType!==Ea&&f.eventType!==Ga||(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function C(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Ha&&(i>Da||h.velocity===d)){var j=b.deltaX-h.deltaX,k=b.deltaY-h.deltaY,l=F(i,j,k);e=l.x,f=l.y,c=qa(l.x)>qa(l.y)?l.x:l.y,g=G(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function D(a){for(var b=[],c=0;ce;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:pa(c/b),y:pa(d/b)}}function F(a,b,c){return{x:b/a||0,y:c/a||0}}function G(a,b){return a===b?Ia:qa(a)>=qa(b)?0>a?Ja:Ka:0>b?La:Ma}function H(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function I(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function J(a,b){return I(b[1],b[0],Ra)+I(a[1],a[0],Ra)}function K(a,b){return H(b[0],b[1],Ra)/H(a[0],a[1],Ra)}function L(){this.evEl=Ta,this.evWin=Ua,this.pressed=!1,x.apply(this,arguments)}function M(){this.evEl=Xa,this.evWin=Ya,x.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function N(){this.evTarget=$a,this.evWin=_a,this.started=!1,x.apply(this,arguments)}function O(a,b){var c=s(a.touches),d=s(a.changedTouches);return b&(Ga|Ha)&&(c=t(c.concat(d),"identifier",!0)),[c,d]}function P(){this.evTarget=bb,this.targetIds={},x.apply(this,arguments)}function Q(a,b){var c=s(a.touches),d=this.targetIds;if(b&(Ea|Fa)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=s(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return o(a.target,i)}),b===Ea)for(e=0;e-1&&d.splice(a,1)};setTimeout(e,cb)}}function U(a){for(var b=a.srcEvent.clientX,c=a.srcEvent.clientY,d=0;d=f&&db>=g)return!0}return!1}function V(a,b){this.manager=a,this.set(b)}function W(a){if(p(a,jb))return jb;var b=p(a,kb),c=p(a,lb);return b&&c?jb:b||c?b?kb:lb:p(a,ib)?ib:hb}function X(){if(!fb)return!1;var b={},c=a.CSS&&a.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(d){b[d]=c?a.CSS.supports("touch-action",d):!0}),b}function Y(a){this.options=la({},this.defaults,a||{}),this.id=v(),this.manager=null,this.options.enable=l(this.options.enable,!0),this.state=nb,this.simultaneous={},this.requireFail=[]}function Z(a){return a&sb?"cancel":a&qb?"end":a&pb?"move":a&ob?"start":""}function $(a){return a==Ma?"down":a==La?"up":a==Ja?"left":a==Ka?"right":""}function _(a,b){var c=b.manager;return c?c.get(a):a}function aa(){Y.apply(this,arguments)}function ba(){aa.apply(this,arguments),this.pX=null,this.pY=null}function ca(){aa.apply(this,arguments)}function da(){Y.apply(this,arguments),this._timer=null,this._input=null}function ea(){aa.apply(this,arguments)}function fa(){aa.apply(this,arguments)}function ga(){Y.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function ha(a,b){return b=b||{},b.recognizers=l(b.recognizers,ha.defaults.preset),new ia(a,b)}function ia(a,b){this.options=la({},ha.defaults,b||{}),this.options.inputTarget=this.options.inputTarget||a,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=a,this.input=y(this),this.touchAction=new V(this,this.options.touchAction),ja(this,!0),g(this.options.recognizers,function(a){var b=this.add(new a[0](a[1]));a[2]&&b.recognizeWith(a[2]),a[3]&&b.requireFailure(a[3])},this)}function ja(a,b){var c=a.element;if(c.style){var d;g(a.options.cssProps,function(e,f){d=u(c.style,f),b?(a.oldCssProps[d]=c.style[d],c.style[d]=e):c.style[d]=a.oldCssProps[d]||""}),b||(a.oldCssProps={})}}function ka(a,c){var d=b.createEvent("Event");d.initEvent(a,!0,!0),d.gesture=c,c.target.dispatchEvent(d)}var la,ma=["","webkit","Moz","MS","ms","o"],na=b.createElement("div"),oa="function",pa=Math.round,qa=Math.abs,ra=Date.now;la="function"!=typeof Object.assign?function(a){if(a===d||null===a)throw new TypeError("Cannot convert undefined or null to object");for(var b=Object(a),c=1;ch&&(b.push(a),h=b.length-1):e&(Ga|Ha)&&(c=!0),0>h||(b[h]=a,this.callback(this.manager,e,{pointers:b,changedPointers:[a],pointerType:f,srcEvent:a}),c&&b.splice(h,1))}});var Za={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},$a="touchstart",_a="touchstart touchmove touchend touchcancel";i(N,x,{handler:function(a){var b=Za[a.type];if(b===Ea&&(this.started=!0),this.started){var c=O.call(this,a,b);b&(Ga|Ha)&&c[0].length-c[1].length===0&&(this.started=!1),this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}}});var ab={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},bb="touchstart touchmove touchend touchcancel";i(P,x,{handler:function(a){var b=ab[a.type],c=Q.call(this,a,b);c&&this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}});var cb=2500,db=25;i(R,x,{handler:function(a,b,c){var d=c.pointerType==za,e=c.pointerType==Ba;if(!(e&&c.sourceCapabilities&&c.sourceCapabilities.firesTouchEvents)){if(d)S.call(this,b,c);else if(e&&U.call(this,c))return;this.callback(a,b,c)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var eb=u(na.style,"touchAction"),fb=eb!==d,gb="compute",hb="auto",ib="manipulation",jb="none",kb="pan-x",lb="pan-y",mb=X();V.prototype={set:function(a){a==gb&&(a=this.compute()),fb&&this.manager.element.style&&mb[a]&&(this.manager.element.style[eb]=a),this.actions=a.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var a=[];return g(this.manager.recognizers,function(b){k(b.options.enable,[b])&&(a=a.concat(b.getTouchAction()))}),W(a.join(" "))},preventDefaults:function(a){var b=a.srcEvent,c=a.offsetDirection;if(this.manager.session.prevented)return void b.preventDefault();var d=this.actions,e=p(d,jb)&&!mb[jb],f=p(d,lb)&&!mb[lb],g=p(d,kb)&&!mb[kb];if(e){var h=1===a.pointers.length,i=a.distance<2,j=a.deltaTime<250;if(h&&i&&j)return}return g&&f?void 0:e||f&&c&Na||g&&c&Oa?this.preventSrc(b):void 0},preventSrc:function(a){this.manager.session.prevented=!0,a.preventDefault()}};var nb=1,ob=2,pb=4,qb=8,rb=qb,sb=16,tb=32;Y.prototype={defaults:{},set:function(a){return la(this.options,a),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(a){if(f(a,"recognizeWith",this))return this;var b=this.simultaneous;return a=_(a,this),b[a.id]||(b[a.id]=a,a.recognizeWith(this)),this},dropRecognizeWith:function(a){return f(a,"dropRecognizeWith",this)?this:(a=_(a,this),delete this.simultaneous[a.id],this)},requireFailure:function(a){if(f(a,"requireFailure",this))return this;var b=this.requireFail;return a=_(a,this),-1===r(b,a)&&(b.push(a),a.requireFailure(this)),this},dropRequireFailure:function(a){if(f(a,"dropRequireFailure",this))return this;a=_(a,this);var b=r(this.requireFail,a);return b>-1&&this.requireFail.splice(b,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(a){return!!this.simultaneous[a.id]},emit:function(a){function b(b){c.manager.emit(b,a)}var c=this,d=this.state;qb>d&&b(c.options.event+Z(d)),b(c.options.event),a.additionalEvent&&b(a.additionalEvent),d>=qb&&b(c.options.event+Z(d))},tryEmit:function(a){return this.canEmit()?this.emit(a):void(this.state=tb)},canEmit:function(){for(var a=0;af?Ja:Ka,c=f!=this.pX,d=Math.abs(a.deltaX)):(e=0===g?Ia:0>g?La:Ma,c=g!=this.pY,d=Math.abs(a.deltaY))),a.direction=e,c&&d>b.threshold&&e&b.direction},attrTest:function(a){return aa.prototype.attrTest.call(this,a)&&(this.state&ob||!(this.state&ob)&&this.directionTest(a))},emit:function(a){this.pX=a.deltaX,this.pY=a.deltaY;var b=$(a.direction);b&&(a.additionalEvent=this.options.event+b),this._super.emit.call(this,a)}}),i(ca,aa,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.scale-1)>this.options.threshold||this.state&ob)},emit:function(a){if(1!==a.scale){var b=a.scale<1?"in":"out";a.additionalEvent=this.options.event+b}this._super.emit.call(this,a)}}),i(da,Y,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[hb]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distanceb.time;if(this._input=a,!d||!c||a.eventType&(Ga|Ha)&&!f)this.reset();else if(a.eventType&Ea)this.reset(),this._timer=e(function(){this.state=rb,this.tryEmit()},b.time,this);else if(a.eventType&Ga)return rb;return tb},reset:function(){clearTimeout(this._timer)},emit:function(a){this.state===rb&&(a&&a.eventType&Ga?this.manager.emit(this.options.event+"up",a):(this._input.timeStamp=ra(),this.manager.emit(this.options.event,this._input)))}}),i(ea,aa,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.rotation)>this.options.threshold||this.state&ob)}}),i(fa,aa,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Na|Oa,pointers:1},getTouchAction:function(){return ba.prototype.getTouchAction.call(this)},attrTest:function(a){var b,c=this.options.direction;return c&(Na|Oa)?b=a.overallVelocity:c&Na?b=a.overallVelocityX:c&Oa&&(b=a.overallVelocityY),this._super.attrTest.call(this,a)&&c&a.offsetDirection&&a.distance>this.options.threshold&&a.maxPointers==this.options.pointers&&qa(b)>this.options.velocity&&a.eventType&Ga},emit:function(a){var b=$(a.offsetDirection);b&&this.manager.emit(this.options.event+b,a),this.manager.emit(this.options.event,a)}}),i(ga,Y,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[ib]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance _this.prevX) { 30 | _this.rotate('anti'); 31 | } else { 32 | _this.rotate('clockwise'); 33 | } 34 | 35 | _this.prevX = e.deltaX; 36 | 37 | }); 38 | }; 39 | 40 | img.src = url; 41 | this.createMatrix(); 42 | }, 43 | 44 | rotate(type) { //clockwise: 顺时针, anti: 逆时针 45 | if (type == 'clockwise') { 46 | this.I ++; 47 | 48 | if (this.I >= this.colNum) { 49 | this.I = 0; 50 | this.J ++; 51 | if (this.J >= this.rowNum) this.J = 0; 52 | } 53 | 54 | } else if (type == 'anti') { 55 | this.I --; 56 | 57 | if (this.I < 0) { 58 | this.I = this.colNum - 1; 59 | this.J --; 60 | if (this.J < 0) this.J = this.rowNum - 1; 61 | } 62 | } 63 | // console.log(this.I, this.J); 64 | this.changePosition(); 65 | }, 66 | 67 | changePosition() { 68 | // console.log(this.matrix[this.J][this.I]); 69 | this.$container.style.backgroundPosition = this.matrix[this.J][this.I]; 70 | }, 71 | 72 | createMatrix() { 73 | this.matrix = []; 74 | 75 | var arr = []; 76 | 77 | for (var i = 0; i < this.max; i ++) { 78 | var position = '-' + this.I * this.conWidth + ' -' + this.J * this.conHeight; 79 | arr.push(position); 80 | 81 | this.I ++; 82 | 83 | if ((i+1) % this.colNum == 0) { 84 | this.matrix.push(arr); 85 | arr = []; 86 | this.I = 0; 87 | this.J ++; 88 | } 89 | } 90 | // console.log(this.matrix); 91 | this.I = 0; 92 | this.J = 0; 93 | } 94 | }; 95 | 96 | var app = new SubType(); 97 | 98 | app.init(); -------------------------------------------------------------------------------- /panorama/src/main.css: -------------------------------------------------------------------------------- 1 | html, body, div { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #container { 7 | width: 1024px; 8 | height: 450px; 9 | position: absolute; 10 | left: 50%; 11 | top: 50%; 12 | margin-left: -512px; 13 | margin-top: -225px; 14 | background-image: url(./images/0.jpg); 15 | background-repeat: no-repeat; 16 | background-position: 0 0; 17 | cursor: pointer; 18 | } 19 | 20 | .loading { 21 | position: relative; 22 | width: 100%; 23 | height: 100%; 24 | background-color: rgba(255,255,255,0.7); 25 | } 26 | 27 | .loading img { 28 | width: 50px; 29 | position: absolute; 30 | left: 50%; 31 | top: 50%; 32 | margin-top: -25px; 33 | margin-left: -25px; 34 | -webkit-animation: rotate 0.8s linear infinite; 35 | -moz-animation: rotate 0.8s linear infinite; 36 | animation: rotate 0.8s linear infinite; 37 | } 38 | 39 | @-webkit-keyframes rotate { 40 | from { 41 | -webkit-transform: rotate(0deg); 42 | } 43 | to { 44 | -webkit-transform: rotate(360deg); 45 | } 46 | } 47 | 48 | @-moz-keyframes rotate { 49 | from { 50 | -moz-transform: rotate(0deg); 51 | } 52 | to { 53 | -moz-transform: rotate(360deg); 54 | } 55 | } 56 | 57 | @keyframes rotate { 58 | from { 59 | transform: rotate(0deg); 60 | } 61 | to { 62 | transform: rotate(360deg); 63 | } 64 | } -------------------------------------------------------------------------------- /shadow/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/shadow/.DS_Store -------------------------------------------------------------------------------- /shadow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 单侧投影 9 | 10 | 11 | 12 |
    13 |
  • 14 |
  • 15 |
  • 16 |
17 | 18 | -------------------------------------------------------------------------------- /shadow/resource/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/shadow/resource/.DS_Store -------------------------------------------------------------------------------- /shadow/resource/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/shadow/resource/images/.DS_Store -------------------------------------------------------------------------------- /shadow/resource/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/shadow/resource/images/bg1.jpg -------------------------------------------------------------------------------- /shadow/style.css: -------------------------------------------------------------------------------- 1 | html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, ul, li { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body { 7 | font-size: 12px; 8 | font-family: 'Verdana','Arial'; 9 | background-color: black; 10 | } 11 | 12 | ul { 13 | width: 1200px; 14 | overflow: hidden; 15 | text-align: center; 16 | position: absolute; 17 | top: 50%; 18 | margin-top: -200px; 19 | left: 50%; 20 | margin-left: -600px; 21 | } 22 | 23 | li { 24 | width: 300px; 25 | height: 300px; 26 | margin: 20px 50px; 27 | background-color: #2b6695; 28 | float: left; 29 | border-radius: 8px; 30 | } 31 | 32 | .shadow-single { 33 | box-shadow: 0 10px 10px -5px rgba(255,255,255,0.8); 34 | } 35 | 36 | .shadow-adjoin { 37 | box-shadow: 10px 10px 10px -5px rgba(255,255,255,0.8); 38 | } 39 | 40 | .shadow-relative { 41 | box-shadow: 0 10px 10px -5px rgba(255,255,255,0.8), 0 -10px 10px -5px rgba(255,255,255,0.8); 42 | } -------------------------------------------------------------------------------- /trajectory/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/trajectory/.DS_Store -------------------------------------------------------------------------------- /trajectory/images/air-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/trajectory/images/air-1.png -------------------------------------------------------------------------------- /trajectory/images/sss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/trajectory/images/sss2.png -------------------------------------------------------------------------------- /trajectory/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | FINAL FANTASY XII THE ZODIAC AGE 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /trajectory/index.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | }; -------------------------------------------------------------------------------- /trajectory/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/css-collection/528bccd0955e3402ece44b47c4acde992c3304c6/trajectory/style.css --------------------------------------------------------------------------------