• css3动画实例测试


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

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

    a:要变换的属性;

    b:过渡时间;

    c:运动方式;

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

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

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

    div:hover{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>
  • 相关阅读:
    Java 实现 HDFS 文件基本操作
    [git] branch 分支操作
    Java基本语法-----java流程控制语句
    Java基本语法-----java运算符的优先级与结合性
    Java基本语法-----java数据类型的转换
    CSDN发表文章后老是待审核的原因
    Java基本语法-----java变量
    Java基本语法-----java进制的转换
    Java基本语法-----java常量
    Java基本语法-----java注释
  • 原文地址:https://www.cnblogs.com/cainiaoz/p/5481726.html
Copyright © 2020-2023  润新知