css animation动画完成后隐藏_温故而知新之CSS学习-CSDN博客

1、BFC：Block Formatting Context（块级格式化上下文）
BFC 布局规则

内部的 Box 会在垂直方向一个接一个地放置
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个盒子（块盒与行盒）的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
BFC 的区域不会与 float box 重叠
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
计算 BFC 的高度时，浮动元素也参与计算

如何创建 BFC

根元素或其他包含他的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素具有 position 为 absolute 或 fixed）
内联块（元素具有 display: inline-block）
表格单元格（元素具有 display: table-cell ，HTML 表格单元格默认属性）
表格标题（元素具有 display: table-caption，HTML 表格标题默认属性）
具有 overflow 且值不是 visible 的块元素
弹性盒子（flex 或 inline-flex）
display: flow-root
column-span: all

BFC 的作用

利用 BFC 避免 margin 重叠
自适应两栏布局
清除浮动

2、CSS3广泛运用

过渡：使动作变得更加流畅

transition: CSS属性, 花费时间, 效果曲线(默认是 ease), 延迟时间(默认是 0);

transition的animation-timing-function值（既效果曲线值）

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(_n_,_n_,_n_,_n_)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

动画：实现动作交互效果

animation: name duration timing-function delay iteration-count direction;

值	描述
_[animation-name](https://www.w3school.com.cn/cssref/pr_animation-name.asp "CSS3 animation-name 属性")_	规定需要绑定到选择器的 keyframe 名称。。
_[animation-duration](https://www.w3school.com.cn/cssref/pr_animation-duration.asp "CSS3 animation-duration 属性")_	规定完成动画所花费的时间，以秒或毫秒计。
_[animation-timing-function](https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 属性")_	规定动画的速度曲线。（同过渡的规则）
_[animation-delay](https://www.w3school.com.cn/cssref/pr_animation-delay.asp "CSS3 animation-delay 属性")_	规定在动画开始之前的延迟。
_[animation-iteration-count](https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 属性")_	规定动画应该播放的次数。
_[animation-direction](https://www.w3school.com.cn/cssref/pr_animation-direction.asp "CSS3 animation-direction 属性")_	规定是否应该轮流反向播放动画。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

 @keyframes myfirst
 {
 from {background: red;}
 to {background: yellow;}
 }
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

为了得到最佳的浏览器支持，您还可以始终定义 0% 和 100% 选择器。

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

想要让css动画停留在最后一帧，可以直接添加

animation-fill-mode: forwards;

阴影

box-shadow: 水平阴影位置垂直阴影位置模糊距离阴影的大小阴影的颜色阴影的方向(默认是从里到外，设置inset就是从外到里);

我较为常用的阴影效果

box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
复制代码

边框圆角

border-radius: n1, n2, n3, n4;  四个角的弧度值，也可以填1个

3、link和@import比较

link 是从 html 引入的，@import 是从 css 引入的
link 会在浏览器加载页面是同步加载 css；页面加载完成后再加载 @import 的 css
优先级 link > @import
@import 是 css2.1 加入的语法，只有 IE5+ 才可识别，link 无兼容问题

4、将一个块级元素水平居中有几种方法？分别是什么？

水平居中：

利用选择器选择到该元素，

1.添加属性 margin:auto;

2.设置父元素相对定位，子元素position: absolute;left:50%；同时margin-left值为-(子元素宽度的一半)，因为设置top值时是相对于盒子左部，所以想要居中还要往上移动半个盒子的宽度度才能实现；

3.父级元素添加display:flex;justify-contet:center;

垂直居中：

1.父级元素添加display:flex;　aiign-items:center;

2.设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。

3.这种方法和第一种差不多，在父容器中设置display:flex;子元素设置align-self: center;

4.在父容器中再加上一个子元素，把它的高度设为去掉盒子高度后的一半，实际上就是设置了一个隐藏块元素，把实际上显示的块元素“挤”到垂直居中的位置;

5.　设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中

6.　设置父容器为display: table-cell;vertical-align: middle;

5、CSS隐藏手机端滚动条

应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}

6、CSS控制文字，超出部分显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。

实现方法一：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

实现方法二：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

适用范围：

该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注