css3_css3动画从大到小-CSDN博客

本文链接：https://blog.csdn.net/starNewwu/article/details/106975075

CSS3

C3现状

1、浏览器支持程度差，需要添加私有前缀(移动端)

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

选择器

属性选择器：

E[attr] 表示存在attr属性即可；
E[attr=val] 表示属性值完全等于val；
E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；

伪类选择器-伪元素选择器：

a:hover a:link a:active a:visited
E:first-child:查找E这个元素的父元素的第一个子元素E
E:last-child:最后一个子元素
E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
E:nth-child(even): 所有的偶数
E:nth-child(odd): 所有的奇数
E:nth-of-type(n):指定类型
E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
E:target 结合锚点进行使用，处于当前锚点的元素会被选中
重点说明：n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效
E::before E::after
- 因为是行内元素索引需要display = block
- 必须添加content属性值可以为空
- 旧版本伪类新版本伪元素旧版本不识别::新版本:会被自动解析为::为了兼容性用:
- IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素
- E::first-letter文本的第一个字母或字(不是词组)
- E::first-line 文本第一行
- E::selection 可改变选中文本的样式

颜色设置

RGBA

参数一：Red红色值 0~ff/百分比
参数二：Green绿色值 0~ff/百分比
参数三：Blue蓝色值 0~ff/百分比
参数四：opacity透明度 0~1

HSLA

H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值
A：Alpha透明度。取值0~1之间。
补充

a) opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

b) transparent 不可调节透明度，始终完全透明

c) 使用rgba 来控制颜色，相对opacity ，不具有继承性

文本阴影

text-shadow

参数：color offsetX offsetY blur,color offsetX offsetY blur...颜色可以放在模糊半径的后面 blur:模糊半径
：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离

盒模型

box-sizing :border-box/content-box

边框圆角

border-radius: 0px 0px 0px 0px

border-top-left-radius

* border-top-right-radius

* border-bottom-right-radius

* border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径

边框阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。值越大，阴影的扩散面积越大
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移—裁切。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

background

线性渐变

background:linear-gradient(方向,开始颜色位置, 颜色2 位置,...);
to top/0deg
to left/270deg
to bottom/180deg
to right/70deg

径向渐变

background:radial-gradient(形状,大小,坐标,颜色1,颜色2...);
形状：shape： circle正方形 ellipse 适配当前的形状
坐标：坐标方向上下左右中/像素值
大小：size:closest-side:最近边 farthest-side：最远边 closest-corner：最近角 farthest-corner：最远脚（默认）
eg:background:radial-gradient(at left top,red,blue);
颜色:background:radial-gradient(red,red 50%,blue 50%,blue);

重复渐变

repeating-linear-gradient
repeating-radial-gradient

background:

background-color:red;
background-image：url();
background-repeat:round/space;
round:图片缩放后平铺
space：图片平铺产生相等间距但大小不变
background-attachment: fixed/scroll/local;
fixed: 背景图位置固定不变
scroll: 背景图片跟随容器滚动改变不会跟随内容一起滚动
local: 背景图片跟随容器滚动改变背景图片跟随内容一起滚动
background-size: x%,y%/contain/cover
百分比:参照父容器的百分比
contain:将图片缩放后使图片充满容器
cover:图片缩放填满所有背景区域图片内容有可能溢出
background-orgin: content-box/border-box/padding-box 背景坐标的原点
border-box:显示border以内的内容
content-box:显示content以内的内容
padding-box：显示padding以内的内容
background-clip:content-box/border-box/padding-box 背景图片裁切

边框图片

border-image-source：指定边框图片的路径默认只是填充到容器的四个角点
border-image-slice：让它成为九宫格设置四个方向的裁切距离 fill做内容的内部填充
border-image-width：边框图片的宽度
border-image-outset
border-image-repeat:stretch拉伸/space/round/repeat平铺

transition 过渡

执行完之后会还原到原始状态

transition-property: 添加过渡效果的样式属性名称
transition-duration: 耗时单位秒
transition-timing-function：设置时间函数控制运动的速度
transition-delay: 延迟
简写：名称，耗时速度延迟(省略就是0s) 多个样式的过渡效果用逗号隔开
transition: left 2s linear 0s, background-color 2s linear;
为所有样式添加
transition: all 2s;
可以让过渡效果分指定的几次来完成
transition: 2s steps(4);
前缀 moz o webkit

transform

2d变换

translate(x,y);x水平偏移 y垂直偏移只写一个值就是水平偏移
scale(x,y)/(value) 缩放一个值x y等比例缩放值：1不缩放大于1放大小于1缩小参照元素几何中心缩放
rotate(a) 单位deg 相当于rotateZ(a); 正值：顺时针旋转
skew(a)/(a1,a2) 单位deg 斜切两个值先切水平方向再切垂直方向
origin: left top 围绕哪一个点旋转

3D变换

translate3d(x,y,z) 必须三个值:偏移量
scale3d(a1,a2,a1) scaleX(a) scaleY(a) scaleZ(a) 三维缩放
rotate3d(x,y,z,angle) 三维旋转三个方向的向量值角度
景深：
transform-style:preserve-3d 保留3d效果/flag 不保留3d 平面模式
perspective

动画animation

animation-name:动画名;//执行动画
animation-duration: 2s;//耗时
animation-iteration-count:1/infinite;//一次/循环
animation-direction:alternate;//交替动画
animation-delay: 2s;//延迟
animation-fill-mode://设置动画结束时的状态默认情况下动画执行完毕后会回到初始状态

forwards:会保留动画结束时的状态有延迟的情况下并不会立刻进入初始状态
backwords：不会保留动画结束时的状态在添加了动画延迟的前提下如果动画有初始状态那么会立即进入到初始状态
both: 会保留动画结束时的状态有延迟也会立刻进入动画的初始状态

animation-timing-function: linear/ease 时间函数
animation-play-state: paused/running //播放状态
@keyframes 动画名{//创建动画
from/0%{}
50%{}
to/100%{}
}

多列布局

几列
column-count:3;
列宽
column-width:200px;
列的边距
column-gap: 50px;
列之间的宽度样式和颜色
column-rule: dashed 2px red;
规定元素跨多少列 n指定跨n列 all所有列占据一行
column-span: 500px; 如果人为设置取大优先

伸缩盒子模型从左到右从上到下

设置父容器为盒子会使子元素变成伸缩项
display:flex;
子元素主轴方向的排列方式
justify-content:
flex-start起始位置
flex-end结束位置
space-between中间的盒子相同的间距左右对齐父容器的开始和结束
space-around每个元素产生完全相同的间距;
flex-wrap: nowrap(默认不换行即收缩)/wrap换行/wrap-reverse翻转;
设置子元素的排列方向（主轴方向）
flex-direction:
row水平方向(默认主轴)
row-reverse从右到左水平方向
column垂直从上到下
column从下到上
flex-flow: wrap row; //flex-direction和flex-wrap的合并
拓展子元素的宽度:设置当前元素应该占据剩余空间的比例值
比例值计算:当前空间的flex-grow/所有兄弟的flex-grow的和
flex-grow: 1; 其他兄弟元素不设置默认0
空间不够由子元素分摊的比例
比例值计算:当前空间的flex-shrink/所有兄弟的flex-shrink的和
flex-shrink:1;默认值为1
侧轴对齐给父元素加
align-items:
flex-start
flex-end
stretch默认值侧轴方向拉伸填满整个侧轴方向
baseline: 子元素根据其文本的基线对齐英文字母的基线
center:放在中心
align-self 给子元素加
flex-end: 设置单个元素在侧轴方向上的对齐方式