纯 CSS 实现的 时间线，也支持使用 JavaScript 动态生成 作者: Chuwen 时间: 2020-01-11 分类: HTML5,JavaScript 4 条评论 # Time-line 纯 CSS 实现的 时间线，也支持使用 JavaScript 生成。 [DEMO | 演示](https://nowtime.cc/time-line.html) ![Time-line 预览图][1] # HTML 渲染 你只需要根据 `timeLine.html` 代码结构进行简单的修改即可实现 # JacaScript 渲染 你需要将 [timeLine.html](https://github.com/PrintNow/TimeLine/blob/master/timeLine.html#L103) `103 行` 取消注释，然后根据 [timeLine.js](https://github.com/PrintNow/TimeLine/blob/master/timeLine.js) 注释修改 ## timeLine.js 里 `data变量` 数据格式如下： ``` [ { "title":"现在网", "link":"https://nowtime.cc", "time":"1578718860" }, { "title":"ffmpeg 使用方法合集", "link":"https://nowtime.cc/software/834.html", "time":"1578725484" } ] ``` > 字段解释： >> `title` 时间线显示的内容 >> `link` 点击后跳转的链接 >> `time` 该内容发布的时间，注意是 **秒级时间戳** ！ # 鸣谢 > 部分 CSS 样式参考的是 https://www.ihewro.com/archives.html # LICENSE [MIT LICENSE](https://github.com/PrintNow/TimeLine/blob/master/LICENSE) [1]: https://cdn.nowtime.cc/2020/01/11/4225051700.png
更改鼠标样式 / CSS cursor 属性 作者: Chuwen 时间: 2019-01-17 分类: HTML5 评论 # 请把鼠标移动到单词上，可以看到鼠标指针发生变化： > 代码在最后面 <span style="cursor:auto">Auto（自动）</span><br /> <span style="cursor:crosshair">Crosshair（十字线）</span><br /> <span style="cursor:default">Default（默认，无变化）</span><br /> <span style="cursor:pointer">Pointer（指针）</span><br /> <span style="cursor:move">Move（移动）</span><br /> <span style="cursor:e-resize">e-resize（左右 调整大小）</span><br /> <span style="cursor:ne-resize">ne-resize（右上左下 调整大小）</span><br /> <span style="cursor:nw-resize">nw-resize（左上右下 调整大小）</span><br /> <span style="cursor:n-resize">n-resize（上下 调整大小）</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:wait">wait</span><br /> <span style="cursor:help">help</span> ```html <span style="cursor:auto">Auto</span><br /> <span style="cursor:crosshair">Crosshair</span><br /> <span style="cursor:default">Default</span><br /> <span style="cursor:pointer">Pointer</span><br /> <span style="cursor:move">Move</span><br /> <span style="cursor:e-resize">e-resize</span><br /> <span style="cursor:ne-resize">ne-resize</span><br /> <span style="cursor:nw-resize">nw-resize</span><br /> <span style="cursor:n-resize">n-resize</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:wait">wait</span><br /> <span style="cursor:help">help</span> ```