现代 CSS

函数式编程术语解析

函数式编程蔚然成风,越来越多的开源项目、技术交流在使用函数式编程的术语降低开发或沟通成本,这无形中对不了解函数式编程的开发者造成了一定的学习门槛,翻译本文的初衷就是要普及函数式编程的基本知识,从新的角度扩展编程思维。至于为什么要使用 JavaScript 演示函数式编程,一方面是因为 JavaScript 的特性在很多方面与函数式编程浑然天成,另一方面是因为 JavaScript 是世界上最 XX 的语言……

纯CSS实现Scroll Indicator(滚动指示器)

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。

使用Express Server和Handlebars优化Critical-Path性能

最近,我在一个React同构网站工作。这个网站建立在React上,运行于Express服务器上。一切都进行得十分顺利,但是我仍对CSS包的加载阻塞不满意。因此,我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

接受前端挑战:用CSS实现3D立方体

你喜欢挑战么?你愿意承担一项以前从没遇到过的任务并且按时完成么?如果在进行任务中,你碰到来一个似乎无法解决的问题呢?我想分享我使用CSS 3D效果的经历,那是第一次用于实际项目中,以此来激励你接受挑战。那是平常的一天,当Eugene( CreativePeople的经理)写信给我的时候。他寄给我一个视频,说他正在为一个新项目开发一个概念,而且想知道我是否可能开发一个像视频里那样的东西。这是一个绕着一个轴旋转的3D物体(准确地说是个立方体)。对于用CSS 3D工作我已经有一些经验了,于是我的脑海里开始形成一个解决方案。我Google搜索了像“CSS 3D cube”这样的关键词来确认我的想法,随后我回复Eugene说我可以。

【转载】让你彻底地、永久地搞懂JavaScript的==

大家知道,==是JavaScript中比较复杂的一个运算符。它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一。在仔细阅读了ECMAScript规范的基础上,我画了一张图,我想通过它你会彻底地搞清楚关于==的一切。同时,我也试图通过此文向大家证明==并不是那么糟糕的东西,它很容易掌握,甚至看起来很合理。

JavaScript运算符:递增和递减

JavaScript中的递增和递减运算符都是一元操作符,言外之意就是只能操作一个值的操作符。递增和递减操作符直接借鉴自C语言,各有两种版本:前置型(递增++i,递减--i)和后置型(递增i++,递减i--)。在JavaScript中,递增(递减)的前置和后置运算符对于初学者都非常容易混淆。我就属于这一类型,这次下定决心把这两者的使用和不同之处了解清楚。如果你和我一样,不仿一起来了解一二。

使用Sass来定义Keyframes

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes,让动画可以根据帧定制不同的动画效果。

SVG动画案例的学习

平面设计已成为2016年可见的趋势,显然,这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中,我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

【转载】CSS分层动画可以让元素沿弧形路径运动

CSS 的 animations (动画)transitions(变换)擅于实现从点 A 到点 B 的直线运动,运动轨迹是直线路径。给一个元素添加了 animation 或者 transition 以后,无论你如何调整贝塞尔曲线,都无法让它沿着弧形路径运动。你可以通过自定义 timing function 属性,做出弹动的效果,但是它沿着 XY 轴相对移动的值永远是相同的。

CSS的motion-path属性

在CSS中要实现一个动画按一个指定的路径运动,相对而言是较为困难的。虽然通过transform能模拟出来一定的效果,但要达到很完美的效果是非常的痛苦的,也较为困难的。那么今天给大家介绍的motion-path属性虽然 还未成为W3C中的正式规范,但这个属性能帮助大家轻易实现一个动画按指定路径运动。

页面

返回顶部