废话一箩筐,筐筐有心得
不小心养成了一个刷微博的习惯,主要还是关注一些前端人士,学习一些前端方面的知识,看到大家都有一些刷微博的小习惯。有的是转发一下,转发内容来一个标记(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/