前端CSS【弹性布局】常用【特效及动画】

学习目标：

• 1.弹性盒子
• 2.特效：
•   2.1阴影效果
•   2.2渐变效果
•   2.3过滤效果
•   2.4过渡效果
•   2.5变形效果
• 3.动画
•   3.1关键帧
•   3.2动画
•   3.3第三方动画库
• 4.补充：服务器字体

---

学习内容：

1. 一、弹性盒子
2. 1.弹性盒子
3.  实现弹性布局的前提：父元素设置display：flex；
5. 2.设置主轴方向：
6. - flex-direction：row；（默认，起点在左端）
7. - flex-direction：row-reverse；（起点在右端）
8. - flex-direction：column；（竖直方向，起点在上方）
9. - flex-direction：column-reverse；（竖直方向，起点在下边）
11. 3.设置子元素是否换行：
12. - flex-wrap：no-wrap；（默认，不换行）
13. - flex-wrap：wrap；（换行，第一行在上方）
14. - flex-wrap：wrap-reverse；（换行，第一行在下方）
16. 4.主轴对齐方式：
17. - justify-content：flex-start；（轴起点对齐）
18. - justify-content：flex-end；（轴终点对齐）
19. - justify-content：center；（居中）
20. - justify-content：space-between；（两端对齐，中间元素间隔相等）
21. - justify-content：space-around；（每个元素之间间隔相等）
22. - justify-content：space-evenly；（每个元素之间间距相等）
24. 5.交叉对齐方式：
25. - align-items：flex-start；（轴起点对齐）
26. - align-items：flex-end；（轴终点对齐）
27. - align-items：center；（居中）
28. - align-items：baseline；（文本下对齐）
30. 6.调整换行对齐方式：
31. align-content：flex和flex-grow
32. 分配剩余空间或者设置子元素的比例

    ---

    (特效)

33. 一、阴影效果

34.      1.阴影shadow：左右偏移 上下偏移 模糊距离 阴影颜色

35.       eg：box-shadow：5px 5px 5px green;

    ​             text-shadow: 1px 1px 1px black;

            注：字体描边效果：text-stroke：1px black；

    二、渐变效果

36.       1.渐变gradient:

37.          linear-gradient：线性渐变       radial-gradient：梯度渐变

             背景图：渐变（方向，颜色1百分比，颜色2百分比,....)

38.       2.浏览器兼容：-webkit-

             -moz-：火狐浏览器

    eg:background-image: linear-gradient(left,cyan 20%,gold 50%,tomato,hotpink,skyblue)；

    三、过滤效果

39.         1.过滤filter: 

40. 模糊	取值范围大于0	filter: blur 5px;
    亮度	取值范围正自然数	filter: brightness(.75);
    对比度	取值范围正自然数	filter: contrast(2);
    阴影	同box-shadow	filter: drop-shadow(5px 5px 5px red);
    灰度	取值范围0-1	filter: grayscale(1);
    色相转变	取值范围deg   转色相环一圈	filter: hue-rotate(30deg);
    反转图像	取值范围0-1	filter: invert(1);
    透明度	取值范围0-1	filter: opacity(.25);
    饱和度	取值范围正自然数	filter: saturate(4.25);
    褐色	取值范围0-1	filter: sepia(1);

41. 四、过渡效果

42.         1.过渡transition: 属性名 时间 延迟时间 速度曲线

43.   eg:背景剪裁:

                background-clip: text;

                -webkit-background-clip: text;

                color: transparent;

                transition: 3s;    /过渡3s/

    五、变形效果

44.         1.变形transform:

           左上角开始变形：

           transform-origin:left top;

           transition: .5s;     /过渡时间为0.5秒/

         2.平移translate:（X, Y ,Z/单位px）不会脱离文档流

                 eg: transform: translateY(100px);

         3.旋转rotate （X Y Z /单位：deg turn grad）

                 eg:transform:rotate(.5 turn);

                      transform:rotate(90deg);

一圈：(turn=360deg=400grad)

                 eg: transform: rotate(360deg);

                       transform: rotate(1turn);

                       transform: rotate(400grad);

           4.缩放：scale（X Y Z/无单位）

                  eg:transform: scaleX(2);

                       transform: scale(3);

           5.倾斜/拉扯：skew（X Y/单位deg）

                  eg:transform: skewX(-90deg);

           6.3D效果:transform-style:preserve-3d；

(动画)

一、关键帧：@keyframes

二、动画

- animation-name：动画属性名

- animation-duration：动画持续时间

- animation-delay：动画延迟时间

- animation-timing-function：动画速度曲线 linear（匀速运动）

贝塞尔曲线：cubic-bezier（....数值）

- animation-iteration-count：定义循环次数 infinite：无限循环

- animation-direction：alternate：动画轮流反转播放

- animation-play-state：动画状态 paused（暂停） running（运动）

- animation-fill-mode：forwards：保留最后一帧动画

 三、第三方动画库

eg：animate.css

---

补充：

一、服务器字体

    1.阿里巴巴矢量库：

<style>

        @font-face {

            font-family: '字体名称';

            src: url(字体库路径);

        }

        /* 阿里巴巴矢量库 */

        p{

            font-family: '字体名称';

        }

    </style>

     2.less：