鼠标悬浮的UI
https://github.com/jolaleye/cssfx
抖动的动画
https://elrumordelaluz.github.io/csshake/
有滚动事件触发_预定义动态特效AOS
http://michalsnik.github.io/aos/
交互性颜色渐变
https://sarcadass.github.io/granim.js/index.html
限制输入框输入
https://github.com/nosir/cleave.js
运动图像库
例如点赞，鼠标点击的时候的特效
new mojs.Shape({ parent: '#ccc', // circle 圆 rect 正方形 polygon 三角形 // zigzag 波浪线 curve 括弧 cross 十字架 shape: 'circle', // 形状 radius: 25, // 形状半径 fill: 'transparent',// 填充颜色 stroke: '#F64040', // 边框颜色 strokeWidth: 5, // 边框的宽度 isShowStart: true, // 动画开始前显示 top:'50%', //距离上面50% let:"25%", // 距离左25% x:'rand(-250,250)' // x轴 范围(-250,250)px随机 }); 如果改变圆的形状可以设置x,y轴 radiusX/radiusY的大小 points 点数,对于波浪线zigzag来说,假如写12,就是有12个点 scale 放大缩小 0-1过渡 duration 时长 delay 延迟的时间 repeat 次数 范围[0..∞] .play() 是播放动画 angle: { 0: 180 } 倾斜角度 0到180 ---- strokeDasharray: '100%', strokeDashoffset: { '-100%' : '100%' } 这两个在一个类似贪吃蛇一样
为了加深理解上代码
```js 多边形 shape: 'polygon', points: 5,// 这个是几个角 ---- scale: { 0 : 1, easing: 'cubic.out' }, fill: { 'cyan': 'yellow', easing: 'cubic.in' }, ---- 让设置速度让过渡更加平滑 ``` angle: { [-180] : 0 },//如果是负数可以像[-180]包起来
scale: { to: 2, easing: 'sin.in' },// to的值是一个2,就是说放大2倍,如果是0.1就是缩小到0.1倍,后面跟上速度
.then 函数实在原来的基础上,自动创建从以前的属性值到新属性的增量
tune就是把属性调整到最新的值,比如
d中y=-100当在tune调整为 y={100:0} 就是修改动画为100=>0,-100直接被更换成100
then再执行
100=>0=>100
形状曾在随机量delay，x，y和radius属性
generate 在重新生成形状的初始化时具有随机数,每个点击唯一的效果模式
自定义形状
ShapeSwirl 形状漩涡
会自动计算形状的正弦x/y路径
有默认{1:0}的scale属性,因此它淡出
isSwirl默认为true ,是否遵循正弦路径,如果为flase 设置跟simple安全相同Shape
swirlSize 幅度指的是峰值
direction 默认1 幅度的方向1或者-1
这个有点复杂帧动画不好弄懂
漂亮的三角形正方形旋转的小火花