纯CSS实现滚动3D字幕
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。很多年以前,在Web上实现滚动文本的动画效果一般是采用marquee
标签来实现,当然也有很多同学采用JavaScript来实现类似的效果。前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就有介绍这个案例的文章,今天将篇文章翻译出来和大家一起分享。
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。很多年以前,在Web上实现滚动文本的动画效果一般是采用marquee
标签来实现,当然也有很多同学采用JavaScript来实现类似的效果。前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就有介绍这个案例的文章,今天将篇文章翻译出来和大家一起分享。
你可以只使用HTML属性实现表单验证的效果,可以使用CSS选择器带来简洁的用户体验。但是,你需要使用一些CSS技巧让效果更好。
写 React 组件的时候,应该使用 React.createClass
语法还是 ES6 的 class
语法?或两者都不?这篇文章解释了两者之间的一些差异,希望能帮你做决定。用 ES5 或 ES6 都可以完美地写 React 组件。使用 JSX 意味着你已经需要一个「构建」步骤,也就是 Babel 将 JSX 转译(transpile)为 React.createElement
调用。很多人充分利用这点, 仅仅向 Babel 的转译列表中添加一项 es2015
,就可以自由使用 ES6 的全部特性。
在布局中,display
属性是最重要的CSS属性之一。其最常见的属性值有block
,inline
,none
,table
以及inline-block
。最近的新宠为flex
,因为它是专门为布局创建的display
属性。新出现的grid
(最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用。这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章。
在CSS中的属性值有些是使用数字的。为了让用户客户端能够确定这个值有效,就需要确保它的值是符合规范类型中的一个。这些就被称为数据类型,规范中通常写成这样<this>
。有两种数据类型:特定的和通用的。特定数据类型是一个属性或者一组属性。例如<transform-function>
数据类型被用在transform
属性的值上。另一方面,通用数据类型是可以用在任何特定的属性上。比如<length>
数据类型,可以设置一个10px
的值,它可以用在margin
、font-fize
或者其它可以用数字值的属性。在这篇文章中,将会把所有的通用数据类型给大家介绍一下。
最近,我在CodePen上看到了一个Twitter心形点赞动画。一般,如果我有时间就会研究案例代码,看是否可以进行利用或更改。在这个案例中,我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然,这可以不使用图片就可以实现,不是吗?
可缩放矢量图形(SVG)作为当今新兴的图形格式,在Web应用中往往更受偏爱。你是否也放弃了icon font或者因为浏览器对SVG良好的支持使其取代了旧的jpg、gif以及png图像格式?接下来就让我们看看这将如何影响用户的辅助功能(AT)以及如何确保每个用户都可以拥有良好的用户体验。
响应式排版是一个棘手的问题。我学习了很多的有关排版的问题,而且收集了一些非常棒的例子,比如使用相对单位,vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的,它们让我的网站更加美观,更加赏心悦目。但是,实现这些功能的过程却是非常糟糕的。在几个月的辛苦工作之后,现在我终于找到了一个可以和各位分享的一个解决方法——Typi。
介绍这个新CSS属性之前,我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知,使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中,这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持,这个新属性的前景还是不错哒~ 在规范处于中间的阶段,我将带你们获取浏览器对其最大的支持性。
CSS 资源的加载情况对浏览器渲染页面的影响很大,这是因为默认情况下浏览器只有在完成 <head>
部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着,如果 CSS 文件很大,那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题,我们将在接下来的内容中讨论一种非常规的解决方案,提高页面的渲染速度,这一方案常被称为 critical rendering path。