轩枫阁

首页 / Web前端 (第17页)

cubic-bezier贝塞尔曲线CSS3动画工具

前言

本文将解释,何为贝塞尔曲线,及其如何运用在动画中。

工具及应用

这里给出两个在线动画调试工具。

cubic-bezier还是比较少用到,PC端中,有浏览器不兼容。但是手机端中,可以使用并带来炫酷的动画及体验。

贝塞尔曲线

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋。

css3-transition

cubic-bezier即为贝塞尔曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。

而在CSS3中,常用的几个动画效果,用cubic-bezier表示分别为:

贝塞尔曲线进阶

查看全文

2015/05 11  周一

手机界面设计中12种常用布局

前言

总结下手机界面改版要考虑的布局,主要的分为以下2大类

主导航

  1. 列表式
  2. 陈列馆式
  3. 九宫馆式
  4. 选项卡式
  5. 旋转木马
  6. 行为扩展式
  7. 多面板
  8. 图表式

次导航

  1. 抽屉式
  2. 超级菜单式
  3. 弹出式
  4. 图片轮盘式

其中,所有的主要导航都可以做为次级导航,但次级导航不太适合用作主要导航 。为什么?因为次导航是隐藏起来,隐而不见、只有触发时才显示。

查看全文

2015/05 03  周日

前端开发笔面试常见问题及答案解析

前端开发面试知识点大纲:

 

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。 第一:每个特定的域名下最多生成20个cookie

IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie

cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据,叫做uerData,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。

优点:极高的扩展性和可用性

缺点:

2.浏览器本地存储

查看全文

2015/04 18  周六

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子