本周胡里胡哨总结(二)

鼠标悬浮的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

See the Pen <a href='https://codepen.io/973782523/pen/gOaqdyr'>gOaqdyr</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

限制输入框输入

https://github.com/nosir/cleave.js

See the Pen <a href='https://codepen.io/973782523/pen/LYpqgRY'>LYpqgRY</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

运动图像库

https://github.com/mojs/mojs

例如点赞，鼠标点击的时候的特效

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%' }
这两个在一个类似贪吃蛇一样

See the Pen <a href='https://codepen.io/973782523/pen/eYpxbQr'>eYpxbQr</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

为了加深理解上代码

See the Pen <a href='https://codepen.io/973782523/pen/NWGmrKY'>NWGmrKY</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>. ```js 多边形 shape: 'polygon', points: 5,// 这个是几个角 ---- scale: { 0 : 1, easing: 'cubic.out' }, fill: { 'cyan': 'yellow', easing: 'cubic.in' }, ---- 让设置速度让过渡更加平滑 ``` See the Pen <a href='https://codepen.io/973782523/pen/jObRpeR'>jObRpeR</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>. See the Pen <a href='https://codepen.io/973782523/pen/abvgjPo'>abvgjPo</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

 angle:          { [-180] : 0 },//如果是负数可以像[-180]包起来
 scale:          { to: 2, easing: 'sin.in' },// to的值是一个2,就是说放大2倍,如果是0.1就是缩小到0.1倍,后面跟上速度
 .then 函数实在原来的基础上,自动创建从以前的属性值到新属性的增量    

See the Pen <a href='https://codepen.io/973782523/pen/yLYmbNY'>yLYmbNY</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

tune就是把属性调整到最新的值,比如
d中y=-100当在tune调整为 y={100:0} 就是修改动画为100=>0,-100直接被更换成100
then再执行 
100=>0=>100

See the Pen <a href='https://codepen.io/973782523/pen/XWmvgjB'>XWmvgjB</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

形状曾在随机量delay，x，y和radius属性
generate 在重新生成形状的初始化时具有随机数,每个点击唯一的效果模式

自定义形状

See the Pen <a href='https://codepen.io/973782523/pen/VwvoBRv'>VwvoBRv</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

ShapeSwirl 形状漩涡  
会自动计算形状的正弦x/y路径
有默认{1:0}的scale属性,因此它淡出
isSwirl默认为true ,是否遵循正弦路径,如果为flase 设置跟simple安全相同Shape
swirlSize 幅度指的是峰值
direction 默认1 幅度的方向1或者-1

See the Pen <a href='https://codepen.io/973782523/pen/wvKVYob'>wvKVYob</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

这个有点复杂帧动画不好弄懂

See the Pen <a href='https://codepen.io/973782523/pen/ExVqdBE'>ExVqdBE</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>. 漂亮的三角形 See the Pen <a href='https://codepen.io/973782523/pen/wvKVQNe'>wvKVQNe</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

正方形旋转的小火花

See the Pen <a href='https://codepen.io/973782523/pen/abveQgg'>abveQgg</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.