zoukankan      html  css  js  c++  java
  • css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也。虽然有遗憾有不足,也希望自己能够不断完善自身及修养。(对了还有个问题找一个时间,每天自己学习新的知识)。

            进入正题吧

    trasition(过渡)

         根据中文意思过渡,就会想到,无论你是点击,焦点等事件,它是平滑改变其属性。

         trasiton属性是复合属性,trasition(property duration timing-function delay );

    •  transition-property :规定设置过渡效果的css属性名称;子属性包含三个值:no没有属性名,all所有属性获得过渡效果,property定义css属性名;
    •  transition-duration :规定完成过渡效果需要多少秒或毫秒(time);
    •  transition-timing-function :指定过渡函数,规定速度效果的速度曲线time(子属性具体属性如下);
    •  transition-delay :指定开始出现的延迟时间(time);

           默认值分别为:all 0 ease 0 ;

           注:transition-duration 时长为0,不会产生过渡效果;

            transition-timing-function是transition中让人有疑惑的地方,说一下记住就好。

            linear规定以相同速度开始至结束的过渡效果。

            ease规定慢速开始,然后变快,然后慢速结束的过渡效果。

            ease-in规定以慢速开始的过渡效果。

            ease-out规定以慢速结束的过渡效果。

            ease-in-out规定以慢速开始和结束的过渡效果.

            cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

    transform变换

            transform主要分5类的值。转换,缩放,旋转,倾斜,透视。在JavaScript中语法是这样的object.style.transfrom=值

            值都有这些

            转换:matrix(n.n.n.n.n.n)定义2D转换,6个值得矩阵

                       matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换,16个值得4X4矩阵

                       translate(x,y)定义2D转换

                       translate3d(x,y,z)定义3D转换

                       translateX(x)转换只用于x轴

                       translateY(y)转换只用于y轴

                       translateZ(z)转换只用于z轴

            缩放 :scale(x,y)定义2D缩放

                        scale3d(x,y,z)定义3D缩放

                        scaleX(x)通过x轴的值来进行缩放

                        scaleY(y)通过y轴的值来进行缩放

                        scaleZ(z)通过z轴的值来进行缩放

            旋转:rotate(angle)定义2D旋转

                       rotate3d(x,y,z,angle)定义3D旋转

                       rotateX(angle)定义沿X轴进行旋转

                       rotateY(angle)定义沿y轴进行旋转

                       rotateZ(angle)定义沿z轴进行旋转

            倾斜:skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。

                       skew(x-angle)定义沿着 X 轴的 2D 倾斜转换。

                       skew(y-angle)定义沿着 Y 轴的 2D 倾斜转换。

           透视:perspective(n)为 3D 转换元素定义透视视图。

    animation动画

    语法: animation: name duration timing-function delay iteration-count direction;

       animation-name:规定需要绑定到选择器的 keyframe 名称。

       animation-duration:规定完成动画所花费的时间,以秒或毫秒计。

       animation-timing-funcition:规定动画的速度曲线.

       animation-delay:规定在动画开始之前的延迟。

       animation-iteration-count:规定动画应该播放的次数。

       animation-direction:规定是否应该轮流反向播放动画。

  • 相关阅读:
    Python Web学习笔记之Python多线程基础
    Python入门之python可变对象与不可变对象
    Python Web学习笔记之SOCK_STREAM和SOCK_DGRAM
    background和background-position相关笔记
    自定义switch开关
    获取浏览器类型和版本号
    随机生成字符串
    white-space详解
    文件选择按钮随笔
    mouse的各种事件
  • 原文地址:https://www.cnblogs.com/cqy1125/p/9165517.html
Copyright © 2011-2022 走看看