事情是这样的，前天上午产品经理说想要做一个心愿墙，问我能不能行 我心想，这太容易了，但为了多摸一天鱼，我说还是有点挑战的 结果下午，产品经理和设计师就给我发来了设计参考 他们说，心愿墙的设计大致是这样

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动…

巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs

写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？ 修改 outline-offset 到一个合适的负值 ，那么在恰当的时候，outli…

周报将 Web 动画大致分为三类：CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示，方便读者有针对性的学习。 1. 《Twitch App 加载动画》 作者：Daniel Hearn 这是作者为 Twitch 制作的加载动画。平时打游戏的同…

今年Q1（2020年第一季度）参与了京喜事业部「京喜工厂」业务的前端开发。用户可以通过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”，既能趣味造物，又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。 活动在上线一个月后，PV达到千万的量级，引人注目。有不少前端同学…

作为一个对UI和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。 接下来，我将给大家介绍几款web/python/vue/react里漂亮得不行的开源库/实现。 1. 手绘风图表库：roughViz.js 基于D3(v5), roughjs, 和handy。…

在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了✋5个分享给大家, 希望大家喜欢. 参过参数可以只是单/多行. 移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细"可以使用下面的代码. 不同像素密度比的设备都可以兼容(pc/手机…

1. 普通字符 2. unicode 3. attr函数 4. url函数 5. counter函数 6. css变量 1. 当a标签内容为空时，显示其href属性里面的值： 2. 面包屑跟分隔符 3. 进度条 4. tooltip提示 5. 计算checkbox选中的个数 6…