CSS3 过渡 transition基础demo

过度代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <meta charset="UTF-8">
    <meta name="Author" content="haley">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>CSS3 过渡 transition</title>

    <style>
        div.ra
        {
            width:100px;
            height:100px;
            background:#00AEEF;
            transition:all 2s;
            -moz-transition:all 2s; /* Firefox 4 */
            -webkit-transition: all  2s; /* Safari and Chrome */
            -o-transition: all 2s;/* Opera */
        }
        div.ra:hover {
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
            width:300px;
            background:#0000ff;
            color:#fff;
        }
        table{
            border-collapse: collapse;border-spacing: 0;
        }
        table td,table th{
            border: 1px solid #333;
            text-align: center;
            vertical-align:middle;
            height: 30px;
            line-height: 30px;;
        }
    </style>
</head>
<body>
<div class="ra">div里面的内容</div>
<div>
    <ul>
        <li>transition的属性可以是尺寸、颜色、动画</li>
        <li>时间曲线transition-timing-function：
            <table>
                <thead>
                <tr><th>值</th><th>描述</th></tr>
                </thead>
                <tbody>
                <tr><td>linear</td><td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td></tr>
                <tr><td>ease</td><td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td></tr>
                <tr><td>ease-in</td><td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td></tr>
                <tr><td>ease-out</td><td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td></tr>
                <tr><td>ease-in-out</td><td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td></tr>
                <tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td></tr>
                </tbody>
            </table>
        </li>
        <li><a href="http://www.runoob.com/cssref/css3-pr-transition-timing-function.html">更多资料</a></li>
    </ul>
</div>
</body>
</html>

 

posted @ 2016-12-22 17:10  HALEY168  阅读(564)  评论(0)  编辑  收藏  举报