在前端开发工作中总会遇到各种各样的坑，今天这篇博文就是为了记录下踩过的坑，分析后发现容易掉坑里的地方一般是自己不熟悉的知识点或者是易忽略的知识点。故作此文，谨以自勉。
用css3播放逐帧动画
动效设计师给了我们11张(300*300)帧动画图片，现需要用css3以动画的形式播放这些图片
第一个想到的办法就是通过animation改变DOM元素的背景图片
.boom-2{
position: fixed;
300px;
height:300px;
transform:translate(-50%,-50%);
pointer-events: none;
animation: boom-2 1s forwards;
}
@keyframes boom-2{
0%{
background-image: url("../hit/0.png");
}
10%{
background-image: url("../hit/1.png");
}
20%{
background-image: url("../hit/2.png");
}
30%{
background-image: url("../hit/3.png");
}
40%{
background-image: url("../hit/4.png");
}
50%{
background-image: url("../hit/5.png");
}
60%{
background-image: url("../hit/6.png");
}
70%{
background-image: url("../hit/7.png");
}
80%{
background-image: url("../hit/8.png");
}
90%{
background-image: url("../hit/9.png");
}
100%{
background-image: url("../hit/10.png");
}
}
结果在chrome firefox上运行良好，可是在IE上看不到效果,在网上搜一下发现
background-image不支持动画
既然不行那就在想想办法。
第二种办法就是通过动画改变background-position,在加上以帧动画的形式播放,关键点：animation-timing-function:steps(11);
.boom-2{
position: fixed;
300px;
height:300px;
transform:translate(-50%,-50%) scale(0.5);
pointer-events: none;
animation: boomSvg 0.4s steps(11) forwards;
background-image: url("./boom.png");
}
@keyframes boomSvg{
0%{
background-position: 0 0;
}
100%{
background-position: 0 -1100%;
}
}
至此完美解决帧动画播放问题。
通过这个问题发现自己对css3动画不是非常了解，就顺便在延展下
animation 属性是一个简写属性，用于设置8个动画属性：
- animation-name //规定需要绑定到选择器的 keyframe 名称
- animation-duration //规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function //规定动画的速度曲线
- animation-delay //规定在动画开始之前的延迟。
- animation-iteration-count //规定动画应该播放的次数
- animation-direction //规定是否应该轮流反向播放动画
- animation-fill-mode //属性规定动画在播放之前或之后，其动画效果是否可见
- animation-play-state //属性规定动画正在运行还是暂停
animation-fill-mode
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
animation-play-state
| 值 | 描述 |
|---|---|
| paused | 规定动画已暂停 |
| running | 规定动画正在播放 |
animation-timing-function
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
以上animation-timing-function的值都是实现线性变化（两个状态之间是逐渐变化过去），其实animation-timing-function还可以实现帧动画（两个状态之间是直接跳跃变化）
steps(11,start)
第一个参数 number 为指定的间隔数，即把两关键帧分为 n 步阶段性展示
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end
- start在变化过程中，都是以下一帧的显示效果来填充间隔动画，
- end与上面相反，都是以上一帧的显示效果来填充间隔动画，
line-height属性再探究
line-height: normal | <number> | <length> | <percentage> | inherit
Inherited: yes
Percentages: refer to the font size of the element itself
line-height默认值为normal 不允许用负值
当元素没有设置高度的时候，其实是由line-height撑开了元素的高度
以百分数或数字为单位的时候是相对与本身字体大小而得到的计算结果
下面代码中设置的三个行高结果是相同的
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
通过设置line-height和height常用于单行文字的垂直居中
通过line-height也可设置多行文本的垂直居中
asdfkjkj暗示的风景好看阿斯蒂芬框架啊世纪东方sadf
```css p{ 250px; line-height: 150px; } span{ display: inline-block; vertical-align: middle; line-height: 20px;/*作用是设置文本的行高，并覆盖掉父元素的行高*/ } ```css行高line-height的一些深入理解及应用
参考链接
pointer-events属性让点击事件穿透
在直播间特效开发中遇到点击图片无响应(图片父元素已绑定点击事件),仔细研究发现由于特效图片切换太快而不能将点击事件冒泡到父元素
解决办法：在特效图片上添加以下css属性，这样使得点击事件能够直接穿透到父元素上
img{
pointer-events:none;
}
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
none:元素永远不会成为鼠标事件的target
兼容性：IE11+
参考链接
Date.parse()获取时间戳IOS不兼容的问题
因为IOS系统不支持2017-01-01格式的时间导致的，
用正则替换2017-01-01日期格式为2017/01/01后问题解决
var mydata = '2017-01-01 11:00:00';
mydata=mydata.replace(/-/g, '/');
var time = Date.parse(new Date(mydata)) / 1000;
移动端禁止页面长按复制
在前端页面开发中有时会因为用户点击而导致页面被全选出现蓝色，这时可以禁用全选
body{
user-select:none;
}
user-select：none | text | all | element
none：文本不能被选择
text：可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：可以选择文本，但选择范围受元素边界的约束
兼容性：IE10+ 需要添加浏览器前缀 -ms- -moz- -webkit-
详细可参考user-select
chrome滚动条样式
该样式只适用于webkit内核浏览器，由于兼容性问题，目前工作中改用改进后的slimscroll.js插件
.scrollBox{
overflow-y: auto;
&::-webkit-scrollbar{
10px;
}
&::-webkit-scrollbar-button{
background-color: transparent;
}
&::-webkit-scrollbar-track{
background-color: transparent;
}
&::-webkit-scrollbar-thumb{
background-color: #fe2545;
border-radius: 5px;
}
}
镂空字体1
Jesse
关键css: `-webkit-text-stroke: 1px red;` 兼容性: IE都不兼容 Edge16+ 需要加-webkit-前缀 firefox58+ 需要加-webkit-前缀 chrome 需要加-webkit-前缀镂空字体2
背景是图片
Jesse
渐变字体
背景是渐变色
Jesse
``` .text{ font-size:40px; font-weight:bold; color: #fde2ba; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fffaf3), to(#fbc677)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ```3D字体
用的是多层背景
控制元素在IOS设备上是否使用滚动回弹效果
从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用。
body {
-webkit-overflow-scrolling: touch;/*ios*/
}
css波浪下划线
css3外发光
```css div{ box-shadow: 0 0 10px #000; } ``` ### css3内发光 ```css div{ box-shadow: 0 0 10px #000 inset; } ```ios中激活active伪类
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
//ios中激活active伪类
document.body.addEventListener('touchstart', function () {});