一. CSS3背景
- 第一张完整背景图的起始位置 background-origin
默认情况下,第一张完整背景图的起始位置是从元素的padding开始的
1.1 border-box 起始位置从border开始
1.2 padding-box 起始位置从padding开始 默认值
1.3 content-box 起始位置从content开始
2. 背景图剪裁 background-clip, 从给定的位置开始向外剪裁
2.1 border-box 从border位置开始剪裁
2.2 padding-box 从padding位置开始剪裁
2.3 content-box 从content位置开始剪裁
二.CSS3选择器
-
nth-child()选择器
写法1
语法: 选择器A:nth-child(大于0的数) {}
ul>li:nth-child(2) {
background-color: red;
}
找到选择器A表示的元素的父元素里第number个子元素, 且子元素的类型要符合选择器A
写法2
语法: 选择器A:nth-child(2n+1) {}
ul>li:nth-child(2n+1) {
background-color: red;
}
找到选择器A表示的元素的父元素里序号为奇数的子元素, 且子元素的类型要符合选择器A
写法3
语法: 选择器A:nth-child(2n) {}
ul>li:nth-child(2n) {
background-color: red;
}
找到选择器A表示的元素的父元素里序号为偶数的子元素, 且子元素的类型要符合选择器A
写法4
语法:选择器A:nth-child(n+number) {}
ul>li:nth-child(n+5) {
background-color: red;
}
找到选择器A表示的元素的父元素里序号为number及之后的所有子元素, 且子元素的类型要符合选择器A
写法5
语法: 选择器A:nth-child(-n+number) {}
ul>li:nth-child(-n+4) {
background-color: red;
}
找到选择器A表示的元素的父元素里序号为number及之前的所有子元素, 且子元素的类型要符合选择器A
-
nth-of-type()选择器
nth-of-type和nth-child两者的区别是:
nth-child 先从所有的子元素里找到正确的序号, 然后再判断类型是否匹配
nth-of-type 先找到所有同类型的子元素, 然后再从这些子元素里找到正确的序号
三.过渡动画
过渡动画 transition
-
要做动画的css样式 (transition-property) 默认值是all
-
动画的运动时间 (transition-duration) 单位是s
-
过渡动画的运动速率 (transition-timing-function)
- ease 默认值 开始和结束慢, 中间快
- ease-in 开始慢, 之后加快
- ease-out 开始快, 之后变慢
- ease-in-out 开始和结束慢
- linear 匀速
-
过渡动画的延迟时间 transition-delay 单位是s
-
要执行动画的css样式的初始值和结束值
过渡动画的触发时机
- :hover伪类
- :focus伪类
- :checked伪类
- 媒介查询
- JS
注意:
不是所有的css样式都可以做过渡动画
绝大部分 样式, 变化的过程是线性的, 如px值单位的样式, 颜色, 位置, 距离等. 都可以触发过渡动画
样式变化的过程不是线性的, 如display:none/block, text-align:center/left/right, 不可触发过渡动画
但是有例外情况, 部分与文字有关的样式, 即使变化为线性也无法触发过渡动画
四.关键帧动画
过渡动画和关键帧动画的区别
- 过渡动画只能让所有的样式同时做动画, 如果想要样式依次做动画, 请选择使用关键帧
- 过渡动画的触发需要触发时机, 关键帧动画触发不需要触发时机
关键帧动画 animation
-
animation-name 需要执行的关键帧的名字, 该名字需要自定义, 配合@keyframes使用
-
animation-duration 动画的执行时间
-
animation-iteration-count 动画的执行次数, infinite无限次数
-
animation-delay 动画的延迟时间
-
animation-direction 动画的运动方向
- normal 默认值
- reverse 反向
- alternate 奇数次正向, 偶数次反向
- alternate-reverse 奇数次反向, 偶数次正向
-
animation-play-state 动画的运动状态
- running 运动
- paused 停止
-
animation-timing-function 动画的运动速率
- ease 默认值 开始和结束慢, 中间快
- ease-in 开始慢, 之后加快
- ease-out 开始快, 之后变慢
- ease-in-out 开始和结束慢
- linear 匀速
五. 第三方动画 animate.css
css是一个使用方便,兼容绝大部分浏览器的动画库，可以在web项目中使用。用于强调、主页、滑动条和注意力引导提示
使用步骤:
-
下载
可以通过npm或者yarn下载
或者通过直接引入在线的css文件
- 基本使用
给想要执行动画的元素添加animate__animated 类，同时添加任何想要执行的动画名称(不要忘记animate__前缀!)
<h1 class="animate__animated animate__bounce">An animated element</h1>
- 进阶使用
尽管animate.css库提供了一些辅助类(如animated类)来让我们快速的实现动画效果，但如果插件提供的class类无法满足我们的需求(如: 修改动画执行时间, 延迟时间等), 我们可以直接使用提供的动画关键帧。这提供了一种灵活的方式，可以在你当前的项目中使用Animate.css，而不必重构你的HTML代码。
