属性选择器
可以不用借助于类或者id选择器
![CSS3(学习笔记)不定期更新~ CSS3(学习笔记)不定期更新~](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2wvP249MjAmaT1ibG9nLzI1MTg4MjEvMjAyMTA5LzI1MTg4MjEtMjAyMTA5MDMxMTUxNDAzMTYtMTI3MjkxNjA4OS5wbmc=)
例:
/* 必须是input,但是同时具有value这个属性,选择这个元素 */
input[value] {
color: skyblue;
}
/* 只选择 type=text 文本框的input */
input[type=text] {
color: pink;
}
结构伪类选择器
![CSS3(学习笔记)不定期更新~ CSS3(学习笔记)不定期更新~](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2wvP249MjAmaT1ibG9nLzI1MTg4MjEvMjAyMTA5LzI1MTg4MjEtMjAyMTA5MDMxMTUzMDUxMjMtMzEwMTUyNzM2LnBuZw==)
例:
ul li:first-child {
background-color: pink;
}
ul li:nth-child(3) {
background-color: skyblue;
}
nth-child(n) 选择某个父元素的一个或多个特定的子元素
n 可以是数字,关键字和公式
n 如果是数字,就是选择第n个子元素,里面数字从1开始
n 可以是关键字:even偶数,odd奇数
n 可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
nth-child 与 nth-of-type 的区别
nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子
伪元素选择器
::before // 在元素内部的前面插入内容
::after // 在元素内部的后面插入内容
before 和 after 创建一个元素,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法:element::before {}
before和ater必须有 content 属性
before在父元素内容的前面创建元素,,after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为1
盒子模型
CSS3中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变
可以分成两种情况
box-sizing: content-box 盒子大小为 width + padding + border(以前默认的)
box-sizing: border-box 盒子大小为 width,padding 和 border就不会撑大盒子了(前提 padding 和 border不会超过width宽度)
滤镜filter
语法:选择器 { filter: blur(5px); }
blur数值越大越模糊
calc函数
在声明CSS属性值时执行一些计算
例:width: calc(100% - 80px);
括号里可以使用 + - * / 来进行计算
过渡
谁做过渡给谁加
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
例:transition: all 2s;
过渡完成事件 transitionend
1.属性:想要变化的css属性,宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡,写一个 all 就可以
2.花费时间:单位是秒(必须写单位)比如0.5s
3.运动曲线:默认是ease(可以省略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间,默认是0s(可以省略)
运动曲线属性值:
linear # 匀速
ease # 逐渐慢下来
ease-in # 加速
ease-out # 减速
ease-in-out # 先加速后减速
2D转换transform
可以实现元素的位移、旋转、缩放等效果
常见属性值:
translate # 移动
rotate # 旋转
scale # 缩放
translate
例:transform: translate(x,y);
translate中的百分比单位是相对于自身元素的
不会影响到其他元素的位置
对行内元素没有效果
可以用来实现盒子的水平和垂直居中
rotate
可以设置转换中心点
例:transform: rotate(45deg);
rotate里面跟度数,单位是deg
角度为正时,顺时针,负时,为逆时针
可以用来实现三角效果
scale
可以设置转换中心点,并且不会影响其他盒子
例:transform: scale(x,y);
transform: scale(1,1) # 宽和高都放大一倍,相当于没有放大
transform: scale(2,2) # 宽和高都放大了2倍
transform: scale(2) # 只写一个参数,则第二个参数和第一个参数一样,等同于scale(2,2)
transform: scale(0.5,0.5) # 缩小0.5倍
转换中心点transform-origin
语法:transform-origin: x y;
注意后面的参数x和y用空格隔开
x,y默认转换的中心点是元素的中心点(50% 50%)
还可以给x,y设置 像素 或者 方位名词(top bottom left right center)
复合写法
语法:transform: translate() rotate() scale() ...等
其顺序会影响转换的效果
当同时有位移和其他属性时,记得要将位移放到最前面
3D转换
可以实现旋转木马等效果
三维坐标系
x轴:水平向右 注意:x右边是正值,左边是负值
y轴:垂直向下 注意:y下面是正值,上面是负值
z轴:垂直屏幕 注意:往外面是正值,往里面是负值
常见属性值:
translate3d(x,y,z) # 3D位移
rotate3d(x,y,z) # 3D旋转
perspective # 透视
transform-style # 3D呈现
透视perspective
原理图
![CSS3(学习笔记)不定期更新~ CSS3(学习笔记)不定期更新~](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2wvP249MjAmaT1ibG9nLzI1MTg4MjEvMjAyMTA5LzI1MTg4MjEtMjAyMTA5MDMxMzQ4NDI5MDktMTk4NDY0NzMzOC5wbmc=)
透视写在被观察元素的父盒子上
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体越大
3D移动translate3d
translform: translateX(100px) 仅仅是在x轴上移动
translform: translateY(100p×) 仅仅是在Y轴上移动
translform: translateZ(100p×) 仅仅是在Z轴上移动(注意:translateZ 一般用px单位)
transform: translate3d(x,y,z) 其中x、y、z分别指要移动的轴的方向的距离
3D旋转rotate3d
旋转后的元素,三维坐标系也会跟着旋转
transform:rotateX(45deg) 沿着x轴正方向旋转45度,正值“左手准则”,即往屏幕里面倒
transform:rotateY(45deg) 沿着y轴正方向旋转45deg,正值“左手准则”,即往屏幕右边倒
transform:rotateZ(45deg) 沿着Z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转deg为角度(了解即可)
例:transform:rotate3d(1,0,0,45deg) 沿着x轴旋转45度
例:transform:rotate3d(1,1,0,45deg) 沿着对角线旋转45度
3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style: flat 默认的,不开启3d立体空间
transform-style: preserve-3d 开启3d立体空间
这个属性写在父级,但是影响的是子盒子
动画animation
可以实现大数据热点动画
元素可以添加多个动画,同英文逗号 , 分隔
1.先定义动画,用@keyframes(关键帧)定义动画
关键词 "from" 和 "to",等同于 0% 和 100%
可以给动画序列增加节点,如25%、50%、75%等
/* move 是自定义动画名称 */
@keyframes move {
/* 0% 是开始状态 */
0% {
width: 100px;
}
/* 100% 是结束状态 */
100% {
width: 200px;
}
}
2.调用动画
div {
/* 调用动画,move是自定义好的动画名称 */
animation-name: move;
/* 动画的持续时间 */
animation-duration: 2s;
}
动画属性:
animation-timing-function属性值
linear # 匀速
ease # 逐渐慢下来
ease-in # 加速
ease-out # 减速
ease-in-out # 先加速后减速
steps() # 指定动画分几步完成
复合写法
语法:animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
简写属性里面不包含 animation-play-state
暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来,而不是直接跳回来: animation-direction: alternate
盒子动画结束后,停在结束位置: animation-fill-mode: forwards
opacity 属性
设置元素的不透明度
例:opacity:0.5;
渐变
背景线性渐变linear-gradient
背景渐变必须添加浏览器私有前缀
起始方向可以是:方位名词 或者度数,如果省略默认就是top
/* background: linear-gradient(起始方向, 颜色1, 颜色2); */
background: -webkit-linear-gradient(left, red, blue);
/* 对角:从左上角到右下角的线性渐变 */
background: -webkit-linear-gradient(left top, red, blue);
/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background: linear-gradient(0deg, blue, green 40%, red);