css3中变形函数（同样是对元素来说的）和元素通过改变自身属性达到动画效果

  /*对元素进行改变（移动、变形、伸缩、扭曲）*/

  .wrapper{

    margin:100px 100px auto auto;

    width:300px;

    height:200px;

    border:2px dotted blue;

 }

 .wrapper div{

     width:300px;

     height:200px;

     background:red;

     color:blue;/*设置文本颜色  如果有的话*/

     text-align:center;/* 设置文本位置  如果子元素有的话 */

     line-height:200px;/* 设置行间距 */

     border-radius:30px;/* 设置角半径 */

     /*属性*/

     transform-origin:top right;/*设置元素的中心点 top center right left bottom  合理的情况下任意两两组合 例如 top right  表示右上角*/

     /*函数*/

     transform:rotate(20deg);/* 旋转20°，整数表示顺时针，负数表示逆时针 */

     transform:skew(15deg,20deg);/*x轴扭曲15°，y轴扭曲20°*/

     transform:scale(1.5,0.5);/*根据中心点x方向放大1.5倍 y轴缩小0.5倍*/

     transform:translate(-100px,50px);/*沿x轴负方向移动100px，沿y轴正方向移动

     50px*/

    }

  span{

        display:block;/* 转换为块状元素 */

         }

   通过鼠标的点击、获得焦点，被点击或对元素的任何改变中触发，并平滑的以动画的效果改变css的属性值
对元素用到的四个属性为：

transition-property：width;//表示对那个属性进行变化
transition-duration：5s;//表示动画持续的时间
transition-timing-function：ease；
transition-delay：0.5s;//表示动画延时时间

例子：
 1    .wrapper{

    margin:auto;

    width:300px;

    height:200px;

    border:2px dotted blue;

    transition-property:all;/*表示hover事件中的所有属性，改成width的话就只对width有

                                            效，而height会瞬间变为50px不具有过度效果*/

    transition-duration:5s;/*表示动画的持续时间*/

    transition-timing-function:ease-in;/*表示动画的播放方式由快到慢*/

    transition-delay:0.15s;/*表示动画的延时时间*/

 }

 .wrapper:hover

 {

   width:500px;

   height:50px;

 }

巴特西

css3中变形函数（同样是对元素来说的）和元素通过改变自身属性达到动画效果

最新文章

热门文章