移动端Menu效果-来自不可描述网站的灵感

原计划的第一篇技术笔记是用Photoshop做视频,但迟迟没行动,假装有借口在做项目吧。最近访问不可描述网站,看到很多兴奋的东西,不是内容,是他们用的配色和一些技术。也是因为某大师级设计博主曾经写过相似文章有所启发(我知道,这也不是我光明正大看不可描述网站的理由!)。

夜深人静的时候,就行动起来,做了一个小Demo,一次成型,看看效果:

CSS

*{margin:0; padding:0;}
body{overflow:hidden;}
.m-nav{position:relative; height:60px; background:#272727;}
.m-nav a.menu-link{
position:absolute; top:10px; right:.5rem;
display:block;
width:40px; height:40px;}
.m-nav a.menu-link span{
position:relative;
display:block;
width:28px; height:20px;
margin:10px auto 0;}
.m-nav a.menu-link span em{
position:absolute; width:50%;
height:4px;
background:#fff;
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out;
}
.m-nav a.menu-link span em:nth-child(odd){left:0; border-radius:9px 0 0 9px;}
.m-nav a.menu-link span em:nth-child(2n){left:50%; border-radius:0 9px 9px 0;}
.m-nav a.menu-link span em:nth-child(3),
.m-nav a.menu-link span em:nth-child(4){top:8px; opacity:1;}
.m-nav a.menu-link span em:nth-child(5),
.m-nav a.menu-link span em:nth-child(6){top:16px;}
.m-nav a.active span em:nth-child(3){left:-50%; opacity:0;}
.m-nav a.active span em:nth-child(4){left:100%; opacity:0;}
.m-nav a.active span em:nth-child(1){top:3px; transform:rotate(45deg)}
.m-nav a.active span em:nth-child(2){top:3px; transform:rotate(-45deg)}
.m-nav a.active span em:nth-child(6){top:14px; transform:rotate(45deg)}
.m-nav a.active span em:nth-child(5){top:14px; transform:rotate(-45deg)}
.m-nav a.active span em{width:65%; background:#f00;}

HTML

<div class="m-nav">
    <a href="javascript:;" class="menu-link">
        <span><em></em><em></em><em></em><em></em><em></em><em></em></span>
    </a>
</div>

很有趣的小动画,记得以前就见过,那会也没想过深研究,可能当时那种做法没有这个简单吧。

点击查看这个Demo 点击访问应用此效果的网站(手机访问)

最终?定稿?

下班路上,顶着北风,吃力的骑着单车,心里想着近几个月发生的事,越想越悲伤。天知道我经历了什么。

看着上面发的图片,3月23日的最终校正,我今天刚修改完,不一会就发现了今天的定稿文档,最终如果不是最终版,那么定稿肯定是了,这个产品样本,我已经发现N次错误,并且在校对的文档还发现过低级错误,改了N次,看到最终校正后,我再次修改完直接就上传到网站相关栏目了。然后不大一会,发现了定稿文档,再次修改后,我决定再细看一下有什么错误。

就是这么刺激,反复的用Photoshop打开这个产品样本,反复的修改,就算定稿了,我这不相信别人的性格,还是让我再用火眼金晴扫了一遍。又是一处错误!我不知道我是否要进行下去了,我该怎么办?再和她说一遍仔细检查我再改?

deg degree degrees, PSI or psi, ” or “,我完全凌乱了!如果说前面的三个单词是因为我不懂语句的用法,那么后面的这些。我完全可以叫准是错误了。真的不理解怎么定的最终&定稿!不如叫定搞=一定还要搞!

脑子是个好东西!

很喜欢这个表情包,脑子是好东西,希望你也有一个。

今天上班后,旁边的女同事找我处理科学上网的问题,这已经是第三次了,我依旧去帮忙,这次,她终于主动去看我怎么操作,记住了步骤,我很欣慰,不管是不是因为我要离开,怕以后再遇问题,还是其它什么的,都很感动,必竟,这就算动脑子了。

很多年前需要科学上网,都是找懂的人问一下,就去找方法,然后自己摸索,从最早的自.由.门,到VPN,再到SSR,都是问熟悉的人给个名字,给个品牌,给个入口,剩下的就全靠自己的,各种不同的方法,软件,都自己去凭着感觉使用,也就是动了脑子。不然怎么办?去问吗?感觉很丢人,因为发现每次遇到的软件都太简单,一操作就会,这么肤浅的问题,还要去问,那我自己就可以离开这行业了。

百度是个好东西,当然谷歌更好用,前提是需要科学上网,现在很多时候有点不理解的问题,直接问百度,效率很高,但能用脑子的时候依旧用脑子,觉得这样很刺激。

我原本是个傻子,后来慢慢有了脑子,我就变成了有脑子的傻子,直接有一天会用了,才觉得慢慢的不太傻了,本来想着标题就叫:有脑子的傻子,想想不雅,还是算了,这会想到最初的样子,那真如这句话所说,就是个傻子,很多年前,我第一次去网吧,面对着电脑一脸的懵,早先确实学过一点,但那会是没有鼠标的UCDOS,简单的学学键盘使用就不错了,那第一次去网吧,面对着win98,还有那个小巧的鼠标,我只知道它有个指针,会移动。但当时的左右键,我还不知道怎么用,一顿乱操作。后面的网管已经怒了,开始凶狠的和我说,双击,双击会吗?你怎么打开了这么多窗口,会死机的,我尴尬至极,提前下机离开了。

后来改学计算机后,从一个菜鸟,慢慢的入了门,有个中学同学是从中学就开始痴迷电脑的,总去他家请教,慢慢的有了第一台电脑,开始会玩一些了,学计算机的同学也帮我在入门上指导了很多,从我fdisk坏第一块硬盘,到后来去电脑城懂得了装win98,虽然依旧蠢笨,但也渐渐的越来越懂。

这么多年,用过了多少软件,看过多少软件的兴衰,我已经记不得,从一开始手忙脚乱,到后来得心应手,很多都是无师自通,拿来即用,不能说很聪明,只能说,动了点脑子罢了。会和精是两回事。很多软件不管他和其它软件有什么样的不同,只要上手操作一会,也还是会用的。

但我永远理解很多人就是不会,因为我也从那时经过,但如果一直就这么不会下去,那就是小时候老师说的滚刀肉,不玩活的了。

感激这一路上所有指点过我的良师益友,是你们的指引,才有我的今天。

差不多

在现在的公司已经进入倒计时了,今天硬着头皮,还是主动沟通了一下,人将要走了,也放下了一切,因为可以不用再合作,态度就没必要太差了,徐总说人能控制脾气是能力,我觉得这一年,对于脾气的控制,我还算掌握的很不错,心平气和的,就把接下来要完成的工作沟通了一下,否则,自己不放下偏见与怒气,解决不了问题,显得拖拉。

发生前天那个事件后,今天下午我终于打开了电脑,在共享中查看校对的最终版,依旧是之前说的两个系列,其它的完全没有最终版的痕迹,估计是他们以为项目停了吧,我已经不在了,这些就可以完全扔了。还好,她的回答是她在改我没改过的那些。具体是不是,不计较了。

她几次提到差不多这种字眼,我听着也是眉头紧皱,在我这脑子里,差不多,就是不完美,还有问题出现,当然,之前我已经在最终版发现了问题。我想,这种时候,没人会高尚的再去极度变态的去说细节了吧。必竟这不是一天两天了,我也放宽了要求,妥协是一种态度!直接说,一些标点符号的问题,我发现就直接改了,句子什么的,你们看就行了。

其实人家没有错,人家只是准确的执行了交代的1,已经不错了,我不能奢求人家再+1,再做2,再做3,所以,说什么就是什么吧。也许有些细节,我在不是完全懂的情况,质疑人家,也会让人家不爽。

很小的时候,我喜欢读书,看到一篇文章《差一点,不能煮来吃》,是20多年前看过的,讲一个猎人出去打猎,这一天什么都没有打到,回到家,和她的妻子说:哎,今天差一点就打到猎物了,妻子很沮丧,因为一家人都要饿肚子了,就因为这差一点。这故事深深的印在我脑子里,现在想想,这也许是我最早读过的管理学吧。

年少时,贪玩不爱念书,学习成绩从来没好过,早早的辍学,改学技术,但这些儿时读过的书,对我的影响,是一生的,无论何时,我想到这个故事,都会更注重细节,就像2008年那家公司的一个管理者说的话:我不完美,但我追求完美。这句话算是差一点,不能煮来吃的鸡汤升级版。

从小到大,很多亲戚教我,要会来事,有眼利见,没事给老板送个礼什么的,虚头巴脑的那些东西,我学不来,我只认为把事情做细就行了,我长的就不像那种哈巴狗一样的人,我感觉做那种会说的人,会送礼的人,人家都会觉得我太假,不如把事做好。

对不起,我不会!

这个标题是一个故事,一个不可思议的职场故事,14年职场经历,前所未有的经历。

几年前,刚从北京回来那会,被北京快节奏所感染,那种做事干脆,不惧得罪,只要和工作有关,就一定要坚持原则,马虎不得,只要有一点不理想的声音,那都要怼回去。前几年所呆的几家公司,真的是经常和同事闹得面红耳赤,针锋相对。经历了程序员要拿椅子拍我,经历了为了一些细节的语言PK,但似乎没有闹到如今这种,完全不想说话的局面。

到了2015年,渐渐的学会收敛,学会把棱角磨平,学会控制一部份情绪,从那年开始,渐渐的不再有争吵,不再为了工作去得罪人,必竟都是打工的,没必要互相为难。

到了2019年,开始学习更好的融入职场,以为自己不再是那个曾经脾气火爆的人,也感觉自己似乎运气不错,来到了一家无小人,无办公室政治的团队,特别和谐,直到今天,我终于明白,我想简单了,只要没有合作,那一切都可以风平浪静,有欢声笑语,也会有那句我特别喜欢的“家和万事兴”。

一开始,能合作到的同事,没有很深的合作,对于他们寻求帮助,我也是没有任何拒绝,无论是电脑故障,还是office办公,一切他们处理不了不会的,我都是随叫随到,关系无比融洽,当时的工作很轻松,做着不需要任何人帮助的事情,自己在那深度的研究细节的东西,就感觉这公司我一定会呆很久。

你私下再怎么认真,也需要有老板懂的成就,否则,你就是在玩。在调整了工作后,我变得更加忙碌,更加疲劳,一个人去做很多事,开始也还算顺手,自己能解决的事情,从来不求别人,这是我一直的工作方法。自认为个人能力很强,总会应付过来,可能是因为你曾经帮助过的职场小白,在你没看到他有多么成功的时候,有一天被任命监督你的工作时,你开始暴躁,开始不理解,凭什么一个废物却能监督我?开始有叛逆情绪,这也许就是不信任,我就是这样性格的人,明明我想把事情做好的时候,你不信任我,派人监督我,我一定会反击。

一个平庸的人,是永远比不过积极向上的人,矛盾也就此产生,爆发了一系列的问题。提高了嗓门,情绪不可控制,突然的指令,一个不可能完成的任务分配下来,积极的人在简单的思考后,寻求平庸的人给些帮助,希望在配合后,可以挑战这个不可能完成的任务。被平庸的人拒绝,是啊,一个没有责任心的人,和他又没有关系,他不做老板不会说他,他做了也没什么好处吧?就这样,积极的人,只能硬着头皮按步就班的去完成,只能尽力吧,这就是一切后来故事的导火索,因为平庸的人已经触碰了积极人的底限,从此,积极的人开始对平庸的人没有任何好印象,也就开始极端起来。后来的工作,积极的人把平庸的人带进了坑,似乎这个坑原本只是积极人做事的态度,却没想到,战火越来越浓。

成功者找方法,失败者找借口。也许这就是碗鸡汤,他可能适用于优秀的团队,无需这句话,优秀的团队自然就会去做。很多事情,还需要别人去教,那只能说,庸才!在我14年的职场生涯,我脑海中,一直存在一个观念,要给别人带来方便,怎么让别人更轻松的工作,让别人不需要太纠结因为你工作的不认真而让他感觉苦恼。那天确实是我方法用错了,私下说也许依旧会有战火,但不会那么严重。一切都是有原因的,因为瞧不起,回想起来那些简单的office问题还需要自己去帮忙,联想这一系列的因,变成了那个果:你是个大学的高材生,你工作要有方法!这话确实很刺耳,而且是公开场合,说完自己也有点后悔,只不过当时的方法用错了,但得到的回答,确也是战火的味道:对不起,我不会!我想了一下,一声很重的叹气,双手用力的砸向桌子,起身就出去了,一想到这已经发生了战火,不希望百忙中的老板再抽出时间去调节,就去找了个安静的地方,卑微的开始亏心的承认错误。

故事的细节,往往都很难让人了解,百因必有果,没有这些经过,没人知道,到底这其中,谁对谁错。也许,错就在于一开始的偏见。后续很多故事,心里委屈,也只能自己憋着,可能旁观者永远觉得你是错的。渐渐的,也就理解了,什么叫误会。

也许以后,自己也该学会那句:对不起,我不会!这样拒绝别人,使别人自己成长,就不会有那种很严重的偏见了吧。

回忆中那个最完美的公司

离开china.com很多年了,进入IT职场的第14年,每次回想起来,排名第一的好企业,永远是china.com,虽然离开后听说被收购,但每年都想访问几次,看到还在线,就有回忆。

2010年年末,终于离开了两年时间AB两家公司各呆半年的尴尬遭遇,通过几家公司面试,最终拿了china.com的offer,这也是14年职场工作中唯一一次非常正规的企业,人生第一个offer,因为以后再也没有这种概念了,HR也没有再遇到如此专业的。

呆了不到一年时间,现在回想起来,就从来也没有任何不顺心的,当时还是没有勇敢向前,怎么就突然不想在北京了,很后悔,要是再呆久点,不知道此刻技术会有多少成长。

一直在寻找那种团队氛围,和谐,有成长,有交流,就算那几个女同事不善言辞,但也不会觉得很尬。因为工单系统,工作也非常流畅,每一个环节,透着那股成熟,福利,待遇,一切都没得说,弹性的工作时间,很合适的午餐补助,交流会。

2012年从北京回来后,基本没遇到那种团队氛围了,勾心斗角,追求安逸的同事,损人的语言,不配合,不求成长,依赖,不思考……,似乎,想要搞好氛围,那就只有不合作,会扯蛋家常,不要比别人认真,不较真,嘻嘻哈哈才会搞好同事关系,曾经有人说过,不要改变你的个性,那你就和普通人没什么区别了,不都说不忘初心吗?

北京数年,渐渐的技能有提升时,工作得心应手,激情四射,无尽的精力,脑子可以不停的出现想法,那家不成熟制度的公司,给了我一个管理的机会,我带着那些弟弟妹妹,经常去交流技术,成长,蜕变。同样是80末,90后的弟弟妹妹,却因为他们从来不拒绝而更有激情,我也愿意教,他们也愿意学,看到他们成长,我也从来没觉得教会徒弟饿死师傅这概念,这一直是我的心态,懂得分享,才有得成长。

夜深了,回想起来,都是心酸。好累好累的身心,换个环境,再简单点,在认真中假装安逸,在安逸时还让人觉得认真。那句话:别人都在假装正经,我只好假装不正经了。

执念

最近几年,看剧的时候总能遇到这个词,执念,有执念的人一般都让人又恨又怜,结局都不会太好,也许多数是爱而不得,而我这种执念,更像是一种偏激。

当年看陈安之的成功学,感触很多,很多年,也有激励自己成长在其中,也许现在更多人对于那时的成功学,就是你成功了可以随便说,怎么说都对,那感触最深的也并不是全部,只是个别的几句,业绩不好,就是不够认真之类的。所以我对于认真,更像是较真,抓住一个小事情就不放了,学不会宽容,非常激进的去处理事情,加上本身沾火就着的脾气,容易得罪人,也容易让人不理解。

看剧的时候,特别佩服那些真有本事,但藏拙的人,总会因为太早暴露自己或许不成熟的想法后,才去领悟这藏拙有多重要。

记得在中华网那年,面试完后在我当时的博客中,疑似部门的经理给我的留言,就是不够自信。这么多年,一直没改掉这毛病,从来都是初入职场时怕自己做的不好,所以把所有会而不精的都展示出来,认为可以得到好的报酬,但其实每次也都没坚持到最后,各种处理不好的人际关系,或者一点小事爆发出来。

其实,没人了解自己罢了,当年在北京的学校,想请我回去当老师,在简单的聊了一下后,最终校长选择不用我,原因很简单,一语中的,我就是那种,外表冷酷,内心火热之人,看似不好交,其实我多么希望融进去,只不过,我从来都对于工作,太较真,太认真,我一直还以为我在北京,那个快节奏的大都市,清晨一路小跑,边吃着早点,边赶着公交地铁。

从头再来,让自己的心态更稳一些,更“谦虚”一些,学会藏拙,也许,一生只做好一件事,更好一些。所有其它的技能,就当成爱好,不扔,不忘,藏好。

重新开启BooCSS

一切重新开始,原本的一切全都扔了,空杯心态,就当做温故而知新了。

记不得什么时候停的,原有的主机商不再做主机了,一时找不到合适的,就一直让这个非常喜欢的人生第二个域名闲置在阿里云后台中,还记得续费,记得它在,没有忘记,突然又想勤奋一下,再让它重见天日,所以今天找了一下,也同时为了另一个友情网站的恢复。

一切重新开始,原本的一切全都扔了,空杯心态,就当做温故而知新了。

不再用朋友给做的那个Logo,直接简单做了一下,改了最早二级域名中一个说废话的博客,bolog.boocss.com,觉得名字起的还是好,去掉姓,加个客,就是博客,根据名字“博”加上log(日志),就当做这是一个记笔记的网站,好记性不如烂笔头子,以前对于个人博客的logo,风格,配色都要求比较高,常常是想的多,做的少,如今,一切从简,bo做成一个形似眼镜的,正好自己戴眼镜,在Log的O做成一个记录日志的小ICO,就当做,我在看我的日志。

一切想法,就来自自己曾经做过的一些不堪入目或者再回首我仍呕吐的作品收集,所以,非常急切的开通了网站,也是为了以后的以后,铺个路。