超级圆角
在前端设计中,常使用border-radius属性构造圆角矩形,以形成视觉上的美感。在工业设计中,也存在大量圆角过渡设计。在工业设计中,根据两条线连接的方式,划分了G0-G4五个等级[1]参考资料。
G0——点连续:只要两个点碰到就可以;
G1——相切连续:没有棱角,所有点之间都是相切关系;
G2——曲率连续:平滑过渡,曲率是连续变化的;
G3——曲率变化率连续:更平滑,曲率的变化率也是连续的;
G4——曲率变化率的变化率连续:极致丝滑。
我们常用的border-radius可以实现G1级别的切线连续圆角,而现在,越来越多的设计开始使用G2以上级别的圆角。G2以上级别的圆角过渡更加平滑,也更美观、更耐看。目前博客的音乐控制器、小组件等就是采用的G2级别的曲率连续圆角。
图1 切线连续圆角(左)与曲率连续圆角(右)对比[2]参考资料
新建paint.js在路径source/js文件夹下新建一个paint.js文件,代码如下:
1234567891011121314151617181920class SmoothCorners { static get inputPr ...
侧边栏组件 - 日历
预览侧边栏的开发空间很大,一些使用频率很高的功能可以集成在这里,方便我们的使用。所以我做了一个日历的小组件,样式参考的是TOP WIDGETS。
实现感谢Leonus大佬提醒,漏了lunar.js和css代码,部分js另作修改,现已更正。
更新
lunar.jslunar.js是ChatGPT在Github上找的。原作仓库地址
demo.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102// 刷新时钟时间function cardRefreshTimes() { var now = new Date(); var a_t_r = document.getElementById("aside-time-ri ...
利用Vercel + OneDrive搭建个人网盘
简介基于开源项目 onedrive-vercel-index ,搭建本博客配套的个人网盘——藏兵谷。
为什么这个问题得从上一个项目——音乐控制器说起。看过站长介绍应该知道我喜欢听周杰伦的歌,你说我好不容易整了这么多音乐播放器,结果还听不了我喜欢的歌,那不白搭么。由于版权问题,无法在线获取VIP曲目,所以一般采用的方法就是把音乐资源存在自己的服务器上,通过直链在线读取。但是我没有服务器,这就得操作操作了。我先是找了一些百度网盘、阿里网盘等转直链的插件,可插件生成的直链用在aplayer上总是无法读取,pass。接着尝试用gitee做仓储仓库,gitee各种限制,每次上传20个文件,文件大小不超过10M,最后还做不了直链,想来应该是早就禁止了。于是换github建存储仓库,这里上传文件没有什么限制,起初尝试了一下jsDeliver加速,aplayer上无法读取,只好部署到vercel,这次aplayer终于可以读取,就是速度方面实在感人,最重要的是文件管理很不方便,但总算是能听周董啦。后来我在github看到了 onedrive-vercel-index 这个开源项目,觉得优点还蛮多的,就 ...
控制中心 - 音乐控制器(Aplayer伴侣)
构想
因为我的QQ是侧边隐藏的,aplayer也是侧边隐藏的,两者时常会误触,虽说各放一边就能避免这个问题,但我还是想把它做的优雅一点,毕竟这个博客就是为了Aplayer做的(认真脸)。
Aplayer本身的UI做的很不错,但按钮太小,样式太简约,不够个性化。一开始的构想是想做一个可以随处拖动的小圆球,就像iOS的AssistiveTouch小方块一样。后来看到安知鱼大佬做的音乐胶囊,非常接近我的设计预想,虽然是固定的,但也解决了和QQ侧边隐藏冲突的问题,真的是非常好看。但是看完教程后发现它无法显示歌单,而且歌词特别小,所以只能放弃了。
我开始尝试着修改Aplayer的js源码,先是歌词的样式,修改了滚动速度和歌词大小,非常成功,达到了我预想的效果,就是你们现在看到的“桌面歌词”;然后尝试查找js源码里写好的一些方法,然而我几乎为0的js水平无法让我理解源码的结构,所以尝试失败了。
终于,我翻到了Aplayer的中文文档,发现了Aplayer其实提供了很多的API接口,还有很多audio的原生属性,顿时感觉之前好傻,一下子思路顺畅了许多——既然魔改Aplayer的原UI那么困难,那么为 ...
青山黛
云边有个小卖部,货架上堆着岁月和夕阳,背后就是山。老人靠着躺椅假装睡着,小孩子偷走一块糖。泪水几点钟落地,飞鸟要去向何方。人们聚和离,云朵来又往。讲故事的人,总有一个故事不愿讲。时光飞逝,悄悄话变成纸张。
——张嘉佳
我愿做一枚白昼的月亮不求炫目的荣华不淆世俗的浪潮
——顾城《白昼的月亮》
我想当一个诗人的时候,我就失去了诗,我想当一个人的时候,我就失去了我自己。在你什么也不想要的时候,一切如期而来。
——顾城《执者失之》
你一会看我一会看云我觉得你看我时很远你看云时很近
——顾城《远和近》
你学过的每一样东西你遭受的每一次苦难都会在你一生中的某个时候派上用场
——菲茨杰拉德
围在城里的人想逃出来,站在城外的人想冲进去,婚姻也罢、事业也罢,人生的欲望大都如此。
——钱钟书《围城》
一尘不染不是没有尘埃,而是尘埃任它飞扬,我自做我的阳光。
——林清玄
日出未必意味着光明,太阳也无非是颗辰星而已,只有在我们醒着时,才是真正的破晓。
——梭罗《瓦尔登湖》
Hexo+Butterfly博客搭建记录(4)
更新记录
以前大量使用shadow,一个是因为原生主题也用(但是很浅),另一个是因为我觉得这样看起来会有立体感。现在看久了就觉得丑了,还是扁平化设计更耐看一些,或者说,好的交互界面应该让你感觉不到设计的存在。
宽屏适配。(Fomalhaut 原小冰 改唐志远)这个本来一开始就打算做的,看太多人的教程看的眼花缭乱就给忘了。。。适配后确实好看一些。
做宽屏适配了,自然也就把双栏做了。三栏目前还不太适合,毕竟文章写的还太少。
歌词在博客刚上线的时候就改过了,当时只是改了个字体颜色和大小,那颜色蓝里哇叽的,跟我QQ音乐主题色是一样的,但是毕竟背景不一样,所以这个颜色放在博客上看没几天就觉得丑死了,就改成黑灰的了,顺便把背景换成了类似苹果dock栏的样式,顿时耐看许多。然后就发现一个bug,由于current歌词字号比预览歌词字号大一节,所以在手机上显示的时候,如果歌词太长会占用两行,然后第二行(原本是预览歌词的位置)又很矮,就会显示不全。所以现在就改成两行一样高了,不过我的方式比较蠢,是直接改的Aplayer.min.js,不知道能不能在自有的js文件里改。
相册、留言板没什么好搞的,就这样了 ...
Hexo+Butterfly博客搭建记录(3)
这篇主要记录控制中心的进度
目前主要参考洪哥的控制台,后面会参考更多人的博客设计,争取能实现更多的功能。
构想洪哥的控制台颜值很高,是我喜欢的简约风格,目前已上线5个设置按钮,分别是:
显示模式切换
边栏显示控制
快捷键开关
无障碍工具栏
帧率显示开关(最近更新)
控制台主体是全屏显示的,背景是毛玻璃效果,按钮整体居中排列,随着屏幕宽度缩小会隐藏部分按钮,关闭控制台可以通过点击右上角的 X 或者mask区域。整个交互看起来是非常舒适的。
计划打勾的是已实现的,没打勾的还在努力。
主体界面
深色模式
简繁切换
歌词显示
音频控制器(Aplayer其他功能迁入,如下一曲、上一曲、暂停/播放、进度条、音量条、歌单等)
设置界面
计算器
...
云水烟波
序章
不乱于心,不困于情。不畏将来,不念过往。如此,安好。
——丰子恺
篇一
一个人的记忆就是座城市,时间腐蚀着一切建筑,把高楼和道路全部沙化。偶尔梦里回到沙城,那些路灯和脚印无比清晰,而你无法碰触,一旦双手陷入,整座城市就轰隆隆地崩塌。把你的喜笑颜开,把你的碧海蓝天,把关于我们之间所有的影子埋葬。如果你不往前走,就会被沙子掩埋。所以我们泪流满面,步步回头,可是只能往前走。哪怕往前走,是和你擦肩而过。
——张嘉佳
我希望有个如你一般的人。如这山间清晨一般明亮清爽的人,如奔赴古城道路上阳光一般的人,温暖而不炙热,覆盖我所有肌肤。由起点到夜晚,由山野到书房,一切问题的答案都很简单。我希望有个如你一般的人,贯彻未来,数遍生命的公路牌。
——张嘉佳
在青山绿水之间,我想牵着你的手,走过这座桥,桥上是绿叶红花,桥下是流水人家,桥的那头是青丝,桥的这头是白发。
——沈从文
我行过许多地方的桥,看过许多次数的云,喝过许多种类的酒,却只爱过一个正当最好年龄的人。
——沈从文
于千万人之中遇见你所要遇见的人,于千万年之中,时间的无涯的荒野里,没有早一步,也没有晚一步,刚巧赶上了,那也没有别的 ...
PCB笔记(1)
码字中…
深度学习笔记(1)
码字中…