CSS CORE2

____________________________________________________________________________________

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

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

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

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

         -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{        /*滚动条的滑轨*/

  background-color: transparent;

  opacity: 0;

}

::-webkit-scrollbar-thumb{        /*滚动条的滑块*/

  background-color: transparent;

  opacity: 0;

}

::-webkit-scrollbar-button{        /*滚动条轨道两头的按钮*/

  background-color: transparent;

  opacity: 0;

}

::-webkit-scrollbar-track-piece{        /*内层轨道*/

  background-color: transparent;

  opacity: 0;

}

::-webkit-scrollbar-corner{        /*横向滚动条和纵向滚动条相交处的尖角*/

  background-color: transparent;

  opacity: 0;

}

::-webkit-resizer{        /*两个滚动条的交汇处用于调整元素大小的控件*/

  background-color: transparent;

  opacity: 0;

}

隐藏浏览器自带的滚动条:

父元素设置overflow:hidden,高为100vh,滚动元素大于父元素的width,并设置overflow:auto

section{ width:100%; height:100vh;overflow:hidden; }            /*父元素*/

section>div{ width:200%; height:100%; overflow:auto; }        /*滚动元素*/

section>div>div{ width:50%; }                                             /*存放内容的元素*/

_______________________________________________________________________________________

网格布局(Grid)

创建网格布局: ① display: grid;

                     ② display: inline-grid;

属性:

① 定义轨道宽高:

grid-template-rows: 50px 100px;    定义2个行轨道(可以是任何非负的长度值: px、%、rem等)

grid-template-columns: 90px 50px 120px;    定义3个列轨道

grid-template-columns: 1fr 1fr 2fr;              定义轨道尺寸配额,表示按配额比例分配可用空间

grid-template-columns: 3rem 25% 1fr 2fr;   fr和其它长度单位混合使用时,fr的计算基于其它单位分配后剩余的空间

grid-template-columns: minmax(auto, 50%) 1fr 3rem;   minmax()接收2个参数(第1个最小,第2个最大)

grid-template-columns: repeat(3, 1fr) 10px;   repeat()接收2个参数(第1个是重复次数,第2个轨道尺寸)

② 定义网格间隙:

grid-column-gap: 20px;    定义网格间隙(只创建在行列之间,项目与边界之间无间隙)

grid-row-gap: 5rem;

简写: grid-gap: 100px 1rem;    若只有一个值,其即表示行间隙,也表示列间隙

③ 用网格线编号定位项目:

grid-row-start:2; grid-row-end:3; grid-column-start:2; grid-column-end:3;    编号从1开始,以1为步长

简写: grid-row:2; grid-column:3/4;    若只指定一个值,则只表示开始,两个值用 / 分隔

简写: grid-area: 2/2/3/3;  分别是grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写

④ 网格项目跨越行列:

网格项目默认占用一行和一列,但可以定位项目的属性来指定项目跨越多行或多列:

grid-column-start:1; grid-column-end:4;    网格项目跨越多列

grid-row:2/span 3; grid-column:span 2;    关键字span可以用来指定跨越行或列的数量

⑤ 层叠网格项目:

通过项目定位可以使多个项目层叠在一起,属性z-index可以改变层叠项目的层次

例: .item-1, .item-2{ grid-row-start:1; grid-column-end:span 2; }

     .item-1{ grid-column-start:1;z-index:1; }    .item-2{ grid-column-start:2; }

⑥ 网格项目的对齐方式:

justify-items和justify-self以行轴为参照对齐项目

align-items和align-self    以列轴为参照对齐项目

支持的值:

1、aoto

2、normal

3、start            在轴线起点处对齐

4、end             在轴线的终点处对齐

5、center         在轴线的中心处对齐

6、stretch        在轴线的方向延伸并填满整个区域

7、baseline

8、first baseline

9、last baseline

⑦ 网格轨道的对齐方式:

align-content    定义网格轨道延着行的轴线的对齐方式

justify-content  定义网格轨道延着列的轴线的对齐方式

1、normal

2、start

3、end

4、center

5、stretch

6、space-around      在每一列的两侧平均分配额外空间

7、space-between    在列与列之间平均分配额外的空间

8、space-evenly       在列与列之间及列与边界之间平均分配额外空间

9、baseline

10、first baseline

11、last baseline

_______________________________________________________________________________________

自定义属性:

a{ --focus-color1:blue; }                                   /*自定义变量focus-color,设定颜色值、应用元素*/

:root{ --focus-color2:yellow; }                           /*定义在:root伪类中,全局可用*/

a:hover{ --focus-color1:red; }                           /*hover时修改自定义的值*/

a{ background-color: var(--focus-color1); }        /*应用此自定义变量*/

a{ background-color: var(--focus-color2, #333) }    /*设置回退值#333,自定义属性无效或未设置时使用*/

注意:自定义属性区分大小写

使用js操作css自定义属性:

var elem = document.querySelector('a');

var cssStyle = getComputedStyle( elem );        //获取a标签的样式

var cssVal = String( cssStyle.getPropertyValue('--focus-color1') ).trim();    //获取css自定义属性的值

elem.style.setProperty('--focus-color1', '#999');        //修改css自定义属性

_______________________________________________________________________________________

display: contents  该元素会导致自身的盒子不生成,但所有的子元素照常生成(对于选择器没有影响),可用于弹性布局或网格布局的非直接子元素能应用这些布局

position: sticky粘性定位,让元素在页面滚动时不脱离文档流,如同在正常流中,但当其滚动到相对于视口的某个特定位置(阈值)时,会固定在屏幕上,如同fixed一样。但兼容性差,在不兼容的浏览器中会被忽略并退到设置的滚动方式(或relative)

例: {position:-webkit-sticky; position:sticky; top:0; left:0; right:0;}  此阈值为top=0

注意:

① 必须指定top,left,right,bottom四个阈值中的一个,才可使粘性定位生效

② 必须设置(或默认)  body{ overflow:visible; }

_______________________________________________________________________________________

css3混合模式:

mix-blend-mode: difference;    将文本的颜色与背景颜色互换

mix-blend-mode 定义元素与背景的混合模式,可以是元素与背景图片的混合,也可以是元素与背景色的混合

background-blend-mode  定义背景的混合模式,可以是背景图片与背景图片的混合,也可以是背景图片与背景色的混合

_______________________________________________________________________________________

clip-path 裁剪路径

clip-path: none;    不使用裁剪路径

clip-path: circle(50px at 50px 50px);  在元素的(50px, 50px)处,裁剪生成一个半径为50px的圆

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%,

                           50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);    裁剪生成一个十边形

clip-path可以进行transtion过渡与animation动画切换,但进行过渡的两个状态的坐标顶点数量必须一致(但可以使其中n个坐标点重合)

shape-outside 图文混排,只能和float浮动一起使用

取值:

shape-outside:none;

shape-outside:margin-box;

shape-outside:content-box;

shape-outside:border-box;

shape-outside:padding-box;

shape-outside:circle(80px at 80px 80px);    在元素的(80px, 80px)坐标处生成一个80px半径的圆

shape-outside:ellipse();

shape-outside:inset(10px 10px 10px 10px);

shape-outside:polygon(10px 10px, 20px 20px, 30px 30px);

_______________________________________________________________________________________

伪类选择器 :focus-within

表示一个元素或该元素的后代获得焦点,都会触发 :focus-within,类似于js的冒泡

兼容性: 只有最新版浏览器支持该属性

writing-mode 改变排版规则

语法:

-ms-writing-mode: lr-tb;

writing-mode: horizontal-tb;    默认值,文本流按水平方向排列

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;        文本按垂直方向排列,阅读顺序从右向左

-ms-writing-mode: tb-lr;

writing-mode: vertical-lr;        文本按垂直方向排列,阅读顺序从左到右

注意:可设置margin:auto;用于水平方向垂直居中

         除中文外,英文、数字、字体符号会自动旋转90°

_______________________________________________________________________________________

css mask可以让蒙版区域透过去,不透明区域保留出来

用法与background基本一致

如:

img{

  -webkit-mask-image: url(图片地址);

  mask-image: url(图片地址);        图片支持svg、png、gif等

}

@supports not (mask-size: cover){

  不支持mask-image的样式

}

________________________________________________________________________________________________

浏览器平滑滚动

html, body{ scroll-behavior:smooth }    设置平滑滚动

  返回顶部              点击可平滑滚动到顶部

_______________________________________________________________________________________

使div看上去像一个按钮(设置为none可去掉效果)

div{

  -moz-appearance: button;

  -webkit-appearance: button;

  appearance: button;

}

_______________________________________________________________________________________

根据用户设备的分辨率匹配合适的图像

div{

  background-image: image-set( url('test.png') 1x, url('[email protected]') 2x, url('[email protected]') 3x );

}

你可能感兴趣的:(CSS CORE2)