CSS CORE2

作者: fastwe | 来源:发表于2018-11-26 22:03 被阅读0次

____________________________________________________________________________________

动画：使得元素从一种样式逐渐变化为另一种样式（多个样式之间的平缓变化的过程）

过渡：属性的一个值到另外一个值的变换，简单的动画

动画可以通过 "关键帧" 控制动画的每一步，可以使元素从 "一种样式" 逐渐变化为另一种 "样式"

注意：动画操作有浏览器兼容性

-moz- -webkit- -o- -ms-

元素必须是行内块元素或块级元素

使用动画步骤：① 声明动画：指定动画名称以及创建动画中的每个状态（关键帧）

② 为元素调用动画：指定调用的动画名称，时长，播放次数…

1、声明动画：为动画指定名称及定义关键帧

关键帧：当前元素状态的时间点及样式，由动作（样式）和时间组成

@keyframes 动画名称{ /*动画名称不可使用关键字*/

0% / from{ 动画开始时的样式 } /*声明关键帧*/

……

50%{动画执行到一半的时候的样式} ...

……

100% / to{ 动画结束时的样式 } ...

}

使用：animation：动画名 .8s linear infinite

两段时间设置相同的帧，可以使之停顿一段时间

注意：尽量用 %，而不用 from...to(Android2.3的需要以0%开始,以100%结束)

浏览器兼容性：

@-moz-keyframes 动画名称{}

@-ms-keyframes 动画名称{}

@-o-keyframes 动画名称{}

@-webkit-keyframes 动画名称{

0% / from{ 动画开始时的样式 }

...

100% / to{ 动画结束时的样式 }

}

@keyframes 动画名称{}

使用：

-moz-animation：动画名称 .8s linear infinite;

-ms-animation：动画名称 .8s linear infinite;

-o-animation：动画名称 .8s linear infinite;

-webkit-animation：动画名称 .8s linear infinite;

animation：动画名称 .8s linear infinite;

注意: 动画名称建议使用2个单词，否则易出错

2、为元素调用动画

① 作用：指定调用的动画名称

属性：animation-name：

-webkit-animation-name：

② 作用：动画完成一个周期的执行时长

属性：animation-duration：

取值：s / ms

③ 作用：指定动画执行的速率

属性：animation-timing-function：

取值：ease，linear，ease-in，ease-out，ease-in-out

④ 作用：指定动画播放之前的延迟时长

属性：animation-delay：

取值：s / ms

注意：当播放多次时，延迟只是指播放之前的一次延迟，下次播放不再延迟

⑤ 作用：指定动画的播放次数

属性：animation-iteration-count：

取值：1、具体数字

2、关键字：infinite(无限次播放)

⑥ 作用：指定动画播放方向

属性：animation-direction

取值：1、normal 默认值，正向播放：0% ~ 100%

2、reverse 逆向播放：100% ~ 0%

3、alternate 轮流播放，奇数次时，正向播放；偶数次时，逆向播放（大于1时才有效）

⑦ 缩写：animation 下面的⑧、⑨不能简写

animation：name(必给) duration(必给) timing-function delay iteration-count direction;

⑧ animation-fill-mode

作用：指定动画在播放前或播放后的填充状态

取值：1、none 不改变默认行为

2、forwards 动画完成后，状态将保持在最后一帧状态上

3、backwards 动画在播放前（延迟时间内）状态显示在第一帧上（只有在延迟(delay)时间内才会显示效果）

4、both 播放前后，分别放在第一帧和最后一帧上

⑨ animation-play-state

作用：指定动画的播放状态（运行还是暂停）

取值：1、paused 动画暂停

2、running 动画播放

动画声明在激发操作的属性中，网页加载完后动画运行；动画声明在声明属性中，网页加载时就开始运行

加载中动画：

.loading{

white-space: nowrap;

width: 60%;

height: 50px;

margin: 2rem auto 0;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

}

.loading>div{

width: 20px;

height: 20px;

border-radius: 50%;

border: 2px solid #666;

border-bottom-color: transparent;

margin-right: 10%;

-webkit-animation: loadding .8s linear infinite;

animation: loadding .8s linear infinite;

}

@-webkit-keyframes loadding{

0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg) }

50%{ -webkit-transform:rotate(180deg); transform:rotate(180deg) }

100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg) }

}

@keyframes loadding{

0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg)}

50%{ -webkit-transform:rotate(180deg); transform:rotate(180deg)}

100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg)}

}

js动画和css3动画的差异性:

① 功能涵盖面，js比css大

② 实现/重构难度不一，css3比js更简单，性能调优方向固定

③ 对帧速表现不好的低版本浏览器，css3可以做到自然降级

④ css动画有天然事件支持

⑤ css3有兼容性问题

进阶********************************************************************************

Web动画性能比较：GPU硬件加速css动画 > 非硬件加速css动画 > JavaScript动画

现代浏览器在完成以下4种属性的动画时，消耗成本较低：

① position：transform: translate(Xpx, Ypx)

② scale： transform: scale(value)

③ rotation：transform: rotate(*deg)

④ opacity： transform: 0 ... 1

开启GPU加速:

div{

will-change: transform;

transform: translateZ(0); /*Safari和一些旧浏览器无法识别will-change，做的兼容性*/

}

会使声明了该样式属性的元素生成一个图形层，相当于提前告诉浏览器将会进行transform变换，让浏览器提前做好准备

但是也不要将其应用在太多的元素上，过度使用会导致页面响应缓慢或者消耗非常多的资源

_______________________________________________________________________________________

CSS3 Filter 改变模糊度、亮度、透明度...

CSS3 Filter (滤镜)属性提供了模糊和改变元素颜色的功能，常用于调整图像的渲染、背景、边框的显示效果

-webkit-filter 是css3的一个属性，Webkit率先支持了这几个功能，效果很不错

现在规范中支持的效果有:

① blur 模糊值为length

② brightness 亮度值为0-1之间的小数

③ contrast 对比度值为num

④ grayscale 灰度值为0-1之间的小数

⑤ hue-rotate 色相旋转值为angle

⑥ invert 反色值为0-1之间的小数

⑦ opacity 透明度值为0-1之间的小数

⑧ saturate 饱和度值为num

⑨ sepia 褐色值为0-1之间的小数

⑩ drop-shadow 阴影

无效果 -webkit-filter: none;

① 模糊

-webkit-filter: blur(9px);

filter: blur(9px);

② 亮度

-webkit-filter: brightness(2.3);

filter: brightness(2.3);

③ 对比度

-webkit-filter: contrast(4.4);

filter: contrast(4.4);

④ 灰度

-webkit-filter: grayscale(1);

filter: grayscale(1);

⑤ 色相旋转

-webkit-filter: hue-rotate(185deg);

filter: hue-rotate(185deg);

⑥ 反色

-webkit-filter: invert(1);

filter: invert(1);

⑦ 透明度

-webkit-filter: opacity(55%);

filter: opacity(55%);

⑧ 饱和度

-webkit-filter: saturate(3.6);

filter: saturate(3.6);

⑨ 褐色

-webkit-filter: sepia(0.77);

filter: sepia(0.77);

⑩ 阴影

-webkit-filter: drop-shadow(0px 0px 5px #000);

filter: drop-shadow(0px 0px 5px #000);

____________________________________________________________________________________

在CSS3中，background-clip属性规定背景的绘制区域

它的值有3个：

border-box 背景绘制在边框方框内(border上)，裁切成边框方框(默认值)，最大

padding-box 背景绘制在衬距方框内(padding上)，剪切成衬距方框

content-box 背景绘制在内容方框内(padding内)，剪切成内容方框，最小

____________________________________________________________________________________

用户可否选中

属性：-ms-user-select -moz-user-select -o-user-select -webkit-user-select user-select

取值：① text 可以选择文本（默认值）

②none 文本不能被选择

③ all 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素

④ element 可以选取文本，但选择范围受元素边界的约束

是否阻止元素成为鼠标事件目标

属性：pointer-events

取值：auto 默认，不阻止

none 元素永远不会成为鼠标事件的target，但是，当其后代元素的pointer-events属性指定其它值时，鼠标事件可以指向其后代元素，此时，鼠标事件将在捕获/冒泡阶段触发父元素的事件监听器

_______________________________________________________________________________________

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear{

display：none; //禁用PC端表单输入框默认清除按钮

}

____________________________________________________________________________________

resize 指定一个元素是否允许用户调整大小

取值：① none 用户无法调整元素的尺寸

② both 用户可调整元素的高度和宽度

③ horizontal 用户可调整元素的宽度

④ vertical 用户可调整元素的高度

注意：只有当溢出值(overflow)不为visible时才生效

____________________________________________________________________________________

text-overflow属性，规定当文本溢出包含元素时发生的事情

取值：① clip 修剪文本

② ellipsis 显示省略符号来代表被修剪的文本

③ string 使用给定的字符串来代表被修剪的文本

条件：

① 设置overflow：hidden

② 不能设置为display：inline-flex或flex

③ 强制文本在一行内显示(white-space：nowrap)

溢出显示省略号，当手指按住元素时显示全部文本

div{

white-space:nowrap;

text-overflow:ellipsis;

overflow:hidden;

}

div:active{

text-overflow:inherit;

overflow:visible;

}

____________________________________________________________________________________

calc() 用于动态计算

注意：运算符前后各需要保留一个空格，例如：width: calc(100% - 10px)

使用：①任何长度值都可以使用calc()函数进行计算

② calc()函数支持 + - * /

③ calc()函数使用标准的数学运算优先级规则

兼容性：

-moz-calc(...); /*Firefox*/

-webkit-calc(...); /*chrome safari*/

calc();

$("div").css('width', 'calc(100% - 20px)'); //在jQuery中使用calc，运算符两边需要加空格

____________________________________________________________________________________

-webkit-font-smoothing 字体抗锯齿属性

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服

font-smoothing是非标准的CSS定义，它被列入标准规范的草案中，后由于某些原因从web标准中被移除了，

但可以用以下两种定义进行抗锯齿渲染

-moz-osx-font-smoothing：grayscale; /*firefox*/

-webkit-font-smoothing：antialiased; /*chrome、safari*/

它有三个属性值

none 对低像素的文本比较好

subpixel-antialiased 默认值

antialiased 抗锯齿很好

____________________________________________________________________________________

修改 overflow:auto 产生的滚动条

::-webkit-scrollbar{ /*滚动条整体*/

width: 0;

height: 0;

}

::-webkit-scrollbar-track{ /*滚动条的滑轨*/