日常笔记

• wow
  • 资源：https://www.helloweba.net/demo/2018/wowjs/js/wow.min.js
  • 示例：https://www.helloweba.net/demo/2018/wowjs/
  • 在需要制作动画的元素上添加wow类： <div class=”wow“>
  • new WOW().init();
• aos
  • 资源：https://unpkg.com/aos@2.3.0/dist/aos.css https://unpkg.com/aos@2.3.0/dist/aos.js
  • 示例：https://codepen.io/michalsnik/pen/WxNdvq
  • 教程：http://www.manongjc.com/article/93891.html
  • 1
  • AOS.init({ easing: ‘ease-out-back’, duration: 1000 });
  • 淡入淡出动画：fade-up | fade-down | fade-left | fade-right | fade-up-right | fade-up-left | fade-down-right | fade-down-left
  • 翻转动画：flip-up | flip-down | flip-left | flip-right
  • 滑动动画：zoom-in | zoom-in-up | zoom-in-down | zoom-in-left | zoom-in-right | zoom-out | zoom-out-up | zoom-out-down | zoom-out-left | zoom-out-right
  • 缩放动画：zoom-in | zoom-in-up | zoom-in-down | zoom-in-left | zoom-in-right | zoom-out | zoom-out-up | zoom-out-down | zoom-out-left | zoom-out-right
  • 滑动动画：slide-up | slide-down | slide-left | slide-right
  • easing动画：linear | ease | ease-in | ease-out | ease-in-out | ease-in-back | ease-out-back | ease-in-out-back | ease-in-sine | ease-out-sine | ease-in-out-sine | ease-in-quad | ease-out-quad | ease-in-out-quad | ease-in-cubic | ease-out-cubic | ease-in-out-cubic | ease-in-quart | ease-out-quart | ease-in-out-quart
  • 锚位置：

• • 椭圆
    • cx 水平方向的偏移量
    • cy 垂直方向的偏移量
    • rx 水平方向直经
    • ry 垂直方向直经
    • style 也可以不写style 直接写标签上
      • stroke 线条颜色
      • stroke-width 线条粗细
      • fill 背景色
  • 圆形
  • 矩形
    • height:100%
    • width
  • 线
    • d=”M20,230 Q40,205 50,230 T90,230”
      • M：moveto xy轴坐标
      • L： lineto xy轴坐标
      • H： horizontal lineto
      • V ：vertical lineto
      • Z：closepath
    • style fill stroke stroke-width
  • 多边形状
    • points=”220,100 300,210 170,250” 定义多边形每个角的 x 和 y

• border-top-right-radius
• border-top-left-radius
• border-bottom-right-radius
• border-bottom-left-radius

• blur(px) 为图像设置高斯模糊
• brightness(%) 调整图像的亮度，默认值为 100％
• contrast(%) 调整图像的对比度，默认值为 100％
• drop-shadow(h-shadow v-shadow blur spread color) 为图像添加阴影效果
• h-shadow：必填值
• v-shadow：必填值，指定垂直方向阴影的像素值
• blur：可选值，为阴影添加模糊效果
• spread：可选值，默认值为 0
• color：可选值，为阴影添加颜色
• 注意：Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数，如果添加
• grayscale(%) 将图像转换为灰度图像，默认值为 0%
• hue-rotate(deg) 给图像应用色相旋转，该值用来定义色环的度数
• invert(%) 反转图像，默认值为 0%
• opacity(%) 设置图像的不透明度，默认值为 100%
• saturate(%) 设置图像的饱和度，默认值为 100%
• sepia(%) 将图像转换为棕褐色，默认值为 0%
• url() url() 函数用来指定一个 XML 文件，文件中设置了一个 SVG 滤镜
• initial 将属性设置为其默认值
• inherit 从父元素继承此属性的值

• mix-blend-mode: normal; //正常
• mix-blend-mode: multiply; //正片叠底
• mix-blend-mode: screen; //滤色
• mix-blend-mode: overlay; //叠加
• mix-blend-mode: darken; //变暗
• mix-blend-mode: lighten; //变亮
• mix-blend-mode: color-dodge; //颜色减淡
• mix-blend-mode: color-burn; //颜色加深
• mix-blend-mode: hard-light; //强光
• mix-blend-mode: soft-light; //柔光
• mix-blend-mode: difference; //差值
• mix-blend-mode: exclusion; //排除
• mix-blend-mode: hue; //色相
• mix-blend-mode: saturation; //饱和度
• mix-blend-mode: color; //颜色
• mix-blend-mode: luminosity; //亮度
• mix-blend-mode: initial; //初始
• mix-blend-mode: inherit; //继承
• mix-blend-mode: unset; //复原

• ::selection { background:#d3d3d3; color:#555; }
• ::-moz-selection { background:#d3d3d3; color:#555; }
• ::-webkit-selection { background:#d3d3d3; color:#555; }

• radial-gradient(circle,red,blue) 正圆
• radial-gradient(at right,red,blue) 圆心在右
• repeating-redial-gradient(red 60%,blue80%) 重复渐变

jquery的dom 只能播放一次动画，重新clone一个dom就可以再播放一次了

懒加载适合列表，不太适合企业站的图片。毕竟加载的都是重复的图片，用缓存就好了，懒加载的特效反而鸡肋，体验特别差