其他分享
首页 > 其他分享> > CSS3(学习笔记)不定期更新~

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