一些CSS3的乐趣 - 工作也能发现乐的源头

中秋节 translate

前些日子做一个中秋节的专题，主要就是写一个效果，月亮滚动，花瓣飘落。具体代码如下：

.icons {z-index:10088; position:absolute;

-webkit-animation:flower 6s 1.5s linear infinite both;

-moz-animation:flower 6s 1.5s linear infinite both;

-o-animation:flower 6s 1.5s linear infinite both;

-ms-animation:flower 6s 1.5s linear infinite both;

animation:flower 6s 1.5s linear infinite both;}

.other-iocn {

-webkit-animation:flower2 5s 1.5s linear infinite both;

-moz-animation:flower2 5s 1.5s linear infinite both;

-o-animation:flower2 5s 1.5s linear infinite both;

-ms-animation:flower2 5s 1.5s linear infinite both;

animation:flower2 5s 1.5s linear infinite both;}

.........

.........

@-webkit-keyframes flower{

	0%{-webkit-transform:translate(30px,-30px);opacity:0;}

	50%{-webkit-transform:translate(-200px,200px) rotate(180deg);opacity:1;}

	to{-webkit-transform:translate(-400px,400px) rotate(270deg);opacity:0;}

}

@-moz-keyframes flower{

	0%{-moz-transform:translate(30px,-30px);opacity:0;}

	50%{-moz-transform:translate(-200px,200px) rotate(180deg);opacity:1;}

	to{-moz-transform:translate(-400px,400px) rotate(270deg);opacity:0;}

}

@-o-keyframes flower{

	0%{-o-transform:translate(30px,-30px);opacity:0;}

	50%{-o-transform:translate(-200px,200px) rotate(180deg);opacity:1;}

	to{-o-transform:translate(-400px,400px) rotate(270deg);opacity:0;}

}

@-ms-keyframes flower{

	0%{-ms-transform:translate(30px,-30px);opacity:0;}

	50%{-ms-transform:translate(-200px,200px) rotate(180deg);opacity:1;}

	to{-ms-transform:translate(-400px,400px) rotate(270deg);opacity:0;}

}

@keyframes flower {

	0% {opacity:0;transform: translate(30px,-30px);}

	50% {opacity:1;transform: translate(-200px, 200px) rotate(180deg);}

	100% {opacity:0;transform: translate(-400px, 400px) rotate(270deg);}

}

@-webkit-keyframes flower2{

	0%{-webkit-transform:translate(0px,0px);opacity:.0;}

	50%{-webkit-transform:translate(-100px,100px)  rotate(60deg);opacity:1;}

	to{-webkit-transform:translate(-200px,200px)  rotate(180deg);opacity:0;}

}

@-moz-keyframes flower2{

	0%{-moz-transform:translate(0px,0px);opacity:.0;}

	50%{-moz-transform:translate(-100px,100px)  rotate(60deg);opacity:1;}

	to{-moz-transform:translate(-200px,200px)  rotate(180deg);opacity:0;}

}

@-o-keyframes flower2{

	0%{-o-transform:translate(0px,0px);opacity:.0;}

	50%{-o-transform:translate(-100px,100px)  rotate(60deg);opacity:1;}

	to{-o-transform:translate(-200px,200px)  rotate(180deg);opacity:0;}

}

@-ms-keyframes flower2{

	0%{-ms-transform:translate(0px,0px);opacity:.0;}

	50%{-ms-transform:translate(-100px,100px)  rotate(60deg);opacity:1;}

	to{-ms-transform:translate(-200px,200px)  rotate(180deg);opacity:0;}

}

@keyframes flower2{

	0% {opacity:0;transform: translate(0px, 0px);}

	50% {opacity:1;transform: translate(-100px, 100px) rotate(60deg);}

	100% {opacity:0;transform: translate(-200px, 200px) rotate(180deg);}

}

其实难点就是兼容性了，用大家都会用，就是效果出来后，具体展示是存在问题的。如这个花瓣飘落的效果，你就要应用好 translate，用不好，你的效果就出来的不够魅力。具体使用心得，熟练度自己去体会吧。

select浏览器默认显示修改 -webkit-appearance

由于手机端是可以修改这个select的，所以用了这个属性，你更是可以修改默认的小三角。

appearance 属性允许您使元素看上去像标准的用户界面元素。现在你要做的就是去“乱”改吧。

参考网址A

前几天公司培训，“疼”计划

培训的时候，一直听说公司在推这个疼计划，我就在想到底是有多疼呢，疼代表的含义呢。脑海中出现了N多想法。后来我说服了自己，疼你就记住了，这个名字起的好呀。

结果是腾计划，不疼呀原来！！！

这两日发现的三个问题

第一：媒介查寻，这个问题其实可说的并不多，只要你不去写错。善于思考，多错几次就差不多了。参考网址B

第二：rem单位，你百度的话，会发现绝大多数的列子都是用它来设置字体大小的，而且还会的看到它就是一个字体单位。官方也会说一句哼~~我们这个是根据根元素字体来定义的。那么这个根是谁，不是你们说的父级亲，这个根是html。而且亲这个虽然是多数用来字体上，但是人家也是长度单位。可以用来设置其它的，当然你前提得找对这个根~~

第三：关于滚动的问题，亲爱的小果果做的页面，发现滚动左边的，右边会跟着动，经过排查原来，是区域的问题。左边在右边的范围内了，虽然后边就那么大，并且用的是左边距把自己硬推到了右边。但是鼠标不管呀，它就把它理解成，我滚动左边后，就去滚动右边，但你去滚动右边就不会影响到左边，为什么呢？因为左边是固定定位的，人家没有跑你右边去。其实布局只要出来页面没有乱，问题就不大，客户看到的就是那么点东西【虽然有人会说优化呀，规范呀】。但是既然有问题了，那么就要日后避免。

最后总结性的说一句，出问题是好事，这样你会去思考，思考了就有进步。不过不出错我们更认为好，可以把时间省下来去吃烤鱼啦！