CSS笔记（十三）CSS3之过渡

参考：http://www.w3school.com.cn/css3/css3_transition.asp

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

 

过渡属性

下面的表格列出了所有的转换属性：

 

属性描述CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

 

　　实例１

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>
View Code

 

实例２

<!DOCTYPE html>
<html>
<head>
<style> 
.animated_div
    {
    width:65px;
    height:40px;
    background:#92B901;
    color:#ffffff;
    position:absolute;
    font-weight:bold;
    font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
    padding:20px 10px 0px 10px;
    float:left;
    margin:5px;
    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
    -webkit-border-radius:5px;
    -o-transition-property:width,height,-o-transform,background,font-size,opacity;
    -o-transition-duration:1s,1s,1s,1s,1s,1s;
    -moz-transition-property:width,height,-o-transform,background,font-size,opacity;
    -moz-transition-duration:1s,1s,1s,1s,1s,1s;
    transition-property:width,height,transform,background,font-size,opacity;
    transition-duration:1s,1s,1s,1s,1s,1s;
    border-radius:5px;
    opacity:0.4;
    }

.animated_div:hover
    {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    opacity:1;
    background:#1ec7e6;
    width:90px;
    height:60px;
    font-size:16px;
    }
</style>
</head>
<body>

<div></div>
<p class="animated_div">CSS3 过渡</p>

</body>
</html>
View Code

变化前效果：

过程中：

 

posted @ 2015-09-29 22:57  motein  阅读(146)  评论(0)  编辑  收藏  举报