____________________________________________________________________________________
动画:使得元素从一种样式逐渐变化为另一种样式(多个样式之间的平缓变化的过程)
过渡:属性的一个值到另外一个值的变换,简单的动画
动画可以通过 "关键帧" 控制动画的每一步,可以使元素从 "一种样式" 逐渐变化为另一种 "样式"
注意:动画操作有浏览器兼容性
-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 );
}