轩枫阁

首页 / 搜索标签: CSS3 (第2页)

高性能 CSS3 动画优化指南

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。

关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。

然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。

目前对提升移动端CSS3动画体验的主要方法有几点:

尽可能多的利用硬件能力,如使用3D变形来开启GPU加速

查看全文

2015/02 01  周日

响应式网页设计- 移动、ipad端开发总结

前言

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。

1、特殊的meta 标签

现在我们用的智能手机(iOS,Android)的浏览器都是基于webkit内核,由于webkit的浏览器对于html5的支持比较好,所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度(如像素值)或者缩放比例如2.0(设备实际尺寸的两倍)。 查看全文

2014/11 05  周三

理解与应用CSS中伪元素:before和:after

前言

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”

post-cover

你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章

事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after。但是,就本文而言,我们将把我们探讨的范围限制在:before 和 :after这两个元素上。因此,本文中的“伪元素”将特指这两个伪元素(:before 和 :after),我们将从基础入手,来研究这个独特的主题。 查看全文

2014/10 21  周二

图片模糊滤镜效果实现方案

前言

最近很流行图片高斯模糊处理,让网站的图片看起来有高大上的效果。应用点:如网站Banner、大气背景图等。模糊背景(blurred backgrounds)是一个很常见的设计效果,也被称为背景虚化,在网页和App的设计中屡见不鲜。虚化的界面设计直观的给人一种干净自然的视觉感受,因此,模糊背景的基调会使整个界面看起来更柔美。合理运用虚化背景可以将界面效果提高一个档次。

案例素材

背景虚化案例

优秀案例参考http://www.uisdc.com/blurred-background-website-design

国外优秀案例http://www.onextrapixel.com/2013/12/06/effective-use-of-blurred-images-in-web-design/

透明效果网站http://www.uisdc.com/transparency-website-design

背景图片资源

模糊图片下载http://vdisk.weibo.com/s/dt23BkiXHbFmp

150+背景素材http://vdisk.weibo.com/s/aj4Q1htdUrYaV

模糊景观背景http://vdisk.weibo.com/s/aj4Q1hteoqwVO

模糊材质纹理http://pepsized.com/100-free-blurry-textures/

实现方案

方案一:图片高斯模糊

直接利用PS处理图片,使图片高斯模糊,调节参数可达到不同效果。 查看全文

2014/10 07  周二

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]