首页 > 代码库 > 【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库

【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库

2024-08-04 16:36:09   217人阅读

废话一箩筐，筐筐有心得
不小心养成了一个刷微博的习惯，主要还是关注一些前端人士，学习一些前端方面的知识，看到大家都有一些刷微博的小习惯。有的是转发一下，转发内容来一个标记（MARK）.也有评论中标记为Mark的，这种完全不知道是干什么？不过有一个比较好的@我的印象笔记 不过，我不怎么喜欢使用这些小工具，因为怎么的我都不喜欢详细看，实际上这不是一个好习惯，我最常用的还是微博的收藏功能，最后找个时间再细看一下这些内容，今天就分享一篇收藏的内容。（吐槽一下：微博的某设备官方客户端真心不好用，主要是针对我常用的收藏功能）
时间感知的算法驱动的图标阴影JS库 - Four Shadows Demo
英文不是很好，使用的谷歌翻译，大致理解的是根据一天中的时间，并根据模拟时钟的“时针”的方向上阴影的方向变化。
<style></style>
Four Shadows Demo
 
 
Current Hour: 

Direction of shadow is based on direction of ‘hour hand‘ on an analog clock.

<script type="text/javascript" src="http://files.cnblogs.com/unofficial/fourshadows-demo.js"></script>
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设置
参考DEMO以及Github开源
https://github.com/Gigacore/four-shadows
http://gigacore.github.io/demos/fs/

【微收藏】FourShadows.js – 时间感知的算法驱动的图标阴影JS库


联系
我们