CSS3常用属性及动画

CSS3😘

选择器的总结😎

基础选择器

通用选择器，标签选择器，类名选择器，ID选择器，交叉选择器，群组选择器（同时选择多个元素设置样式）

子代选择器：只选中子代元素，孙子辈儿的不选中

伪类选择器：

关心位置的伪类选择器：不管是选择哪一个标签，都会从子元素中的第一个开始

:nth-child（）---正数
:nth-last-child---倒数
:first-child---第一个
:last-child---倒数第一个

关心元素的伪类选择器：选择哪一个标签就从这个标签第一次出现的位置开始算起

:nth-last-of-type,
:first-of-type,
:last-of-type

用户交互的伪类选择器

:hover(鼠标悬停)
:focus(获取焦点)

获取根元素的伪类选择器

:root(选中html的，
html是根元素)

伪元素选择器

::before , ::after , ::first-letter , ::first-line

属性选择器

*[class]---选中页面中具有class属性的元素
*[class=“box”]---选中页面中具有class属性并且属性值为box的元素
*[class*=“b”]---选中页面中具有class属性并且属性值中包含字母b的元素
*[class~=“box”]---选中页面中具有class属性并且属性值中有空格的元素
*[class|=“box”]---选中页面中具有class属性并且属性值中包含“box-”的元素
*[class^=“box”]---选中页面中具有class属性并且属性值是以box开头的元素
*[class$=“box”]---选中页面中具有class属性并且属性值是以box结束的元素

css 常用样式

.box {
	width: xxx; // 元素宽度
	max-width: xxx; // 元素最大宽度
	min-width: xxx; // 元素最小宽度
	height; xxx; // 元素高度
	line-height: xxx; // 行高(与元素高度相等时内容垂直居中)
	align-item: center; // 水平居中
	margin: xxx; // 元素外边距 （只有一个属性值为元素上下左右的外边距、有两个属性值，中间用空格隔开为元素上下和左右的外边距、有三个属性值，中间用逗号隔开为元素上、左右、下的外边距，有四个属性值为元素上右下左(顺时针)的外边距 margon-top/right/bottom/left: xxx; 单向外边距
	padding: xxx; // 元素那边距，属性值规则同上
	display: block(变为块级元素)/inline(变为行内元素)/inline-block(变为行内块元素); // 改变元素属性 
	float: left/right; // 元素浮动 使元素脱离文档流
	clean: bith; // 清除元素浮动使元素回归文档流
	position: fixdx(固定定位),relative(相对定位),absolite(绝对定位); //  使元素脱离文档流 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	// fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
	// relative 生成相对定位的元素，相对于其正常位置进行定位。
	// absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
	font-size: xxx; // 字号大小
	font-family: xxx; // 字体
	color: xxx; // 字体颜色
	background-color: xxx/rgba(0,0,0,0.5[背景透明度]); // 背景颜色(可用background复合属性代替)
	background-image: url(); // 背景图片 no-repeat(不填充)
	backgrund-size: xxx xxx; // 背景图片宽高
	opacity: xxx; // 元素透明度
}

动画

书写方式

transform：动效名字;

动效：

一、平移：y轴的正方向向下
transfrom：translate(X,Y)
translateX,translateY分别表示X轴和Y轴的平移距离
二、旋转
1. transform: rotateZ(30deg);---旋转，单位是deg表示角度
2. transform: rotate();---绕中心旋转
3. teansform: rotateX();---绕X轴旋转
4. teansform: rotateY();---绕Y轴旋转
5. teansform: rotateZ();---绕Z轴旋转
三、斜切
1. transform:skewY(50deg);---斜切，单位是deg表示角度
2. transform:skew(X,Y)
3. transform:skewX();---沿X轴斜切
4. transform:skewY();---沿Y轴斜切
四、缩放
1. transform：scaleY(.5)---缩放，跟的是数值，如过大于1，元素会放大，如果在0~1之间会缩小
2. transform：scale(X,Y);
3. transform：scaleX();---X轴缩小或放大
4. transform：scaleY();---Y轴缩小或放大
5. transform：scaleZ();---Z轴缩小或放大

动效完成的时间（过渡时间）

transition:动效 时间 运动方式;

一、@keyframes用来定义动画，动画三要素{
	1. 动画名
	2. 动画过程
	3. 动画的属性
}
二、animation属性，用来将@keyframes定义的动画动起来，他的要素是{
    1。 动画名
    2. 完成动画所需时间
    3. 动画的运动方式
    4. 动画是否循环播放
三、需要进行3d的转换
   transform-style：preserve-3d；
四、 需要添加景深
    perspective：1000px;
五、 定义旋转中心：
    transform-origin：x y;

@啊晴宝贝