canvas和纯 CSS 实现波浪进度图
使用 SVG 实现波浪效果（SVG、CANVAS 实现贝塞尔曲线）
使用 canvas 实现波浪效果的原理与 SVG 一样，都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。
主要是利用了动态绘制 ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果。
纯 CSS 实现波浪效果（这里背景是蓝色静止的，运动是白色的椭圆形）
后面漂浮的波浪效果，其实就是利用了上面的 border-radius: 45% 的椭圆形，只是放大了很多倍，视野之外的图形都 overflow: hidden ，只留下了一条边的视野，并且增加了一些相应的 transform 变换。
为了方便写 DEMO，用到的长度单位是 VW 与 VH，不太了解这两个单位的可以戳这里：vh、vw、vmin、vmax 知多少
在动画过程中，动态的改变 border-radius 的值；
在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形；
上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。
一个圆形的进度和波浪状态的滑动的新DEMO查看预览。
气泡 Loading 效果
这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。
角向渐变 conic-gradient() + mask 以及两个伪元素。
我们需要多一组元素，将其绝对定位到上述圆环的头部或者尾部
给每个子元素随机设置多个大小不一的圆，颜色保持一致
给每个子元素随机设置不同方向的，向外扩散的位移动画
给每个子元素随机设置负的 animation-delay，造成动画上的先后顺序，并以此形成整个无限循环的气泡扩散动画
核心在于 @for $i from 1 through 100 { } 这段 SASS 代码内部
将两个滤镜拿出来，它们的作用分别是：
filter: blur()： 给图像设置高斯模糊效果。
filter: contrast()： 调整图像的对比度。
让每个小球在动画的 75% ~ 100% 阶段做透明度从 1 到 0 的变换，而 0% ~ 75% 的阶段保持透明度为 0
让 200 个 div 依次进行这个动画效果（利用负的 animation-delay，从 -0 到 -4000ms），整体上就能形成逐渐消失的效果
css样式粒子散开的按钮
CSS实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是box-shadow，还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS动画，但是另外两个background-size和background-position支持呀，所以，CSS transition和CSS animation都可以用起来。animation和transition实现原理比较类似，优点是可以做出更加精细的动画，这里就拿:active方式来说吧。transition设置在:hover下就可以了，表示只有当鼠标经过时才有过渡，离开时没有。:active需要transition:0s；animation和transition实现原理比较类似，优点是可以做出更加精细的动画。CSS直接扔到项目里就能用。
css样式粒子动效的按钮
CSS实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是box-shadow，还有一个是background-image。这里主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。虽然background-image不支持CSS动画，但是另外两个background-size和background-position支持呀，所以，CSS transition和CSS animation都可以用起来。animation和transition实现原理比较类似，优点是可以做出更加精细的动画，这里就拿:active方式来说吧。transition设置在:hover下就可以了，表示只有当鼠标经过时才有过渡，离开时没有。:active需要transition:0s；animation和transition实现原理比较类似，优点是可以做出更加精细的动画。CSS直接扔到项目里就能用。
Chrome浏览器中Vue的结构化组件
安装后，在浏览器上可以查看Vue项目的数据结构和对应的数据交互。
gulp创建项目和精灵图实现
let spriteData = gulp.src(sprite_path + dir + "/*").pipe(
spritesmith({
imgName: dir + "-sprite.png", // 合成后的图片命名
cssName: dir + "-sprite.scss", // 合成后的图标样式
padding: 5, // 雪碧图中两图片的间距
algorithm: "binary-tree",
imgPath: "./../images/" + dir + "-sprite.png",
// // 雪碧图css类名前缀
// cssOpts: {
// cssSelector: function (sprite) {
// return '.s-' + dir + '-' + sprite.name;
// }
// }
cssTem
RSS订阅
2
231