动画及 css3

不同地方二维码的样式都是通过:before及:after的css实现，样式全局只使用一个类名。只用css(不使用js)`动态高效来展示不同地址的二维码图片

1、svg SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它

两个相邻兄弟层级ui层，实现穿透点击。在页面上弹出弹幕，有些用户的操作点是在弹幕下，需要穿透弹幕实现点击操作，本文就这个问题列举些部分解决方法

1、原理： pointer-events：主要是用来控制鼠标事件，none元素是不会成为鼠标事件 animation：防止重复提交，主要是一段时间后可以再重新触发，可以通过动画时长去限制 steps：

1、使用 CSS3 animation 原理通过animation控制Sprites图片的background-position值模拟gif效果 图片可以无损，还可以很轻松地控制图片动画的暂停和播放

1、使用:not伪元素同时否定多个选择器，在部分手机低端浏览器存在不兼容问题。使用伪元素发现在部分移动端机型中，存在一些差异化比较严重的兼容性，因此本文记录:not的一些注意事项

之前知道border可以制造三角形、多边形外，最近无意间看到一个关于border-radius使用，可以创造出一些特殊的不规则图形。因此很多不用通过图片就能轻易实现效果，而且兼容性也比较好。

在项目中，按照设计稿的样式设计页面，有些字体需要小于12px，在移动端可以正常显示，但是在pc端的谷歌浏览器就出现字体大小不变导致，页面排列出现差异。需要支持谷歌浏览器支持小于12px字体的显示

项目中需要使用五个星星进行评分展示，尤其当前项目阶段，只是服务端渲染展示而已，不需要人为手动评分等。因此为了减少js代码，纯粹使用css实现这个效果，提高加载速度

由于移动端web和pc端web中存在很多需要被点击元素，一点击之后就会有一系列动作发生。为了能够让使用者，一眼看出自己操作了什么，因此需要实现一套点击效果。

由于容器隐藏横向滚动条后，移动端横向滚动效果不受影响，但是pc端是无法通过鼠标进行横向滚动，因此需要自己手动实现效果。

使用visibility去控制显示。使用display:none隐藏 DOM 元素，会同时导致重排和重绘；使用visibility:hidden只会造成重绘，因为没有布局和位置的改变，所以不发生重排，

说说less, scss, stylus的特点？ CSS预处器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS

设计要求： 初步实现： 注意事项：如果需要在模糊背景上面，实现高清文字及其他东西的话，需要在其兄弟元素上设置，否则在模糊背景的子元素下，也是默认模糊效果的 演示如下 filter:将模糊或颜色偏移等图

一些不常见的css写法，展现的效果却是非常有用的，可以减少大量代码或者css样式，因此记录下来，方便后续使用

环形进度条的思路，需要使用两个半圆环+transform+clip 实现环形进度条 第一步，先实现两个半圆环。需要实现半圆环，有多种方式，我选择clip进行裁切。clip的值主要为rect(top, 

选择用动画实现，由于js实现的动画运行在CPU，css3的动画运行在GPU，css3渲染成本低，最后决定用css3去实现这类操作。 使用scrollLeft 一开始使用scrollLeft+overf

解决思路：先动态生成每个圆角的图片，然后把每个圆角的图片合成一张图。需要使用的方法主要是：canvas里的clip drawIamge promise 以及图片的动态js加载 drawImage(im