CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块

即指元素从一种样式逐渐过渡为另一种样式的过程

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css实现动画的方式，有如下几种：

• transition 实现渐变动画
• transform 转变动画
• animation 实现自定义动画

transition 实现渐变动画

transition的属性如下：

样式

边框

css3新增了三个边框属性，分别是：

• border-radius：创建圆角边框
• box-shadow：为元素添加阴影
• border-image：使用图片来绘制边框
  box-shadow
  设置元素阴影，设置属性如下：
• 水平阴影
• 垂直阴影
• 模糊距离(虚实)
• 阴影尺寸(影子大小)
• 阴影颜色
• 内/外阴影
• 其中水平阴影和垂直阴影是必须设置的

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页解刨成：背景层、内容层、悬浮层

当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果

实现

使用css形式实现视觉差滚动效果的方式有：

• background-attachment
• transform:translate3D

background-attachment

作用是设置背景图像是否固定或者随着页面的其余部分滚动
值分别有如下：

对于文本的溢出，我们可以分成两种形式：

• 单行文本溢出
• 多行文本溢出

实现

单行文本溢出省略

理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现

实现方式也很简单，涉及的css属性有：

• text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
• white-space：设置文字在一行显示，不能换行
• overflow：文字长度超出限定宽度，则隐藏超出的内容

overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

CSS选择器是CSS规则的第一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所选择的元素，叫做“选择器的对象”

我们从一个Html结构开始

<div id="box">
    <div class="one">
        <p class="one_1">
        </p >
        <p class="one_1">
        </p >
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>

通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的

但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法

实现

通过css实现隐藏元素方法有如下：

• display:none
• visibility:hidden
• opacity:0
• 设置height、width模型属性为0
• position:absolute
• clip-path

display:none

• 两栏布局
  两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，
  比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器
  这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器
  这种布局适用于内容上具有明显主次关系的网页

• 三栏布局
  三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之
  大家最常见的就是github：

双栏布局

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

具体是两种情况

• 居中元素（子元素）的宽高已知
• 居中元素宽高未知

实现

实现元素水平垂直居中的方式：

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

利用定位+margin:auto

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>