CSS3（学习笔记）不定期更新~

属性选择器 可以不用借助于类或者id选择器 例：

/* 必须是input，但是同时具有value这个属性，选择这个元素 */
input[value] {
    color: skyblue;
}
/* 只选择 type=text 文本框的input */
input[type=text] {
    color: pink;
}

 

结构伪类选择器 例：

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 原理图 透视写在被观察元素的父盒子上 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);

 

标签：CSS3,动画,不定期,ease,元素,transform,笔记,animation,属性
来源： https://www.cnblogs.com/sweet-potatos/p/15222791.html