仓酷云

标题: 来一发CSS教程:CSS变更(transition) [打印本页]
作者: 飘灵儿    时间: 2015-1-15 23:23
标题: 来一发CSS教程:CSS变更(transition)
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。
网页制造poluoluo文章简介：我们必要的是疾速而复杂的办法来给页面增加复杂的变更(transition)效果。在本文中，你会发明很有效的关于CSS变更(transition)和怎样利用它们的信息。
译自：CSStransitions101
中文：CSS3变更进门
原JasonCranfordTeague
译者：神飞
请尊敬版权，转载请说明出处，多谢！
只管人们希冀在屏幕上有些改动，可是CSS和HTML对页面中的交互能做的其实太少了，而那些还必要用代码来完成。

好比一个链接要末是这个色彩，要末是谁人色彩；一个文本地区要末这么年夜，要末那末年夜；一张图片要末是通明的要末是不通明的；它们是从一个形态间接变到另外一个形态——两头并没有过渡。
这招致年夜部分网页有些僵硬，由于元素只会很古板的切换或改动。
是的，你可使用DHTML、jQuery大概本人编写JS来完成过分，可是这必要更多的代码来完成本应当十分复杂的功效。
我们必要的是疾速而复杂的办法来给页面增加复杂的变更(transition)效果。在本文中，你会发明很有效的关于CSS变更(transition)和怎样利用它们的信息。
几个月之前，我就倡议计划师应当入手下手利用新的CSS3手艺来完成一些它们渴求已久的基础的功效了——独一的成绩就是，这些手艺没有一个能在IE中可用，包含IE8。
一些读者以为的那些手艺将会有75%的用户看不到的概念是不靠谱的。
对那些读者我想说，“坐稳了”，由于我将要向你先容另外一个新的CSS属性，它同意你经由过程复杂的几行代码来为恣意元素增加很酷的变更效果。
CSS变更方才在CSS3中被引进，可是已被增加为webkit的扩大了。也就是说，如今它们只能用于基于webkit内核的扫瞄器，包含AppleSafari和GoogleChrome。不外从Opera10.5pre-Alpha版原本看，Opera将鄙人一个10.5中撑持CSS3变更。以是要看到本文中提到的实践效果，激烈倡议你利用Chrome大概Safari4来检察本文。
CSS变更从那里来？

变更已经只是Webkit的一部分，并且是SafariUI能做而别的扫瞄器不克不及完成的一些很酷的东东的基本。
可是W3CCSS事情组已经回绝将变更增加到它的官方特征内里，一些成员保持以为变更并不是CSS属性而经由过程剧本来处置会更好。(内牛满面啊，我前一段也有相似的概念，也和低温会商过，我以为CSS动画超越了体现的局限，交互的器材应当有剧本来完成，不外厥后在鬼哥的点拨下，才入手下手有了新的熟悉——神飞)
可是良多计划师和开辟职员，包含我本人，保持以为这的确是款式——只是静态款式，而不是我们一样平常利用的传统的静态款式。
侥幸的是，关于静态款式的争辩已成为已往。客岁三月份，来自Apple和Mozilla的代表们入手下手将CSS变更模块增加到CSS3特征内里，十分靠近Apple已增加到webkit中的体现。
关于计划加强的一个扼要先容

在我们持续之前，让我夸大一点：永久不要让网站的功效依附款式，假如该款式不是扫瞄器通用的话(也就是说，一切的经常使用扫瞄器都撑持)。
对错过的同砚再一次夸大：永久不要让网站的功效依附款式，假如该款式不是扫瞄器通用的话。
这也就是说，你可使用款式，好比变更，作为计划加强以进步用户体验——在不就义看不到它们的用户的可用性的条件下。假如你不必CSS变更还是能用并且用户仍然可以完成他们的义务，就没成绩，你就能够利用CSS变更。
起首，一些变更的设法

CSS变更将不会替换一切的DHTML，不外它会供应一些撑持过渡的办法来进步您在扫瞄器中的计划。
你必要到下载AppleSafari3+或GoogleChrome扫瞄器来检察这些变更效果。这两个扫瞄器都撑持Mac和PC体系。
转动效果

变更最多见的用法就是当用户的鼠标悬放到元素上的时分将元素高亮(不管是链接、表格、表单仍是别的的甚么元素)，变更是为页面增加光滑的界面的十分棒的办法。
例一
Link
下拉菜单

纯CSS菜单对照简单完成，而变更还可让你给菜单增加下拉和高亮效果。
例二

动画

你能够在页面上的两点之间挪动一个工具，然后利用变更给它增加动画效果。
例三
点击一下，不要摊开!
来一发CSS教程:CSS变更(transition)
登录/注册后可看大图

变更、形态与举措

可是请稍等一下。在深切懂得变更之前，我们必要了解一个元素能变更的分歧的形态。
形态界说以后页面中响应的元素怎样与用户举行交互，它们在CSS中经由过程伪类来界说，好比当用户的鼠标经由一个元素的时分，谁人元素就会被hover伪类把持。
静态伪类起感化的元素形貌:link只要链接未会见的链接:visited只要链接会见过的链接:hover一切元素鼠标经由元素:active一切元素鼠标点击元素:focus一切可被选中的元素元素被选中None一切元素一切元素的默许形态变更经由过程改动分歧元素形态之间的一个工夫段内的款式来起感化。好比，一个元素的默许形态的色彩值将会在出现hover形态的色采值之前渐渐显现色盘中的两头色彩。
一个复杂的变更

让我们假定一个复杂的变更，在用户的鼠标经由一个链接的时分，将色彩从一个变更成别的一个。与别的CSS属性一样，变更也是间接增加到要利用它的选择器中。该属性能够接纳上面的4个值。
CSSproperty

被变更的属性(好比,color)。看一下上面的表格懂得一切能够被变更的CSS属性列表。
Duration

变更延续的工夫，一般以秒来盘算(好比,.25s).
Timingfunction

同意你把持延续的工夫的盘算体例。与其利用一个复杂的线性盘算，你可使变更减速(渐进)大概加速(淡出)，大概乃至specifyabeatorcount(好比，linear).Moreonthislaterinthearticle.
Delay

在举措和变更入手下手之间守候多久，一般用秒来暗示(好比,.1s)。假如你不想提早，该值可省略。
由于变更属性始于Webkit扩大，我们不能不同时利用transition和-webkit-transition属性以向后兼容。
让我们起首提阿贾这这些属性到:hover伪类中:
  1. 12345
复制代码
  1. a:hover{color:red;-webkit-transition:color.25slinear;transition:color.25slinear;}
复制代码
那末如今，当鼠标经由一个链接，不会间接从蓝色跳转到白色，而是用四分之一秒的工夫渐渐变更它们的两头色彩(过渡色彩)。
来一发CSS教程:CSS变更(transition)
登录/注册后可看大图

固然，我们也但愿变更回到默许的链接色彩，那末我们能够增加一个变更到:link(和:visited)伪类上，并在它褪往之前增加一个复杂的提早(非常之一秒):
  1. 12345
复制代码
  1. a:link,a:visited{color:blue;-webkit-transition:color.25slinear.1s;transition:color.25slinear.1s;}
复制代码
增加多重变更

由于一个变更就是一个CSS属性，假如你在统一个CSS划定规矩中增加多个变更的实例，那末最初的谁人将会掩盖后面的，而不是增加它们。以是鄙人面的划定规矩中，独一的变更将是背景致彩：
  1. 12345678
复制代码
  1. a:hover{color:red;background-color:rgb(235,235,185);-webkit-transition:color.25slinear;transition:color.25slinear;-webkit-transition:background-color.15slinear.1;transition:background-color.15slinear.1;}
复制代码
固然，这并非说，不克不及增加多重变更——多重变更能够在统一个变更属性界说顶用逗号离隔：
  1. 123456
复制代码
  1. a:hover{color:red;background-color:rgb(235,235,185);-webkit-transition:color.25slinear,background-color.15slinear.1s;transition:color.25slinear,background-color.15slinear.1s;}
复制代码
这条界说将发生色采和背景致的两重变更。
甚么能够被变更？

几近一切的有色采、巨细或地位等组件的CSS属性，包含很多新增加的CSS3属性，都能够使用变更。一个值得注重的破例是box-shadow。
来自W3C的变更的申明，这里是一个能够付与变更的CSS属性的列表，附带变化的工具，我也高亮了一些对照有效的属性。
CSS属性改动的工具background-color色采background-image只是突变background-position百分比，长度border-bottom-color色采border-bottom-width长度border-color色采border-left-color色采border-left-width长度border-right-color色采border-right-width长度border-spacing长度border-top-color色采border-top-width长度border-width长度bottom百分比，长度color色采crop百分比font-size百分比，长度font-weight数字grid-*数目height百分比，长度left百分比，长度letter-spacing长度line-height百分比，长度，数字margin-bottom长度margin-left长度margin-right长度margin-top长度max-height百分比，长度max-width百分比，长度min-height百分比，长度min-width百分比，长度opacity数字outline-color色采outline-offset整数outline-width长度padding-bottom长度padding-left长度padding-right长度padding-top长度right百分比，长度text-indent百分比，长度text-shadow暗影top百分比，长度vertical-align百分比，长度，关头词visibility可见性width百分比，长度word-spacing百分比，长度z-index正整数zoom数字变更计时与提早

利用变更，你能够改动变更的速度，在入手下手的时分较慢然后在停止的时分减速，反之亦然，大概之间的任何事变。CSS变更有5个计时的关头词，同时也同意你本人界说你本人的计时曲线。
称号怎样事情cubic-bezier(x1,y1,x2,y2)X和Y值在0到1之间，以界说用于Timefunction的贝塞尔曲线的外形。linear均速ease渐渐慢上去ease-in减速(渐进)ease-out加速(淡出)ease-in-out减速然后加速全体变更？

变更将很快成为一切网站的尺度操纵体例，从而加强用户界面的体验。
为了给你的全部网站增加一个广泛的变更，一个做法就是增加一个变更到全部选择器，相似CSSreset。上面的代码会给页面中的一切元素增加一个默许的变更，从而同意你坚持一个一致的变更效果：
  1. 12345678910
复制代码
  1. *:link,*:visited,*:hover,*:active,*:focus{-webkit-transition:color.25slinear,background-color.25slinear,border-color.25slinear;transition:color.25slinear,background-color.25slinear,border-color.25slinear;}
复制代码
一个否决全体变更，同时明白否决利用全部选择器作为CSSreset的争辩是，将一个款式用到页面的一切元素会减缓页面的衬着。但是，我并没有发明任何有关与此的证据。有人晓得吗？
OK，实在CSS变更就这么复杂，它其实不难了解，并且你也不必些大批的JS剧本来完成它，这很便利有用，多做几回实习，你就能够纯熟的利用它了。
译注：本文原文标题为CSStransitions101，101这个数字对照欠好了解，实在美国年夜学第一门课程一般编号为101，以是101一样平常暗示进门、低级的意义。别的关于transition这个词的翻译，我之前是翻译成“转换”，可是这个翻译很别扭，在twitter上和@gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人会商后，以为翻译成“变更”更符合一些，多谢列位。——神飞
</p>
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
作者: 再现理想    时间: 2015-1-16 21:03
标题: 来一发CSS教程:CSS变更(transition)
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
作者: 小魔女    时间: 2015-1-19 05:06
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 兰色精灵    时间: 2015-1-27 22:44
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
作者: 简单生活    时间: 2015-2-5 15:55
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
作者: 再见西城    时间: 2015-2-12 23:00
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者: 飘飘悠悠    时间: 2015-3-3 11:32
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者: 因胸联盟    时间: 2015-3-11 10:59
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。
作者: 活着的死人    时间: 2015-3-18 13:45
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
作者: 山那边是海    时间: 2015-3-26 07:01
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2