移动互联应用

过渡动画

 语法：transition: property duration timing-function delay;

 使用 active 类名来代表播放动画的状态

.box.active {

            /* 激活状态 */

            transform: translateX(300px);

            opacity: 0;

        }

animation动画

动画animation必须包含 名称和时长两个属性才会进行播放

animation: move 3s linear 2s forwards;

  /* 动画帧序列 */

        @keyframes move {

            /* 起始帧 */

            from {

                /* 每一帧中描述该元素的状态 */

                transform: translateX(0px);

                opacity: 0;

            }

            /* 可以用百分比来代表动画的中间状态 */

            50% {

                transform: translateX(600px);

                opacity: 1;

            }

            /* 结束帧 */

            to {

                transform: translateX(300px);

            }

        }

// animationPlayState 动画播放状态

        // paused 暂停

        // running 播放

// 通过js代码 动态添加类名 active 用来播放动画

/* 使用 active 单独添加动画属性 */

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

 /* 匹配属性值包含指定内容的元素 */

        input[name*=e] {

            border: 3px solid red;

        }

        /* 匹配属性值以指定内容开头的元素 */

        input[name^=s] {

            font-size: 24px;

        }

        /* 匹配属性值以指定内容结束的元素 */

        input[name$=e] {

            background-color: greenyellow;

        }

        /* 匹配属性值包含 dep- 开头的元素 */

        input[name|=dep] {

            border: 3px solid blue;

        }

  /* 表单元素被禁用时的样式 */

        input:disabled {

            border: 3px solid red;

        }

        /* disabled仅限于表单元素使用 */

        .box:disabled {

            border: 3px solid black;

        }

        .box {

            width: 200px;

            height: 100px;

        }

        /* checked代表被勾选的元素 */

        input[name=sex]:checked {

            width: 100px;

            height: 100px;

        }

        /* 选中元素中的第一个字符 */

        .hw::first-letter {

            color: red;

        }

        .p1 {

            width: 100px;

            height: 130px;

            word-wrap: break-word;

        }

        /* 元素中的第一行内容 */

        .p1::first-line {

            color: green;

        }

        /* 选中的内容 */

        .p2::selection {

            background-color: gold;

        }
渐变色

 /* 线性渐变 */

            /* 语法: linear-gradient(direction, color1, color2, color3 ... )

                direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to top

                color1 color2 ...: 渐变的颜色序列

            */

 background-image: linear-gradient(30deg, #f00, #0f0, #00f);

            /* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */

            background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

            /* 重复线性渐变 */

            background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

            /* 径向渐变 */

            background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);

            background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

            /* 重复径向渐变 */

            background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);

        }

响应式布局

 如何实现响应式？ */

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

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

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

 @media print and (min-width: 600px) and (max-width: 900px) {

            .box {

                background-color: orange !important;

            }

        }

分栏布局

  .p {

            width: 800px;

            height: 500px;

            /* 设置文本列数 */

            column-count: 3;

            /* 设置列宽度 */

            column-width: 150px;

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

            column-rule: 5px double red;

            /* 两列文本中间的间距 */

            column-gap: 100px;

            word-break: keep-all;

        }