CSS3

WAAPI入门

动画在Web应用中不是必须的,但是使用得好能起到锦上添花的作用。早期在Web中看到的动画主要有Flash、Gif图片动画、JavaScript动画、SVG动画、APNG动画和CSS3动画等。特别是随着浏览器对CSS3属性支持力度的提高,使用CSS3制作动画的情景在Web应用中越来越频繁。

【转载】使用 FLIP 来提高 Web 动画的性能

CSS 动画已经存在很多年了,使用恰当可以很好地提高网站的用户体验,也正是由于其容易使用,就很可能出现性能低下的动画,从而降低了整个页面的运行效率。回想一下:你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置?如果回答是肯定的,就意味着你触发了性能低下的重排或重绘计算,在某些情况下甚至可能导致页面闪烁

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

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

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

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

【转载】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)。

页面

返回顶部