虚拟运营商UED前端小组4月25号分享总结

1.css3卡牌翻转效果
css:
.animate{-webkit-perspective:1000;width:80px;height:100px;position:relative;overflow:hidden;}
.face{ rotateY(0deg); width:80px;height:100px;position:absolute;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-webkit-transition: all .25s linear ;-webkit-transform-style: preserve-3d;}
.back{background:green;-webkit-transform: rotateY(-180deg);width:80px;height:100px;}
.front{background:red;width:80px;height:100px;}
.animate:hover .front{-webkit-transform: rotateY(180deg);}
.animate:hover .back{-webkit-transform: rotateY(0deg);}
html:

2. 不声明第三个变量的值交换
算术方法
var a=10,b=12;
a=b-a;
b=b-a;
a=b+a;
位运算
var a=10,b=12;
a=a^b;
b=a^b;
a=a^b;
栈实现
var a=1,b=2;
a=[b,b=a][0];
3.Zen Coding基本使用

E 元素名称(div, p);
E#id 使用id的元素(div#content, p#intro, span#error);
E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N 子代元素(div>p, div#footer>p>span);
E+N 兄弟元素(h1+p, div#header+div#content+div#footer);
EN 元素倍增(ul#nav>li5>a);
E$N 条目编号 (ul#nav>li.item-$5);

关于 RainZhai

玩的么wande.me,web development machine博主,rain css前端框架作者,blogger,html5游戏爱好者
此条目发表在 CSS & HTML, html5 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。

文章评论 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>