|
[tr][td]Step1:Link transitions
开头，我们做一些基础的练习：当指上文字的时候，改变其颜色！ 代码如下： .case1 a{ color:#333; -webkit-transition:color 500ms ease-in; } .case1 a:hover{ color:#F30; } 但是需要注意的是-webkit-transition只能在webkit为引擎的浏览器中，或者说Safari和Chrome。幸运的是现在主流浏览器都已经支持transition。 我们只需要把代码改一下： a{ color:#333; transition:color 500ms ease-in; -moz-transition:color 500ms ease-in; -o-transition:color 500ms ease-in; -webkit-transition:color 500ms ease-in; } 要注意，在这个教程中，我们将关注在webkit的实现。在声明属性之后， 值为”color 500ms ease-in”。这三个值分别代表： 1、过渡的是哪个属性(例子中的color)； 2、过渡的时间(例子中用的的是500ms，我们也可以用s单位)； 3、过渡类型(例子中是的’ease-in’渐进)； 在这个例子中我们使用提ease-in，开始的时候缓慢，并加速进入过渡后样式。 Step 2 – Background Transitions 其他基础应用：当你input框获得焦点的时候改背景颜色。 代码如下： input{ width:300px; height:30px; line-height:30px; font-size:14px; background-color:#fff; transition:background-color 1s ease; -moz-transition:background-color 1s ease-in -o-transition:background-color 1s ease; -webkit-transition:background-color 1s ease; } input:focus{ background-color:#FF6; } Step 3 – Transitioning改变多个属性 正确的使用css3 transition发展鼠标悬停（鼠标指上），在支持CSS3的浏览器中可以带来更好的体验。 更进一步，我们可以把普能的transition修改成一次改变多个CSS属性。 代码如下： a{ display:block; text-decoration:none; } a .txtblock{ width:100%; text-align:center; height:30px; line-height:30px; font-size:14px; color:#333; background-color:#fcfcfc; transition-property:color,background-color; -moz-transition-property:color,background-color; -webkit-transition-property:color,background-color; -o-transition-property:color,background-color; transition-duration:1s,1s; -moz-transition-duration:1s,1s; -o-transition-duration:1s,1s; -webkit-transition-duration:1s,1s; transition-timing-function:linear,ease-in; -moz-transition-timing-function:linear,ease-in; -o-transition-timing-function:linear,ease-in; -webkit-transition-timing-function:linear,ease-in; } a:hover .txtblock{ color:#F00; background-color:#FF9; } 这次当鼠标悬停（指上）的时候，背景和文字颜色都改变了。所有我们可以使用transition同时改变两个CSS属性。 我们只是把transition分隔一下：首先我们使用”transition-property“，然后使用逗号把CSS属性分开；所以我们同时要改变的分别是背景和文字颜色。 首先我们使用transition-property设定要改变的CSS属性：transition-property:color,background-color; 再使用transition-duration设计CSS属性分别的过渡时间：transition-duration:1s,1s; 这些引用中的顺序都是和第一条中的相同，但是这里的过渡时间都是只设置为了1秒。 最后我们设置了transition-timing-function（定时功能），第一个，我们设置了linear(线性,表示匀速)，这个涉及到文字颜色，第二是涉及到背景。 因此，我们设置了文字颜色改变为linear（线性）在1秒内，设置了背景改变为ease-in(渐进)在同一个时间内： transition-timing-function:linear,ease-in; Step 4 – Putting the Pieces Together CSS3transitions开始时成为有自身特点时是和新的CSS属性是相结合的。 让我们来创建一个简单的一个弹出标志的动画； 图片：11324455nfite5pst55vf5.jpg  首先我们创建一个路标框，并确定是它是在背景下的相对定位： .signpost{ width:50px; height:300px; position:relative; margin:0 auto; padding-top:100px; } 然后路将路标杆放置在第二层，让它在路标牌的上边： #post{ width:50px; height:300px; position:relative; z-index:2; } 现在我们添加路标牌，让它在路标杆的下层，并使用CSS3 transform改变它的属性： #sign{ width:100px; height:50px; position:absolute; left:50px; top:100px; z-index:1; -webkit-transform-origin:0 0; -webkit-transform:rotate(86deg); -webkit-transition:-webkit-transform 1s ease-in-out; -moz-transform-origin:0 0; -moz-transform:rotate(86deg); -moz-transition:-moz-transform 1s ease-in-out; } 旋转路标牌是使用-webkit-transform: rotate(86deg)，并且被放放置在路标杆层下方。为了确保路标牌有合适的旋转点，我们使用了transform origin将旋转点设置为top和left都为0。 图片：11324455nfite5pst55vf5.jpg 我们设置当鼠标悬停（指上）的时候，过渡时间为1秒，使路标牌旋转到原来的位置： .signpost:hover #sign{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } 我们把悬停做成.signpost:hover，而不是做到#sign本身。 Step 5 – Introducing Animations 图片：11324455nfite5pst55vf5.jpg 现在我们可以把学东西结合起来。使用webkit animations，这个为我们提供了如连续播放动画的方法。 首先，我们要创建两个图标，然后把他们放到div中，就像我们之前做路标那样： .animations{ width:180px; height:180px; margin:0 auto; margin-top:100px; position:relative; background-color:#CCC; } #out{ width:180px; height:180px; position:absolute; left:0; top:0; z-index:1; } #in{ width:90px; height:90px; position:absolute; top:45px; left:45px; z-index:2; } 现在我们要定义动画，我们要从两个相反的方向旋转圆，所以我们要定义两个动画： @-webkit-keyframes outball{ from{ -webkit-transform:rotate(0deg); }to{ -webkit-transform:rotate(360deg); } } @-webkit-keyframes inball{ from{ -webkit-transform:rotate(0deg); }to{ -webkit-transform:rotate(-360deg); } } 动画里给出了名字作为参照，这里他们的名字是“outball”和“inball”(动画的名称可以自己随便取的)。然后我们分配一个初始值和一个最终值，让图片旋转起来从0度到360度和0度到-360度。 现在我们给这个动画悬停状态。请注意，如果我们分配到正常状态，动画会立即运行在页面加载时。 .animations:hover #out{ -webkit-animation-name:outball; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-duration:3s; } .animations:hover #in{ -webkit-animation-name:inball; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-duration:5s; } 我们先调用之前创建的动画（-webkit-animation-name:outball）然后我们设定动画运行的次数（-webkit-animation-iteration-count:infinite）infinite表示无限大，就是不停重复的播放，这里也可以写成数字的1 2 3 。 接下来我们设置动画播放方法（-webkit-animation-timing-function:linear）和时间（-webkit-animation-duration:3s）。 [/td][/tr] |
|
