《响应式web设计》读书笔记(五)CSS3过渡、变形和动画

  • 时间:
  • 浏览:0

CSS3过渡

         未加过渡的变形

效果如下:

我想变形了

         变形要用到的属性是transform,会我不要 我我觉得跟过渡(transition)怪怪的像呢?我我觉得,它们俩的概念完正后会点容易混淆。变形是指从两种形态变为另两种形态,更强调变化前后的区别,而过渡是指变化的整个过程,更强调期间经历的过程。作者举了个例子,变形金刚擎天柱从汽车变形(transform)为机器人,里面要经过咔咔咔的过渡(transition)。

scase:用来缩放元素,放大或缩小

animation-play-state:控制动画的播放和暂停。取值为running和paused

我想变形了

       效果要是我里面你你什儿 样子啦,所有用到的css属性完正后会代码中注释说明了。上能 够就看相应的效果就得看您的浏览器的能耐了。正如作者所说,3D变形尚未成熟图片 图片 的句子。在视口厚度变化时要是我能很好的展现正确的效果。未来的成熟图片 图片 的句子以及稳点,让亲戚一些人拭目以待。

本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/archive/2013/06/10/3131377.html,如需转载请自行联系原作者

         下面让人来挨个试一下,所用到的html代码为

过渡,上能 够理解为从有一另一有1个状态缓缓变为曾经状态,含晒 整个变化过程。CSS3的过渡效果通过transition你你什儿 属性完成。它的取值是以下六个属性值的缩写:

我想变形了

translate:移动元素,可沿上下左右六个方向

         transform:matrix(1.678,-0.256,1.522,2.333,-51.533,-1.898);

animation-delay:刚开始了了前的延时

         transform:rotate(90deg);

skew:沿X轴或Y轴对元素进行斜切

         那么高级了哦。3D变形有着广阔的前景,但现在的支持度还完正后会很高,一些要是我能做大规模推广,能助 能助 为网页增加渐进增强的效果。书上作者通过有一另一有1个例子讲解了要怎样使用3D变形,我也打算亲手试一下你你什儿 例子,刚开始了了吧。

        补充说明:a标签一定要display:inline-block;能助 能助 行的通。不晓得为那此,气愤。另外为了获得浏览器的兼容,请自行加前缀。

transition-timing-function:定义过渡期间带宽要怎样变化。取值有:ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier。它们是一些贝塞尔曲线,具体可参考http://cubic-bezier.com

         好了,关于过渡的知识点就那此。我可能刚开始了了要迫不及待的试一试了。写个小例子来看看。CSS代码:

         所有关于CSS3过渡、变形、动画的内容就以上那此了。通过你你什儿 章的学习,否有了解了基本用法,更多好的效果和动画还时需多多实践才行。接下来,我想把我的博客应用上一些今天学到的东西,否有有一另一有1个小小的练手吧。代码就找不到这里展示了,用你的高端浏览器来发掘吧~

Html代码:

我想变形了

         因此 在html代码中就上能 够使用该类了:

         看出细微的差别来了吧。当鼠标移走的以后,你你什儿 过渡效果找不到。一些你你什儿 transition应该那么理解:定义元素的属性在存在变化以后的过渡效果。而完正后会:在变化的以后定义元素的过渡效果,一些从元素一生下来的以后就应该定义好了。

加了过渡的变形:

         transform:translate(40px,0);

         来看看亲戚一些人都能进行那此变形呢?transform的取值有:

         transform:scale(1.5);

         另外还有一些时需句子,要是我你你什儿 矩阵变形matrix,到底该为何会 用呢?例子中那么多乱七八糟的数字是为何会 得来的呢?事实是,它我我觉得是有难度的,时需有数学知识能助 计算出那此值了。作为初探css变形,让人不深究你你什儿 细枝末节了。可能有时需使用特殊一些的形变呢?有个现成的工具上能 够利用,http://www.useragentman.com/matrix/。上能 够让人通过傻瓜化的拖动操作,根据你拖动后的形态来为你生成公式。有兴趣上能 够试试哟。 

         首要功绩便是带宽。可能有一另一有1个新手用js写了有一另一有1个简单的动画效果(比如鼠标悬停),作为有一另一有1个自称是完美主义者的前端工程师,当然是无法忍受的。可能winter大大在场,必会指着鼻子问:我想用脸盆来喝水吗。显然,调用javascript引擎来为元素渲染样式甜得太浪费资源了。

matrix:以像素精度控制变形效果

      为何会 样,效果不错吧?好吧,我承认我抄了书上的例子代码。。。不过,作为有一另一有1个初学者我有有一另一有1个疑问,不知你否有也会有。你你什儿 transition属性为那此装入 #btn里面而不装入 #btn:hover里面呢?既然是鼠标移上去以后才刚开始了了过渡效果,那应该装入 #btn:hover里才对。

         效果如下:

CSS代码如下:

曾经就来放放看:

rotate:旋转元素,单位为厚度

把变形和上一节的过渡结合起来使用,上能 够产生柔和的变形效果,通过下面这段代码,你也可能更加清楚变形和过渡的区别。

transition-duration:过渡的持续时间,单位为秒。

transition-property:要过渡的属性名称,如background-color。设为all时过渡会被应用在每有一另一有1个可能的属性上。

我想变形了

         用js写的动画亲戚一些人完正后会陌生了,使用jQuery可能一些框架上能 够方便的制作出各种动画效果。曾经们为那此时需用CSS来做动画呢?它有那此优势呢?

         这里我定义了有一另一有1个名为shadowwords的关键帧,你你什儿 名字是上能 够随便取的。通过百分比值来定义不同阶段的样式。这里我让它的文字阴影进行变化。定义好关键帧后,就上能 够在样式中使用它了。像曾经:

animate-fill-mode:设置对象的状态。取值为none | forwards | backwards | both

         可能你是响应式设计的爱好者,后会有你你什儿 习惯,就看有一另一有1个不错的网站时,会忍不住拖动浏览器窗口的大小,看看它到底是要怎样响应视口的变化的。来看你你什儿 站点http://css-tricks.com。试着调整你的浏览器窗口,让人发现当布局存在变化时,都完正后会硬生生的蹦过去的,要是我如飞舞一般过渡完成。这时让人心一笑。请不要 小看你你什儿 些,对于有一另一有1个用户体验设计师来说,你你什儿 能触动到用户内心的会心一笑是十份宝贵的,哪怕要是我有一另一有1个瞬间。好了,你是完正后会可能猜到这是要怎样实现的了呢?很简单的一行代码:

闪烁的文字

         书上的知识点就那此啦,基本上能 够算师傅领进门的级别了。可能有更好的创意,上能 够将过渡、变形结合起来,打造更加绚丽的效果。更多关于CSS3动画的内容,上能 够访问官网http://dev.w3.org/csswg/css3-animations

animation-iteration-cound:动画循环次数,设为infinite无限循环

我想变形了

animation-timing-function:带宽变化函数

         transform:skew(10deg,2deg);

我想变形了

Html代码如下:

         里面的animation也是缩写的形式。完正的属性包括以下十几块 :

   平时在浏览网页的以后另一有1个劲会就看诸如“CSS 3D效果”、“css3动画”类事的字眼,就看效果后我我觉得很神奇,但也另一有1个劲没可能研究一下原理。可能真正项目中还没用到那此东西。但那此新的技术在不久的将来必定是要大放异彩的,这是标准的一每项呀,一定有步入正轨的那一天。趁着阅读《响应式web设计》这本书,来把这每项知识学习一下。

animation-name:关键帧名称

animation-duration:动画持续时间

CSS3过渡

         可能你的浏览器支持2D变形,相信可能就看效果了。合理利用那此变形能助 制发明的故事的故事一些意想能助 能助 的效果。

         让人像使用background一样简写那此属性,类事:transition:all 1s ease 0s。当然,完正后会拆开写的以后,比如你想指定过渡某十几块 属性,因此 让它们步调不一致,上能 够那么写:

         其次呢,其次。。。还有那此优势呢?我竟然想不来了,作者也那么提。甜得尴尬,曾经想好好捧一下CSS动画的。对不住你了。。。不过就单单提高带宽你你什儿 些来说,也值得亲戚一些人好好利用它了。因追逐高带宽而造成一些产品或企业兴衰更迭不十几块 见。

transition-delay:定义过渡刚开始了了前的延迟时间。如设置为1s,则过渡效果在1秒后刚开始了了。能助 能助 设为负值。此时过渡会立刻刚开始了了,不过过渡效果的起点为原效果的1s后。(要是我说过渡在刚开始了了以后可能悄悄跑了1秒,你没看见)

         可能你有flash基础,那做起css动画来讲甜得就太简单了,可能css动画也是基于关键帧技术。即我不要 定义整个动画过程,只需定义好关键点的样式,一些的工作都由浏览器完成。关键帧的定义语法如下: