css3动画实例测试

1.css3动画属性分析(2016-5-11)

1.transition: 规定属性变换规则，可以这样讲。transition(a,b,c,d);

a:要变换的属性；

b:过渡时间；

c:运动方式；

d：需要延迟多久开始执行该动画

ex：<div class="exdiv">测试div</div>

.exdiv{width:200px;height:100px; transition:width 2s ease-in 2s}

div:hover{width:500px};

该实例说明党鼠标移入div时，延迟2s后该div宽度会2s内变为500px;

2.transform:我们能够对元素进行移动、缩放、转动、拉长或拉伸。

改属性2d变换有以下属性

• translate()
• rotate()
• scale()
• skew()
• matrix()

translate(x,y):对元素进行位移；

ex：<div class="exdiv">测试div</div>

.exdiv{transform:translate(50px,100px)}表示div从当前位置left移动50px,top移动100px;

rotate(x)：对元素进行角度旋转

.exdiv{transform:rotate(50deg)}标书div顺时针旋转50个角度

scale(x,y)：对元素进行角度旋转

.exdiv{transform:scale(2,4)}表示div宽度增加到原始尺寸的2倍，高度增加到原始尺寸的4倍

skew(x,y) 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

.exdiv{ transform:skew(30deg,20deg)} 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

 

html5动画效果示例：

1.tab切换

<style>
/**css3选项卡**/
    .tab-main{ position:relative; width:300px; height:300px; margin:30px;}
    .tab-main  input{ position:relative; float:left; opacity:0; z-index:9999; width:33.33%; height:30px; background:#ccc; border-radius:5px 5px 0 0;}
    .tab-main .content{ position:absolute; top:30px; width:300px; height:200px; border-top:none;border:1px solid #ccc;}
    .tab-main > .ys{ transiton:all .5s; cursor:alias; text-align:center; line-height:30px; font-size:14px; position:absolute; top:0;width:100px; height:30px; background-color:#ccc; border-radius:5px 5px 0 0;}
    #tab-1+.ys{ left:0;}
    #tab-2+.ys{ left:33.33%;}
    #tab-3+.ys{ left:66.66%;}
    .tab-main > input:checked+.ys{ height:27px; background-color:#fff; color:#09F; border-bottom:3px solid #09F}
    .tab-main > .content section{ display:none}
    #tab-1:checked~.content #tab-item-1{ display:block}
    #tab-2:checked~.content #tab-item-2{ display:block}
    #tab-3:checked~.content #tab-item-3{ display:block}
</style>

<div class="tab-main">
        <input type="radio" id="tab-1" name="tab" checked>
        <span href="#tab-item-1" class="ys">首页</span>
        
        <input type="radio" id="tab-2" name="tab">
        <span href="#tab-item-2" class="ys">分页1</span>
        
        <input type="radio" id="tab-3" name="tab">
        <span href="#tab-item-3" class="ys">分页2</span>
        <div class="line ease"></div>
        
        <div class="content">
            <section id="tab-item-1"><div>首页 介绍</div></section>
            <section id="tab-item-2"><div>分页1介绍</div></section>
            <section id="tab-item-3"><div>分页2介绍</div></section>
        </div>    
    </div>