正文
【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
废话一箩筐，筐筐有心得
不小心养成了一个刷微博的习惯，主要还是关注一些前端人士，学习一些前端方面的知识，看到大家都有一些刷微博的小习惯。有的是转发一下，转发内容来一个标记（MARK）.也有评论中标记为Mark的，这种完全不知道是干什么？不过有一个比较好的@我的印象笔记 不过，我不怎么喜欢使用这些小工具，因为怎么的我都不喜欢详细看，实际上这不是一个好习惯，我最常用的还是微博的收藏功能，最后找个时间再细看一下这些内容，今天就分享一篇收藏的内容。（吐槽一下：微博的某设备官方客户端真心不好用，主要是针对我常用的收藏功能）
时间感知的算法驱动的图标阴影JS库 - Four Shadows Demo
英文不是很好，使用的谷歌翻译，大致理解的是根据一天中的时间，并根据模拟时钟的“时针”的方向上阴影的方向变化。
Four Shadows Demo
Current Hour:
Direction of shadow is based on direction of 'hour hand' on an analog clock.
Simulate Time
setup
①：引入fourshadows.js
②：body中写上这么一个div：>div class="fs-icon-l fs-cast" data-icon="filename.png"$lt;>/div<
③：引入css样式：
.fs-icon-l {width: 512px; height: 512px;}
.fs-icon-m {width: 256px; height: 256px;}
.fs-icon-s {width: 128px; height: 128px;}
.fs-icon-xs {width: 64px; height: 64px;}
④：配置一下默认JS设置
②：body中写上这么一个div：>div class="fs-icon-l fs-cast" data-icon="filename.png"$lt;>/div<
③：引入css样式：
.fs-icon-l {width: 512px; height: 512px;}
.fs-icon-m {width: 256px; height: 256px;}
.fs-icon-s {width: 128px; height: 128px;}
.fs-icon-xs {width: 64px; height: 64px;}
④：配置一下默认JS设置
参考DEMO以及Github开源
https://github.com/Gigacore/four-shadows
http://gigacore.github.io/demos/fs/
http://gigacore.github.io/demos/fs/
