学习心得分享/移动互联应用个人总结

一、CSS动画

一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画

1、元素2D变换transform

transform 变换，始终是参考当前状态进行变换

1.1.1、平移（translate）

transform: translate(100px, 200px);

第一个参数: x轴的平移量，正方向向右 

第二个参数: y轴的平移量，正方向向下 

填一个参数的话，只有横坐标进行了平移 

1.1.2、旋转（rotate）

参数代表旋转的角度（代表角度的单位是 deg，代表弧度的单位是 rad）

元素的旋转角度是参考的元素的正上方

顺时针旋转为正方向

旋转中心默认为元素中心

/* 左右镜像 */
transform: rotateY(180deg);
/* 上下镜像 */
transform: rotateX(180deg);

1.1.3、缩放（scale）

参数代表的是缩放比例，值为1 则为原始大小

transform: scale(1, 0.5);

参数只写一个，代表的是水平和竖直方向缩放相同的比例 ：transform: scale(3);

负数代表的就是在指定轴上的镜像：transform: scale(-0.5, 1);

隐藏元素的方法：将缩放调为0：transform: scale(0);

1.1.4、倾斜（skew）

第一个参数: 水平轴的倾斜度数

第二个参数: 竖直轴的倾斜度数：transform: skew(0, 30deg);

只设置一个参数 则只有水平轴倾斜有效 ： transform: skew(30deg);

1.1.5、变换的原点（transform-origin）

原点的位置会影响旋转的圆心，缩放的位置

值的带选项：center, top, bottom, left, right, 还可以写具体的长度值原点

若x值和y值都为0，代表的是元素左上角的位置

第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动

第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动

2、过渡动画（transition）

transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态

/* transition复合属性可以拆解成以下属性 */

            /* 过渡属性：声明一个需要产生过渡动画的属性 */
            /* 可以同时声明多个属性，属性之间用逗号隔开 */
            /* 待选项：
                all: 代表所有属性
                none: 没有任何属性
             */
            transition-property: opacity, transform;
            transition-property: all;

            /* 补间动画的时长 */
            transition-duration: 1s;
            transition-duration: 1000ms;

            /* 补间动画的速度曲线 */
            /* 带选项：
                linear: 匀速播放动画
                ease-in: 慢进匀速出
                ease-out: 匀速进慢出
                ease-in-out: 慢进慢出
                steps(n): 声明有n个过渡阶段
             */
            transition-timing-function: linear;

            /* 除了使用预制带选项，也可以手动赋值如下： */
            transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);

            /* steps 函数 */
            transition-timing-function: steps(5);

            /* 延迟播放动画的时间 */
            transition-delay: 1s;

            /* 使用transition属性设置所有的过渡动画属性 */
            /* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */

3、animation动画

/* animation动画 */
        /* animation和transition的区别： */
        /* transition 是通过属性变化，而产生过渡状态，而由浏览器自动创建补间动画 */
        /* transition 在浏览器上动态修改css属性后，依然可以播放过渡动画 */
        /* animation的状态是事先定义好的，后续改变css属性也不会播放新的动画 */
        /* animation的动画状态不止起始状态和结尾状态，可以定义多个状态 */

        /* animation是一个复合属性，由以下属性构成： */


        .box {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 动画名称 */
            /* 作用：用于告诉浏览器，该动画应用哪一个动画关键帧序列 */
            animation-name: move;

            /* 动画播放时长 */
            animation-duration: 2s;

            /* 动画播放的速度曲线 */
            animation-timing-function: linear;

            /* 延迟播放的时间 */
            /* animation-delay: 1s; */

            /* 动画播放次数 */
            /* 带选项：
                infinite: 无限循环播放
             */
            /* animation-iteration-count: infinite; */
            /* animation-iteration-count: 2; */

            /* 动画播放方向 */
            /* 带选项：
                normal：正向播放
                reverse: 反向播放
                alternate: 正向播放一次然后反向再播放一次
                alternate-reverse: 反向播放一次然后正向再播放一次
             */
            /* animation-direction: alternate-reverse; */

            /* 播放结束后，元素的最终状态模式 */
            /* 
                带选项：
                forwards：动画播放完后，保留最后一帧的状态
                backwards：动画播放完后，保留第一帧的状态
                both：动画播放完后，保留第一帧和最后一帧的状态和
             */
            animation-fill-mode: forwards;


            /* 可以定义复合属性，取代上面的所有属性 */
            /* 赋值顺序，可以参考如下顺序 */
            /* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
            /* duration | timing-function | delay | name */
            /* duration | name */
            animation: move 2s linear 0s forwards;
        }

        /* 关键帧：动画播放时的几个关键状态 */
        /* 序列：有序的队列 */

        /* 定义一个关键帧序列 如下： */
        /* 使用@keyframes定义关键帧序列，后面参数为：动画名 */

        @keyframes move {

            /* 起始状态 */
            /* from { */
            0% {
                transform: translateX(0);
                color: #000;
                font-size: 16px;
            }

            /* 用百分比定义中间状态 */
            50% {
                transform: translateX(1000px);
                color: pink;
                font-size: 32px;
            }

            /* 结束状态 */
            /* to { */
            100% {
                transform: translateX(500px);
                color: green;
                font-size: 64px;
            }
}

1.3.1、动画事件

animationend                动画播放完成

animationstart               动画开始播放

animationiteration         动画重复播放   

4、3D变换

开启3d变换：transform-style: preserve-3d;

设置灭点距离屏幕的距离：perspective: 500px;

3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）

要使用3d变换需要依序执行以下步骤：

1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

2. 在父元素上设置透视距离：perspective: 100px;

3. 给场景添加演员，给场景元素添加子元素

4. 在子元素上使用3d变换

5、渐变色分栏布局与响应式

1.5.1、渐变色

注：渐变色的值，适用于 background-image 属性，而不是 background-color

线性渐变：linear-gradient

        第一个参数: 渐变的方向，也可以是个角度值

        默认方向为: to bottom

        后续颜色参数可以追加一个距离值

例：background-image: linear-gradient(to right, red, yellow 100px, green 200px)

径向渐变：radial-gradient

重复线性渐变

        background-image: repeating-linear-gradient(to right, black, black 50px, white 50px, white 100px);

重复径向渐变

        background-image: repeating-radial-gradient(red, red 50px, yellow 50px, yellow 100px);

1.5.2、分栏布局

设置文本列数

        column-count: 3;

设置列宽度

        column-width: 256px;

分栏边框，属性值和边框的属性值相同

        column-rule: 5px double red;

两列文本中间的间距 *

        column-gap: 100px;

1.5.3、响应式布局

响应式是什么？

        当某个事情发生后，立即做出反应就叫响应式

什么是页面的响应式？

        页面的元素样式会根据页面的宽度做出变化

如何实现响应式？

        使用媒体查询，来实现响应式布局

        媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式

        语法：@media media-type and (condition1) and (condition2) 

媒体类型 media-type：

        备选项

                all: 所有设备

                print：打印机的预览模式

                screen：显示屏

                speech：语音合成器

/* min-width: 屏幕最小宽度 */
        @media screen and (min-width: 700px) {
            .box {
                background-color: #f00 !important;
            }
        }

/* max-width: 屏幕最大宽度 */
        @media screen and (max-width: 1000px) {
            .box {
                background-color: #00f !important;
            }
        }

用响应式布局实现主体样式

 @media (prefers-color-scheme: dark) {
            .box2 {
                background-color: #000;
                color: #fff;
            }
        }

        @media (prefers-color-scheme: light) {
            .box2 {
                background-color: #ff0;
                color: #000;
            }
        } 

/* 规定默认的主题样式 */
        :root {
            --theme-background-color: #ff0;
            --theme-color: #000;
        }

        .box2 {
            background-color: var(--theme-background-color);
            color: var(--theme-color);
        }

/* 声明深色模式下的样式 */
        .dark-mode {
            --theme-background-color: #000;
            --theme-color: #fff;
        }