[自学第八天] 笔记小结-CSDN博客

本文链接：https://blog.csdn.net/m0_53892583/article/details/116463472

变形(transform)
translate(x,y) 定义2D转换,沿着X和Y轴移动元素. 位移效果
translateX(n) 定义2D转换,沿着X轴移动元素.
translateY(n) 定义2D转换,沿着Y轴移动元素.

scale(x,y) 定义2D缩放转换,改变元素的宽度和高度. 缩放效果
scaleX(n) 定义2D缩放转换,改变元素的宽度.
scaleY(n) 定义2D缩放转换,改变元素的高度.

rotate(angle) 定义2D旋转,在参数中规定角度.(-360deg,360deg)(deg角度) 旋转效果

skew(x-angle,y-angle) 定义2D倾斜旋转,沿着X和Y轴. 变形效果
skewX(angle) 定义2D倾斜旋转,沿着X轴.
skewY(angle) 定义2D倾斜旋转,沿着Y轴.

matrix(a,b,c,d,e,f) 定义2D变形,使用6个值的矩阵.表示如下:
a c e
b d f
0 0 1
matrix用一个3行3列的矩阵表示,a和b列表示x轴,c和d列表示y轴,e和f列表示z轴
a和b表示缩放(如果没有缩放,值设为1)
b和c表示扭曲(如果没有扭曲,值为0)
e和f表示位移(如果没有位移,值为0)

如果旋转角度为θ,它会影响到a,b,c,d的值:
a=cosθ
b=sinθ
c=-sinθ
d=cosθ

如果扭曲skew(θ1,θ2),会影响到b和c的值:
b=tanθ1
c=tanθ2

每次旋转和扭曲都会产生一个新矩阵,最终形成的多个矩阵要做乘法运算.¿
如果对一个元素同时有旋转、扭曲、缩放和位移,这里需要用到多个矩阵相乘,要优先考虑旋转和缩放!!!
transform-origin: 调整元素的基点
transform-origin:x-axis y-axis z-axis:
属性值:
x-axis:定义视图被置于X轴的何处.可能的值:left,center,right,length,%.
y-axis:定义视图被置于Y轴的何处.可能的值:left,center,bottom,length,%.
z-axis:定义视图被置于Z轴的何处.可能的值:length.
perspective
让子元素获取透视效果.
perspective:length|none;
主流浏览器都不支持,谷歌要加-webkit-,或者在长度后面加单位.
transform-style
在3D空间中呈现被嵌套的元素.(该属性必须与transform属性一同使用).
transform-style:flat|preserve-3d;
rotateZ
沿着Z轴的方向顺时针旋转.
transition过渡动画
1)常规用法:

transition-property  
transition-duration  
transition-timing-function  
transition-delay

2)简洁(复合)用法:
transition:property-name-list|all duration timing-function delay;

    a)要过渡的属性.可以使用的属性有:
        i)颜色:
            color background-color border-color outline-color
        ii)位置:
            background-position left right top bottom
        iii)长度:
            ma-height min-height max-width min-width height width
            border-width margin padding outline-width outline-offset
            font-size line-height text-indent vertical-aline
            border-spacing letter-spacing word-spacing
        iv)数字:
            opacity visibility z-index font-weight zoom
        v)组合:
            text-shadow transform box-shadow clip
        vi)其他
            gradient
        all:全部属性过渡
    b)duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位
    c)timing-function:动画函数
        i)linear:匀速
        ii)ease:变速(先慢后快,最后再慢)
        iii)ease-in:变速(由慢到快)
        iv)ease-out:变速(由快到慢)
        v)ease-in-out:变速(慢速开始,慢速结束)
        vi)cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间
    d)delay:动画延时时间,一般以秒(s)或毫秒(ms)为单位

关键帧动画

步骤:
        1)设置关键帧
            a)如果只有两个关键帧:
                @keyframes 动画名称{
                    0%:{样式表}
                    100%:{样式表}
                }
                或:
                @keyframes 动画名称{
                                from:{样式表}
                                to:{样式表}
                }
            b)如果是多个关键帧:
                @keyframes 动画名称{
                    0%:{样式表}
                    25%:{样式表}
                    60%:{样式表}
                    ...
                    100%:{样式表}
                }
                注意:这里的百分比一般是升序值,可以是0%-100%之间的任意值.也可以是倒序.
        2)实施动画
            a)常规用法
                animation-name:来自于@keyframes定义的动画名
                animation-duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位(默认为0)
                animation-timing-function:动画函数
                            i)linear:匀速(默认值)
                            ii)ease:变速(先慢后快,最后再慢)
                            iii)ease-in:变速(由慢到快)
                            iv)ease-out:变速(由快到慢)
                            v)ease-in-out:变速(慢速开始,慢速结束)
                            vi)cubic-bezier(n,n,n,n):自行设定变速,n的值在0-1之间
                animation-delay:动画延时时间,一般以秒(s)或毫秒(ms)为单位
                animation-iteration-count:动画循环的次数
                    1)number:按设定次数循环(默认次数为1次)
                    2)infinite:一直循环播放
                animation-direction:动画播放完后是否反向播放
                    1)normal:不反向(默认值)
                    2)alternate:反向
                animation-play-state:动画播放或停止播放
                    1)paused:停止播放
                    2)running:播放(默认值)
                animation-play-state
            b)简洁用法
                animation:name duration timing-function delay iteration-count direction;

2019-10-19