(画廊 模仿的这个地址的东西)
后续在加些demo
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} body{ overflow:hidden;} .warp{ width:660px; margin:80px auto 0; position:relative; font-size:14px;} .warp a{ font-family: "Lucida handwriting","Snell Roundhand","Helvetica Neue",Arial,Helvetica,sans-serif; background-color:#FFF; border:1px solid #bfbfbf; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); padding:10px 10px 20px; color:#000; text-decoration:none; white-space:normal; -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; position:absolute; display:inline-block; z-index:10; } .warp a img{ display:block; margin-bottom:15px;} .warp a.l1{top:-340px;} .warp a.d1{ top:210px; left:2px; -webkit-transform: rotate(1050deg); -moz-transform: rotate(1050deg); -o-transform: rotate(1050deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .warp a.d1:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(1080deg); -moz-transform: scale(1.2) rotate(1080deg); -o-transform: scale(1.2) rotate(1080deg); } .warp a.l2{top:-340px; left:30} .warp a.d2{ top:4px; left:13px; -webkit-transform: rotate(-1040deg); -moz-transform: rotate(-1040deg); -o-transform: rotate(-1040deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .warp a.d2:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(-1080deg); -moz-transform: scale(1.2) rotate(-1080deg); -o-transform: scale(1.2) rotate(-1080deg); } .warp a.l3{top:24px; left:-400px;} .warp a.d3{ top:22px; left:111px; -webkit-transform: rotate(690deg); -moz-transform: rotate(690deg); -o-transform: rotate(690deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .warp a.d3:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.3) rotate(720deg); -moz-transform: scale(1.3) rotate(720deg); -o-transform: scale(1.3) rotate(720deg); } .warp a.l4{top:132px; left:-200px;} .warp a.d4{ top:132px; left:141px; -webkit-transform: rotate(760deg); -moz-transform: rotate(760deg); -o-transform: rotate(760deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .warp a.d4:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.1) rotate(720deg); -moz-transform: scale(1.1) rotate(720deg); -o-transform: scale(1.1) rotate(720deg); } .warp a.l5{top:-340px; left:450px} .warp a.d5{ top:3px; left:220px; -webkit-transform: rotate(735deg); -moz-transform: rotate(735deg); -o-transform: rotate(735deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; } .warp a.d5:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(-1080deg); -moz-transform: scale(1.2) rotate(-1080deg); -o-transform: scale(1.2) rotate(-1080deg); } .warp a.l6{top:-340px; left:330px} .warp a.d6{ top:3px; left:320px; -webkit-transform: rotate(-735deg); -moz-transform: rotate(-735deg); -o-transform: rotate(-735deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; z-index:1 } .warp a.d6:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(-1080deg); -moz-transform: scale(1.2) rotate(-1080deg); -o-transform: scale(1.2) rotate(-1080deg); } .warp a.l7{top:-340px; left:400px} .warp a.d7{ top:3px; left:430px; -webkit-transform: rotate(-370deg); -moz-transform: rotate(-370deg); -o-transform: rotate(-370deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; z-index:1 } .warp a.d7:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(-360deg); -moz-transform: scale(1.2) rotate(-360deg); -o-transform: scale(1.2) rotate(-360deg); } .warp a.l8{top:180px; right:-600px} .warp a.d8{ top:240px; right:30px; -webkit-transform: rotate(370deg); -moz-transform: rotate(370deg); -o-transform: rotate(370deg); -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; z-index:1 } .warp a.d8:hover{ border:1px solid #333; z-index:100; -webkit-transform: scale(1.2) rotate(360deg); -moz-transform: scale(1.2) rotate(360deg); -o-transform: scale(1.2) rotate(360deg); } </style> </head> <body> <div id="warp" class="warp"> <a href="#" class="l1"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_11.jpg"><p>jiliutanxianyaya</p><p>jiliutanxian</p></a> <a href="#" class="l2"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_22.jpg"><p>beijubeiju</p></a> <a href="#" class="l3"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_33.jpg"><p>beijubeiju</p></a> <a href="#" class="l4"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_44.jpg"><p>beijubeiju</p></a> <a href="#" class="l5"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_55.jpg"><p>beijubeiju</p></a> <a href="#" class="l6"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_66.jpg"><p>beijubeiju</p></a> <a href="#" class="l7"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_77.jpg"><p>beijubeiju</p></a> <a href="#" class="l8"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/r_88.jpg"><p>beijubeiju</p></a> </div> <script type="text/javascript"> (function(doc,undefined){ var win = this; win.$q = function(name,parent){return parent.getElementsByTagName(name);} win.$$ = function(id){return document.getElementById(id);} win.hasClass = function(element, className){ return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }; win.addClass = function(element, className){ if(!win.hasClass(element, className)) element.className.replace(/\s/g,'')==='' ? element.className = className : element.className+= " "+className; }; win.removeClass = function(element, className){ win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s*|^)'+className+'(\\s*|$)'),' ')); } win.each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; })(document); window.onload = function(){ var arr = ["d1","d2","d3","d4","d5","d6","d7","d8"]; each($q("a",$$("warp")),function(i,o){ o.classname = ""; addClass(o,arr[i]); }); } </script> </body> </html>
CSS 变形(Transformation)
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，并且该元素 下的所有子元素 随着参数的设置 旋转、缩放 和移动。它有以下的一些参数
-
rotate
rotate(旋转)允许你通过传递一个度数值来转动一个对象。rotate(numdeg)
num为数字 正数为顺时针旋转,负数逆时针
-
scale
Scale是一个缩放功能 scale(num1,num2)
num为数字 num1为x方向缩放,num2为y方向缩放,如果只有一个参数想，x,y轴同时缩放
如果num为负数,则元素会转向
-
translate
translate就是基于X和Y 坐标重新定位元素 translate(num1px,num2px)
num为数字 num1为x方向,num2为y方向
-
skew
skew倾斜
-
matrix
这是个麻烦的东西,但是学会真就很好用了。一篇别人写的blog很好呀!
ransform-origin
ransform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用。 transform-origin:xx yy
xx,yy表示原点的坐标,相对于元素,可以px em, 也可以是left center right top center bottom
浏览器支持
ie6-9全部不支持 (ps 但是可以用滤镜实现)
Firefox Chrome Safari Opera (我主要看这几个 其他的浏览器不知道,且是高版本支持,底版本也不知道)
Rotate
rotate demo
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} .demo{ height:200px; width:200px; margin:60px auto; background-color:#F00} .t{ text-align:center;} </style> </head> <body> <div id="demo" class="demo"></div> <div class="t"><input value="+5feg" type="button" onClick="rotate(5)"> <input value="-5feg" type="button" onClick="rotate(-5)"></div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; var css3Transform = function(){ var style = document.createElement("div").style, o; each(["MozTransform", "webkitTransform", "OTransform"],function(i,css){ if (css in style) { o = css return false; } }); return o; }(); var demo = $("demo"); function rotate(n){ var val = demo.style[css3Transform]; val = val ===""?0:val.replace(/[^0-9-]/g,""); val = parseFloat(val)+n; demo.style[css3Transform] = "rotate("+val+"deg)" } </script> </body> </html>
ie rotate demo
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} .demo{ height:200px; width:200px; margin:60px auto; background-color:#F00} .t{ text-align:center;} </style> </head> <body> <div class="t"><input value="+5feg" type="button" onClick="rotate($('demo'),5)"> <input value="-5feg" type="button" onClick="rotate($('demo'),-5)"></div> <div id="demo" class="demo"></div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; var css3Transform = function(){ var style = document.createElement("div").style, o; each(["MozTransform", "webkitTransform", "OTransform"],function(i,css){ if (css in style) { o = css return false; } }); return o; }(); function rotate(node,deg){ var oldDeg = node.getAttribute("deg"), newDeg = deg; if(/^\d+$/.test(oldDeg)){ newDeg = ~~oldDeg + deg; } ieRotate(node,newDeg); } var demo = $("demo"), demoW = $("demo").offsetWidth; demoH = $("demo").offsetHeight; var setCenter = function(node,w,h){ //这里都是总是居中的 所以就不需要修改了 } //ie下的旋转参考了司徒正美的 设置中心点提出来了 因为这个要根据dom结构来写 function ieRotate(node,deg){ var deg2rad = Math.PI / 180, rad = deg * deg2rad , cos = Math.cos(rad), sin = Math.sin(rad); var ident = "DXImageTransform.Microsoft.Matrix"; node.style.filter = "progid:"+ident +"(M11='1.0',sizingmethod='auto expand')"; if(!node.currentStyle.hasLayout){ node.style.writingMode = "tb-rl"; } var filter = node.filters.item(ident); filter.M11 = cos; filter.M12 = -sin; filter.M21 = sin; filter.M22 = cos; node.setAttribute("deg",deg); if(setCenter){ var w = node.offsetWidth, h = node.offsetHeight; setCenter(node,w,h); } } </script> </body> </html>
Scale
-webkit-transform: scale(2, 2);
-moz-transform: scale(2, 2);
-o-transform: scale(2, 2);
}
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} .demo{ height:200px; width:200px; margin:60px auto; background-color:#F00} .t{ text-align:center;} </style> </head> <body> <div class="t"><input value=" +0.1 " type="button" onClick="scale(1)"> <input value=" -0.1 " type="button" onClick="scale(-1)"></div> <div id="demo" class="demo"> <div>asdasd</div> <div>哇哈哈哈哈哈哈</div> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; var css3Transform = function(){ var style = document.createElement("div").style, o; each(["MozTransform", "webkitTransform", "OTransform"],function(i,css){ if (css in style) { o = css return false; } }); return o; }(); var demo = $("demo"); function scale(n){ var val = demo.style[css3Transform]; val = val ===""?1:val.replace(/[^0-9.-]/g,""); val = parseFloat(val)+n*0.1; demo.style[css3Transform] = "scale("+val+")" } </script> </body> </html>
Translate
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
}
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} .demo{ height:200px; width:200px; margin:60px auto; background-color:#F00} .t{ text-align:center;} </style> </head> <body> <div class="t"><input value=" +5,x,y " type="button" onClick="translate(5)"> <input value=" -5,x,y " type="button" onClick="translate(-5)"></div> <div id="demo" class="demo"> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; var css3Transform = function(){ var style = document.createElement("div").style, o; each(["MozTransform", "webkitTransform", "OTransform"],function(i,css){ if (css in style) { o = css return false; } }); return o; }(); var demo = $("demo"); function translate(n){ var val = demo.style[css3Transform]; if(!/translate/.test(val)){ demo.style[css3Transform] = "translate(3px,7px)"; return; } var reg = /-?\d+/g var x = reg.exec(val)[0], y = reg.exec(val)[0]; demo.style[css3Transform] = "translate("+(parseFloat(x)+n)+"px,"+(parseFloat(y)+n)+"px)"; } </script> </body> </html>
Skew
-moz-transform: skew(30deg, -10deg);
-webkit-transform: skew(30deg, -10deg);
-o-transform: skew(30deg, -10deg);
}
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0;} .demo{ height:200px; width:200px; margin:60px auto; background-color:#F00} .t{ text-align:center;} </style> </head> <body> <div class="t"><input value=" +3 " type="button" onClick="skew(3)"> <input value=" -3 " type="button" onClick="skew(-3)"></div> <div id="demo" class="demo"> <div>asdasd</div> <div>哇哈哈哈哈哈哈</div> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);} var each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i < length; i++) if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} } return object; }; var css3Transform = function(){ var style = document.createElement("div").style, o; each(["MozTransform", "webkitTransform", "OTransform"],function(i,css){ if (css in style) { o = css return false; } }); return o; }(); var demo = $("demo"); function skew(n){ var val = demo.style[css3Transform]; console.log(val) if(!/skew/.test(val)){ demo.style[css3Transform] = "skew(3deg,7deg)"; return; } var reg = /-?\d+/g; var x = reg.exec(val)[0], y = reg.exec(val)[0]; demo.style[css3Transform] = "skew("+(parseFloat(x)+n)+"deg,"+(parseFloat(y)+n)+"deg)"; } </script> </body> </html>
Matrix
Rotate Scale Translate Skew可以合起来写成链式
位置可以随便排,但是格式要正确,该加px的加px,该加deg的加deg.
写在样式里面的链式结构 读出来就变成了matrix() 所以还是要实现matrix 和 链式的互换才行
transform-origin
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-o-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Lottery Demo</title> <style type="text/css"> *{padding:0;margin:0;} #xx{background: #f00; position: relative;} </style> </head> <body> <br> <input type="button" value="xxxx" οnclick="xx()"> <a href="http://www.baidu.com" οnclick="bb()">vvvv</a> <iframe id="xx" ></iframe> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script> function bb(){ $("#xx")[0].src="pabank://com.pingan.pabank/notlogin/forward?route=account/account/loginhttp://www.baidu.com" //window.location.href="pabank://com.pingan.pabank/notlogin/forward?route=account/account/loginhttp://www.baidu.com" } /* */ window.onload = function(){ /* setTimeout(function(){ iframe.contentWindow.location.href = "pabank://openUrl" },3000); */ var ua = navigator.userAgent.toLowerCase(), android = ua.indexOf('android') != -1, // ios = ua.indexOf('iphone os') != -1 || ua.indexOf('ipad') != -1; var log = function (msg) { $('body').before('<div class="log">' + msg + '</div>'); }; var timeout, t = 1000, hasApp = true; function testApp() { var t1 = Date.now(); var ifr = $('<iframe id="ifr"></iframe>') .css("display","none") $("body").append(ifr); if(ios){ ifr.attr('src', "PAiPhoneBank://paebank?route=account/account/login"); }else{ ifr[0].src="pabank://com.pingan.pabank/notlogin/forward?route=account/account/login" //ifr.attr('src', "pabank://com.pingan.pabank/notlogin/forward?route=account/account/login"); } timeout = setTimeout(function () { var t2 = Date.now(); if (t2 - t1 < t + 200) { hasApp = false; } }, t); } this.xx = function(){ setTimeout(function () { if (hasApp) { log('安装了app'); } else { log('未安装app'); } }, 2000) testApp(); } } </script> </body> </html>
transition(转换)
即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果. 推荐看这篇文章
他有以下的对应的属性列表
-
transition-property
指定转换的CSS属性名称,也可以为all(表示所有的样式都会转换),也可以为none(为none的时候会停止动画)
-
transition-duration
指转化样式所需要的时间
-
transition-timing-function
指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy
-
transition-delay
延迟执行
-
这些属性都可以连写
demo1
-moz-transition: color .5s ease-in;
-o-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
