疯狂H5笔记 - 变形与动画相关属性

来源：互联网发布：pdf转换word软件编辑：程序博客网时间：2024/06/06 18:38

1.变形支持：

1.transform：用于设置变形，该属性支持如下一个或多个变形函数：    translate(tx,ty)：设置目标组件横向x移动tx距离，纵向y移动ty距离，可以省略ty，表示ty=0.即纵向上没有位移    translateX(tx)：设置目标组件横向x移动tx距离    translateY(ty)：设置目标组件纵向y移动ty距离    scale(sx,sy)：设置目标组件横向缩放tx比例，纵向缩放ty比例。可以省略sy，表示ty=tx，也就是保持横纵比    scaleX(sx)：设置目标组件横向缩放sx比例    scaleY(sy)：设置目标组件纵向缩放sy比例    skew（sx，sy）：设置目标组件沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度，可以省略sy，表示sy=0，即Y轴不倾斜    skewX（sx）：设置目标组件沿着X轴倾斜sx角度    skewY（sy）：设置目标组件沿着Y轴倾斜sy角度    matrix（m11,m12,m21,m22,dx,dy）：后面笔记2.transform-origin：设置变形的中心点。属性值为两个值，分别表示XCenter YCenter，其中属性值支持如下几种：    left/top/right/bottom：指定旋转中心点位于目标组件的左边界、上边界、右边界、下边界。其中top/bottom只能指定给YCenter，left/right只能指定给XCenter    center：指定旋转中心点位于目标组件的中心    自定义值、百分比

变形实例：

<!Doctype html><html>    <head>        <meta http-equiv="author" content="chengxi" />        <meta http-equiv="keywords" content="transform,style" />        <title>变形实例</title>    </head>    <body>        <style>            div{                width: 200px;                height: 50px;                border: 2px solid green;                padding: 14px 26px;                -moz-box-sizing: padding-box;                overflow: hidden;                margin-top: 30px;            }            #div2{                transform: translate(20px,20px);            }            #div3{                transform: scale(1.1,0.9);            }            #div4{                transform: skew(30deg,30deg) ;            }        </style>        <div id="div1">            变形前        </div>        <div id="div2">            translate(20px,20px)        </div>        <div id="div3">            scale(1.1,0.9)        </div>        <div id="div4">            skew(30deg,30deg)        </div>    </body></html>

也可以使用transform-origin属性指定变形的中心点

<style>    div{        tranform-origin: top left;    }</style>

2.使用矩阵变换matrix函数:

matrix函数的形式:matrix(m11,m12,m21,m22,dx,dy)。transform定义了该函数之后，变换后的各点坐标计算方式(假设变化前坐标为x,y):(x*m11+y*m21+dx,x*m12+y*m22+dy)

3.动画相关属性

transition：属性值包括下面四个部分：    transition-property：指定对目标元素的哪个CSS属性进行平滑渐变处理    transition-duration：指定属性平滑渐变的持续时间    transition-timing-function：指定渐变的速度，支持如下属性值：        ease：开始较慢，然后速度加快，最后到达最大速度后再减速        linear：一直保持匀速不变        ease-in：开始速度较慢，然后速度加快        ease-out：开始速度很快，然后速度减慢        ease-in-out：同ease        cubic-bezier（x1,y1,x2,y2）：通过贝济埃曲线来控制动画的速度    transition-delay：指定动画开始时的延迟时间目前，朱浏览器还不支持标准transition属性，因此使用该属性时还需要添加不同浏览器厂商的前缀

动画实例：

<style>            div{                width: 200px;                height: 100px;                border: 2px solid green;                background-color: red;                padding: 10px;                /*设置对div的背景颜色添加平滑渐变的动画效果*/                -moz-transition: background-color 2s linear;                -webit-transition: background-color 2s linear;                -o-transition: background-color 2s linear;                -ms-transition: background-color 2s linear;            }            /*设置当鼠标移上来时div的背景颜色改变*/            div:hover{                background-color: yellow;            }        </style>        <div>            鼠标一上来会发生背景颜色的渐变        </div>

transition属性还支持一次性定义多个属性的动画效果：
实现鼠标控制气球位置:

<style>    img{        position: absolute;        /*设置图片的top和left添加平滑渐变的动画特效*/        -moz-transition: left 5s linear,top 5s linear;        -webkit-transition: left 5s linear,top 5s linear;        -o-transition: left 5s linear,top 5s linear;    }</style><script>    //添加鼠标点击事件，图片到达点击的位置    window.onload = function(){        var target = document.getElementById("target");        document.onmousedown = function(event){            target.style.left = event.pageX + "px" ;            target.style.top = event.pageY + "px" ;        };    };</script><img id="target" src="my.jpg" alt="个人图片" />

3.CSS3还提供了Animation动画支持，允许开发这定义多个关键帧：

animation-name：指定动画名称，该属性指定一个已经定义了的关键帧animation-duration：指定动画的持续时间animation-timing-function：指定动画的变化速度animation-delay：指定动画延迟多长时间才开始执行animation-iteration-count：指定动画的循环执行次数animation：这是一个复合属性，可以同时指定上面的所有的属性定义关键帧的形式：    keyframes 关键帧名称{        from|to|百分比{            属性1：属性值1；            属性2：属性值2；            属性3：属性值3；            ...        }        ...    }

使用animation动画实现导航栏鱼眼效果:

<style>            div{                width: 500px;                height: 300px;                margin: 0 auto;            }            div a{                display: block;                width: 80px;                height: 25px;                border: 1px solid darkgrey;                float: left;                text-decoration: none;                border-radius: 20px;                text-align: center;            }            /*定义关键帧*/            @-webkit-keyframes 'fisheye' {                0% {                    -webkit-transform: scale(1) ;                    background-color: #eee;                    border-radius: 10px;                }                40% {                    -webkit-transform: scale(1.6) ;                    background-color: #eee;                    border-radius: 10px;                }                100% {                    -webkit-transform: scale(1);                    background-color: #eee;                    border-radius: 10px;            }            div>a:hover{                -webkit-animation-name: 'fisheye';                -webkit-animation-duration: 3s;                -webkit-animation-iteration-count: infinite;            }            div>a:active{                color: slateblue;            }</style>        <div>            <a href="#">java</a>            <a href="#">ajax</a>            <a href="#">web</a>            <a href="#">struts2</a>        </div>

0 0