codepen.io
获得徽章 0
你的爱情信号满格了吗，使用:nth-child()和变量绘制信号彩带
不要小看这个动画喔，34行CSS代码，巧妙运用到以下知识点
BFC+CSS变量遍历+CSS变量组合计算+滤镜色相旋转+反向动画+Flexbox底部基线对齐
线上演示：
codepen.io更多CSS骚操作：juejin.im 展开633- 【阴阳】加载动画 #svg
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)展开344 - 大家好，我是腾讯 Omi 框架(github.com) 和 Cax 渲染引擎作者，AlloyTeam 开源负责人之一 dntzhang(张磊)。
我是 2009 年接触的前端，一干就是十年。日月流转，岁月杀猪，细数过去十年，创过业，当过老师，做过游戏，办过工作室，做过独立开发者，也炒过股，做过直销，各种折腾，没赚到钱，甚至亏损，但收获颇丰。体验了世态炎凉，感受过资本贪婪，眼看生活黑暗没有尽头，却能在混混沌沌中看到希望。在 2015 年初举家从北京迁移到了深圳，加入腾讯。来了腾讯之后，已是一双儿女的父亲，变得越来越保守和求稳，不敢再大动作折腾，就只折腾技术。我热爱编程且一直在一线编程，希望再干一个十年。
前端高速发展这十年，从刀耕火种(各种模板引擎，各种模块化框架，各种打包工具各种批处理)到现代化统一科技(webpack，jsx，babel，typescript，web components，小程序云开发)，微信小程序更加扩大了前端的边界，将开发体验和用户体验做到了前所未有的高度，这一批技术的背后是一批伟大的公司(谷歌、脸书、腾讯、微软)，是一批优秀工程师日夜打磨，是一厢让世界更低成本运作、让世界更美好的愿景。新生事物的产生都有其背后设计的哲学，不该只学习技术本身，更应了解其产生的动机和原因，这样在面对新生事物和学习之时能够更加从容。
我在 2019.03.26 - 2019.03.28 期间将挑选有趣、有典型性、有意义的问题回答，你们可以问我 「前端开发」、「学习成长」、「时间管理」、「Omi框架」、「Web Components」、「图形·可视化」、「小程序·云开发」等相关问题。展开232104
