css transition过渡

当前位置 : 首页 > 网页制作 > CSS > css transition过渡

css transition过渡

来源: 作者: 时间:2016-01-20 09:22
css过渡效果transition设置过渡,transition的属性包括如下图:设置格式为了不同浏览器的效果,需要为其它几种添加相应的前缀标识: transition: width 2s; -moz-transition: width 2s; ...
css过渡效果
transition设置过渡,transition的属性包括如下图:
 
设置格式 
为了不同的效果,需要为其它几种添加相应的前缀标识:
              transition: width 2s;
     -moz-transition: width 2s;      /* Firefox 4 */
 -webkit-transition: width 2s;       /* Safari 和 Chrome */
         -o-transition: width 2s;       /* Opera */
如下:   
width属性会改变, 用时1秒,速度样式匀速,延时1秒。
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;   //过渡效果
transition-delay:1s;   //过渡延时
简写格式:transition:width 1s linear 1s;
 
也可以多属性样式改变,如下:
width,height,transform属性会改变,对应的样式用时1秒中,过渡效果为linear(匀速),延时1秒
transition-property:width, height,transform;
transition-duration:1s,1s,1s,;
transition-timing-function:linear;   //过渡效果
transition-delay:1s;   //过渡延时
简写格式:transition:width 1s,height 1s,transform 1s;
以上之后,确定属性改变的时候,可以是在鼠标放在元素上之后:
元素:hover{
            width: 150px;
            height: 150px;
            transform:rotate(360deg);
}需要为其它几种添加相应的前缀标识:
这样就ok 了。!
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css的过渡</title>
    <style>
        #test{
            width: 1000px;
            margin: auto;
            text-align: center;
        }
        .demo{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
            display: inline-block;
            background: red;
            transition-property: width,height,transform;
            transition-duration: 1s;
            transition-timing-function: linear;
            /* Firefox 4 */
            -moz-transition-property:width,height,transform;
            -moz-transition-duration:1s;
            -moz-transition-timing-function:linear;
            /* Safari 和 Chrome */
            -webkit-transition-property:width,height,transform;
            -webkit-transition-duration:1s;
            -webkit-transition-timing-function:linear,transform;
            /* Opera */
            -o-transition-property:width,height,transform;
            -o-transition-duration:1s;
            -o-transition-timing-function:linear;
        }
        .demo:hover{
            width: 150px;
            height: 150px;
            line-height: 150px;
            background-color: red;
            transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
            -o-transform:rotate(360deg);
        }
    </style>
</head>
<body>
<div id="test">
    <div class="demo" style="background-color: yellowgreen">hello word!</div>
    <div class="demo" style="background-color: greenyellow">语法</div>
    <div class="demo" style="background-color: dodgerblue">object</div>
    <div class="demo" style="background-color: chartreuse">c++</div>
    <div class="demo" style="background-color: palevioletred">java</div>
</div>
</body>
</>

 


Tag:
上一篇:html/css笔记
下一篇:Html 语法学习笔记三
网友评论

<