css
lijc_boke
热爱前端的小伙子
展开
-
CSS深入理解之vertical-align
vertical-align 属性设置元素的垂直对齐方式。 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐(负长度值和百分比值).vertical-align 的百分比值 基于 相对于line-length 计算。(ie6,7下,百分比不支持小数line-length)。应用与inline水平和table-cell元素:inline: ,未知元素in原创 2016-04-11 22:24:22 · 284 阅读 · 0 评论 -
高性能 CSS3 动画
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种转载 2017-03-10 20:34:03 · 361 阅读 · 0 评论 -
CSS3实现60帧的动画
在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用CSS3实现动画,但许多人用的都不够恰当。很多应加以考虑的最佳实践常在移动端上实现动画很简单。在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用 CSS3 实现动画,但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略,因为仍然有人不明白这转载 2017-03-10 20:27:50 · 1641 阅读 · 0 评论 -
css动画性能优化
引言随着网页功能变得愈发复杂和精细,以及手机端H5发展中所遇到的硬件性能瓶颈,网页的运行时性能问题变得越来越突出。而用户对于网页运行时性能最直观的感受,莫过于UI操作的流畅程度。流畅或卡顿,爽或不爽,皆在于每个UI动画细节之间。本文旨在帮助理解动画卡顿与流畅的原因,卡顿问题的调试方法,以及从实践中总结出实现流畅动画的规律。为构建操作流畅的网页提供参考。索引量化动画的流畅原创 2017-03-10 20:24:53 · 2825 阅读 · 0 评论 -
Flex 布局语法教程
由于老是记不住单词,哎,或者是老了网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得原创 2017-03-06 22:53:15 · 215 阅读 · 0 评论 -
1px像素的实现
.border{ position: relative; } .border::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top:1px solid rgba(7,17,27,0.1); conten原创 2017-02-03 13:04:40 · 1093 阅读 · 0 评论 -
优化CSS重排重绘与浏览器性能
浏览器的渲染机制浏览器渲染展示网页的过程,大致分为以下几个步骤:解析HTML(HTML Parser)构建DOM树(DOM Tree)渲染树构建(Render Tree)绘制渲染树(Painting)慎重选择高消耗的样式什么 CSS 属性是高消耗的?就是那些绘制前需要浏览器进行大量计算的属性。box-shadowsbord原创 2017-02-23 21:48:22 · 796 阅读 · 0 评论 -
如何处理CSS3属性前缀
Grunt中配置Autoprefixer假设你的环境中已具备了Grunt的运行环境,如果没有请先移步Grunt官网了解,这里不做过多阐述。在Github中有一个grunt-autoprefixer的插件,按照其官方提示,我在命令行中执行了下面的语句:npm install grunt-autoprefixer --save-dev命令终端提示:似乎没有转载 2016-11-13 19:54:17 · 1112 阅读 · 0 评论 -
CSS动画的性能优化
CSS动画的性能优化在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子,Stripe Checkout小组通过UI动画效果来增强支付体验。图片来自@michaelvillar的Improve the payment experience with animations可见通过UI动画来优化用户体验是转载 2017-03-10 20:38:56 · 918 阅读 · 0 评论