CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3 Transitions(基础)

CSS3 Transitions(基础)

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属性是相结合的。
让我们来创建一个简单的一个弹出标志的动画;



首先我们创建一个路标框,并确定是它是在背景下的相对定位:
.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。



我们设置当鼠标悬停(指上)的时候,过渡时间为1秒,使路标牌旋转到原来的位置:
.signpost:hover #sign{    -webkit-transform:rotate(0deg);    -moz-transform:rotate(0deg);}
我们把悬停做成.signpost:hover,而不是做到#sign本身。

Step 5 – Introducing Animations

现在我们可以把学东西结合起来。使用webkit animations,这个为我们提供了如连续播放动画的方法。
首先,我们要创建两个图标,然后把他们放到div中,就像我们之前做路标那样:
<div class="animations">    <img id="out" src="images/out.png" />    <img id="in" src="images/in.png" /></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)。

【CSS3 Transitions(基础)】相关文章

1. CSS3 Transitions(基础)

2. CSS3 Transitions, Transforms和Animation使用简介与应用展

3. Telefónica与Mozilla开拓基于HTML5互联网设备

4. 关于CSS3 Transitions的小例子

5. CSS Transition (CSS过渡效果)入门

6. CSS3 transition实现超酷图片墙动画效果

7. CSS3 transition实现超酷图片墙动画效果

8. 纯css3 transforms 3D文字翻开翻转3D开放式效果

9. 使用 CSS3 Transforms 构建圆形导航

10. WebKit CSS3 动画基础

本文来源:https://www.51html5.com/a852.html

点击展开全部

﹝CSS3 Transitions(基础)﹞相关内容

「CSS3 Transitions(基础)」相关专题

其它栏目

也许您还喜欢