CSS3

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

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

CSS的clip-path

在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨大的开发成本。

前端开发中的一些黑魔法Pt2

上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等,那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理,希望对您平时开发有所帮助。

前端开发中的一些黑魔法Pt1

@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》。整个PPT中介绍了一些前端开发中使用到的一些黑魔法,当初看的时候特别的带劲。一直想将里面的内容整理出一篇文章出来,但一直没整,趁最近休假的闲暇时间整理了一下。

CSS Text3: text-align-last

在CSS中对于text-align而言,大家并不会感到陌生,但对于text-align-last来说,知道的人我想并不会太多。那么今天我们来说一说这个属性。这篇文章详细介绍了文本对齐方式的另一个属性text-align-last。其主要作用就是用来设置块元素最后一行文本的对齐方式。其主要的值有autostartendleftcenterrightjustifyinherit。其实很多表现行为和text-align的取值非常的类似,其不同的是控制块元素最后一行文本对齐方式。

【转载】关于动画,你需要知道的

在浏览器里,动画实现的基本原理非常简单明了,其实就是采用定时器改变显示元素的一些属性的过程。不管是 JavaScript 操作 DOM 的动画,还是 CSS3 动画,还是 Canvas 动画,或者 SVG 动画,区别只是使用的 API、何种定时器,影响什么环境(DOM/Canvas/SVG/WebGL)。

使用 stylelint检查CSS

当你书写大量的CSS代码时,可能会出现不止一个的错误。可能需要某个工具来阻止你CSS书写的错误。可能,有的时候你的错误真的是一个bug。也有可能仅仅因为草率造成的不一致或者不明确的代码风格。可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西。事情的后果不是你可以想象的。你尝试去控制自己。你的同事也帮助你,当你游离及时纠正你的错误。但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了。后来,你或者其他人就要解决你页面CSS错误造成的问题。

CSS如何实现弹簧动画效果

CSS Animation在Web Animation中已不是新技术,不过在制作动画的时候,或许常常纠结timing-function如何使用。一般情况之下,都会使用animation-timing-function/transition-timing-function自带的几个关键词动画函数。稍为熟悉Web Animation的同学可能会使用cubic-bezier.com帮助自己创建一些timing-function。往往这一切都只是局限于使用,而不知道其原理究竟是什么。

CSS秘密花园: 沿着路径的动画

几年前,当CSS动画刚出来的时候是多么的令人兴奋,那时Chris Coyier问我,有没有什么方式使用CSS让元素绕一个圆形的路径运动。当时,它只是一个有趣的想法,但我在无意中发现有很多这方面的用例。例如,Google+添加新成员就使用了这样一个动画。当时我和Chris都没有想出一个合理的方式来解决这个问题。我们可以想出的最好方法是通过多个关键帧绘制近似一个圆形的路径,显然这不是一个好的主意,也没有任何方式能定义出来这样的圆形路径。那么我们必须得想出一个更好的方法,对吗?

CSS秘密花园: 动画状态

动画并不总是页面加载的时候就开始。往往,我们都想通过用户的操作来触发动画,比如鼠标的悬浮(:hover)或者鼠标按下时(:active)。在这种情况之下,我们可能没办法控制动画播放的实妹次数,用户可能会迫使动画停止。例如,用户有通过悬浮(:hover)触发动画:鼠标移出元素之前动画结束。在这样的例子中会发生什么呢?如果你的回答是“动画应该会呆其当前状态”或者“动画会顺利的过渡到前置状态”。默认情况下,动画就会停下来,突然跳到最初始状态。有时候可能会接受这种非常微妙的动画。但在大多数情况下它直接影响用户的体验。那么我们可以改变这种行为吗?

页面

返回顶部