一些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 属性允许您使元素看上去像标准的用户界面元素。现在你要做的就是去“乱”改吧。
前几天公司培训，“疼”计划
培训的时候，一直听说公司在推这个疼计划，我就在想到底是有多疼呢，疼代表的含义呢。脑海中出现了N多想法。后来我说服了自己，疼你就记住了，这个名字起的好呀。
结果是腾计划，不疼呀原来！！！
这两日发现的三个问题
第一：媒介查寻，这个问题其实可说的并不多，只要你不去写错。善于思考，多错几次就差不多了。 参考网址B
第二：rem单位，你百度的话，会发现绝大多数的列子都是用它来设置字体大小的，而且还会的看到它就是一个字体单位。官方也会说一句 哼~~我们这个是根据根元素字体来定义的。那么这个根是谁，不是你们说的父级亲，这个根是html。而且亲这个虽然是多数用来字体上，但是人家也是长度单位。可以用来设置其它的，当然你前提得找对这个根~~
第三：关于滚动的问题，亲爱的小果果做的页面，发现滚动左边的，右边会跟着动，经过排查原来，是区域的问题。左边在右边的范围内了，虽然后边就那么大，并且用的是左边距把自己硬推到了右边。但是鼠标不管呀，它就把它理解成，我滚动左边后，就去滚动右边，但你去滚动右边就不会影响到左边，为什么呢？ 因为左边是固定定位的，人家没有跑你右边去。 其实布局只要出来页面没有乱，问题就不大，客户看到的就是那么点东西【虽然有人会说优化呀，规范呀】。但是既然有问题了，那么就要日后避免。
最后总结性的说一句，出问题是好事，这样你会去思考，思考了就有进步。不过不出错我们更认为好，可以把时间省下来去吃烤鱼啦！
