zoukankan      html  css  js  c++  java
  • CSS3 transition 属性 过渡效果

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    
    div:hover
    {
    300px;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
    
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    
    </body>
    </html>
    

    http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    100px;
    height:50px;
    background:red;
    color:white;
    font-weight:bold;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    
    #div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    
    /* Firefox 4: */
    #div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    
    /* Safari and Chrome: */
    #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    
    /* Opera: */
    #div1 {-o-transition-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
    
    div:hover
    {
    300px;
    }
    </style>
    </head>
    <body>
    
    <div id="div1" style="top:100px">linear</div>
    <div id="div2" style="top:150px">ease</div>
    <div id="div3" style="top:200px">ease-in</div>
    <div id="div4" style="top:250px">ease-out</div>
    <div id="div5" style="top:300px">ease-in-out</div>
    
    <p>请把鼠标指针移动到红色的 div 元素上,就可以看到过渡效果。</p>
    
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    
    </body>
    </html>
    

    http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function3

  • 相关阅读:
    【赵强老师】使用MongoDB的Web控制台
    【赵强老师】Oracle的PGA与数据库连接建立的过程
    【赵强老师】什么是Redis Cluster
    使用混合列压缩(HCC)创建表时,收集此表的统计信息可能会失败,会报ORA-03113,并且警报日志显示以下ORA-07445:
    2. dmdb 达梦数据库安装手册
    1.DM数据库参数说明
    IMPDP Hangs "WARNING:io_getevents timed out 600 sec"
    通过设置 events '1017 trace name context forever, level 3'; 找到帐号登录失败或者那个帐号被锁住
    oracle 12.2 pdb sqlplus 连接正常, sqldeveloper plsql 连接 hang住
    oracle 12c expdp 按用户导出 报ora-39170
  • 原文地址:https://www.cnblogs.com/viewcozy/p/4577073.html
Copyright © 2011-2022 走看看