前端学习第三周-css新增选择器[属性选择器]，新增属性，css动效，css动画

---

前言

本周主要学习了手机端界面的静态页面制作、css的新增选择器、css动效以及css动画，可以让整个界面的效果更加丰富。

---

一、简单的移动端静态页面制作

引用flexible.js需要在link应用css之前。

   <script src="../js/flexible.js"></script>
   <link rel="stylesheet" href="../css/base.css">
   <link rel="stylesheet" href="../css/xiecheng.css">

制作移动端界面，需要将字符的单位由px换成rem，这样可以让整个界面随着手机不同型号的改变，来适应不同的比例，在vs code里面下载px to rem & rpx & vw (cssrem)插件，可以直接识别单位的转换，方便我们代码的编写。

二、属性选择器（新增选择器）

1.格式

代码如下（示例）：

格式：
[属性]{
	样式;
	}<!--存在某个属性名就能被选上-->
[属性名 = "所有属性值"]{
	样式;
	}<!--属性值必须完全相同才能被选中-->
[属性名 ^= "字符"]{
	样式;
	}<!--属性值的名称当前的开头值相同被选中-->
[属性名 $= "字符"]{
	样式;
	}<!--属性值的名称当前的结尾值相同被选中-->
[属性名 *= "字符"]{
	样式;
}<!--属性值的名称包含该字符被选中-->

2.自定义属性

代码如下（示例）：

自定义属性前面加上data
data-属性名：""  <!--更加清晰命令，也可以让浏览器更快的解析-->

3.伪类

代码如下（示例）：

div:nth-child(3) <!--必选满足第三个孩子，并且第三个孩子必须是div-->
div:nth-of-type(odd)<!--div标签奇数行生效-->
div:nth-of-type(even)<!--div标签偶数行生效-->
div:nth-of-type(3n+1)<!--div标签符合计算值行生效-->
div:first/last-of-type(3n+1)<!--div标签第一个/最后一个生效-->
div:only-of-type(3n+1)<!--div仅有一个才生效-->
div:nth-last-of-type(n)<!--div倒着数的第n个div生效-->

一般不建议使用带“child”的伪类，因为很容易错认标签

4.a标签的四种状态

方便记忆lvha

:link 未访问的状态
:visited 已访问的状态
:hover 鼠标悬停的状态
:active 访问时的状态

::selection 选中内容时更改样式，但是是伪类

三、CSS新增样式

1.阴影

文字阴影（不占位置）
text-shadow:2px 2px 4px red; /x轴偏移量 y轴偏移量 模糊程度 模糊颜色
盒子阴影
box-shadow:2px 2px 4px red inset; /x轴偏移量 y轴偏移量 模糊程度 模糊大小 模糊颜色 内投影（投影的方式）
圆角
border-radius:50px;

2.渐变

线性渐变：

背景渐变颜色
background:linear-gradient(to right top,red 30%,green 70%)<!--颜色可以一直添加，有to，从right到top-->
另一种写法：
background:-webkit-linear-gradient(right top,red 30%,green 70%)<!--加入-webkit-没有to，right为起始值-->

字体颜色渐变
background:linear-gradient(pink,green)
-webkit-background-clip:text;
color:transparent;

径向渐变：

背景颜色渐变
background:radial-gradient(50px circle at 75% 75%,red,green);
半径 圆 位置上下 位置左右 从内颜色 从外颜色
background:radial-gradient(50px 40px ellipse at 75% 75%,red,green);
x半径 y半径 椭圆 位置上下 位置左右（at 设置中心点的位置） 从内颜色 从外颜色
ellipsis省略号   ellipse椭圆

四、CSS动效

1.transform:转换

平移:

transform:translateX(100px);<!--左右移动-->
transform:translateY(100px);<!--上下平移-->
<!--该两个属性值如果一同运用，必须写在同一排，否则只有下面行生效-->
transform:translate(100px,100px);<!--合并属性-->

旋转：

transform:rotate(45deg);<!--中心顺时针旋转45度-->
transform:rotateX(30deg);<!--以x轴旋转-->
transform:rotateY(30deg);<!--以Y轴旋转-->

缩放：

transform:scale(0.5);<!--缩小一半-->
transform:scaleX(2);<!--放大X轴的一倍-->
transform:scaleY(2);<!--放大Y轴的一倍-->

倾斜：

transform:skew(45deg，45deg);<!--角度同时进行，会隐藏该元素-->
transform:skewX(45deg) skewY(45deg);<!--先x轴旋转，后y轴再旋转，元素并不会被隐藏-->
transform:skewX(30deg);<!--度数为正，逆时针倾斜，度数为负，顺时针倾斜-->
transform:skewY(30deg);<!--度数为正，顺时针倾斜，度数为负，逆时针倾斜-->

原点的更改

transform-origin：1px 200px;<!--改变基点,x轴和y轴-->

2.transition:过渡

transition:width 0.3s linear 2s;<!--属性 执行时间 执行过程 延迟时间-->
transition:all 0.3s linear;<!--all包含所有属性,无延迟时间-->
display:none;不支持过渡效果，可以使用opacity:0;

五、CSS动画

animation:动画的名称 执行时间 执行的方式 延迟执行时间 执行次数 执行的方向 停留在初始帧(backwards)还是结束帧(forwords);

animation: an1 4s linear 1s infinte(无限次);
@keyframes an1{
	0%{
	
		}
	25%{
	transform:translate(200px 0px) scale(2);
	}
	...
}

总结

本周学习的内容，可以让界面变得更加动态美观。这周写了两天的手机项目，所以学习的内容并不多。