本文发布于:2013-04-01,最后更新于:2017-05-04,如果内容失效请留言告知。
早上登陆 qq 后,不时的几个关于开发的群里都贴出了 oc 的地址,打开一看,噢,CSS3 的 transform rotate特性!
查看下页面属性,即是 js 的方式对页面全局加了如下属性:
-webkit-transform: rotate(-8deg);
你可以如此来写:
body {
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
在这样的节日如此的恶搞一下,确实挺有点意思, oc 的此举也一定让不少程序猿们对 CSS3 加以更高的关注度。
志文工作室在其影响之下,也起了兴趣,对博客加了段 js ,诺,就是你看到的样子了(如图2示)。
这里用到了 CSS3 Gradient 和 CSS3 Transiform 的特性,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | jQuery( 'body' ).css({ '-webkit-transform' : 'skew(-5deg,-10deg)' , '-moz-transform' : 'skew(-5deg,-10deg)' , '-o-transform' : 'skew(-5deg,-10deg)' , 'transform' : 'rotate(-8deg)' }); jQuery( 'body' ).css({ 'background' : '-moz-radial-gradient(left, red, #f96, yellow, green, #ace)' , 'background' : '-o-radial-gradient(left, red, #f96, yellow, green, #ace)' , 'background' : '-webkit-radial-gradient(left top,ellipse, red, #f96, yellow, green, #ace)' }); // 点击页面任意地方取消 jQuery( 'body' ).one( 'click' , function () { $( this ).css({ '-webkit-transform' : '' , '-moz-transform' : '' , '-o-transform' : '' , 'transform' : '' }) }) |
这里不是要详解相关技术的内容,所以不对它们作详细分析。如对之有兴趣,可参考阅读如下内容详解:
CSS3属性教程与案例分享
http://www.w3cplus.com/resources/css3-tutorial-and-case
认真阅读文章了,顺便留了个链接,长沙网络推广http://www.cssyseo.com
哈哈,有意思。你的博客好专业,看不懂~~ :grin:
亲,愚人节过了,可以撤了!~
好吧,可以撤掉了,看着好累
亲,你这个界面….让我眼睛很不舒服啊??
挺有意思的哈。。。