buttons
善人同处,则日闻嘉讯;恶人同游,则日生邪情。——范晔 分享一个按钮样式项目: https://github.com/alexwolfe/Buttons 对应的网站: https://unicorn-ui.com/buttons/builder/# 可以自定义你的按钮样式、颜色、点击效果 包括3d等等
transition.style
我这个人走得很慢,但是我从不后退。——亚伯拉罕·林肯 分享一个网站https://www.transition.style 这个网站提供了transition的各种css动画效果,其github地址:https://github.com/argyleink/transition.css 可以直接选取你需要的动画效果,点击复制,右边还可以自定义时间、淡入淡出等
lunar
人,现在最年轻啦。因为比起明天来,今天是年轻的。对于一个人来说,什么时候都是现在最年轻。──永六辅 lunar是一个支持阳历、阴历、佛历和道历的日历工具库,它开源免费,有多种开发语言的版本,不依赖第三方,支持阳历、阴历、佛历、道历、儒略日的相互转换,它能用来制作日历,甚至算命。 除此之外,还支持星座、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。 支持的时间跨度约为0001年至9999年。 地址:https://6tail.cn/calendar/api.html github: javascript:https://github.com/6tail/lunar-javascript java:https://github.com/6tail/lunar-java c#.net:https://github.com/6tail/lunar-csharp php(composer):https://github.com/6tail/lunar-php ph...
unocss
忍把浮名,换了浅斟低唱。——柳永《鹤冲天》 分享一个css框架unocss 可以通过class规则,生成对应样式,例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me/ 进行查询 除了预制规则,还可以自定义规则: 123rules: [ ['m-1', { margin: '0.25rem' }],] 即可生成 1.m-1 { margin: 0.25rem; } 还可以通过正则的方式 1234rules: [ [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],] 使用起来 123456<div class="m-100"> &...
readme.so
人变老其实并不意味别的,只意味着不再对往事感到害怕。──斯蒂芬·茨威格 分享一个网站可以很方便地编写readme:https://readme.so/ 只需要点击左侧的标签,即可生成相应模板 非常方便和好用
html字符转码表
孤独一人也没关系,只要能发自内心地爱着一个人,人生就会有救。哪怕不能和他生活在一起。——《1Q84》 链接:https://html.spec.whatwg.org/multipage/named-characters.html 我们打开发现可能有点重叠,导致看不清… 我们将不换行的css去掉即可 然后就能看清啦
css直接引用svg代码
一切安乐,无不来自困苦。——《我是猫》 有些时候我们想直接引入一个svg图标,又不想创建svg文件,或者编写svg代码到html中,想直接在css中引入 可以转码+加前缀直接引用,这是一段svg代码 123456789101112<!-- svg: first layer --><svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%'...
hexo主题集成pug
你问人问题,她若答非所问,便已是答了,无需再问。——木心 文档:https://hexo.io/zh-cn/docs/themes 先创建hexo项目 1hexo init simple-hexo 然后到themes新建一个主题文件夹 12cd .\simple-hexo\themes\mkdir simple-theme 修改外部_config.yml的theme 1theme: simple-theme 外部执行一下hexo s启动项目试试 打开localhost:4000 因为我们什么都没写,所以是白屏 新建一个layout目录,下面放一个index.pug 1.container Hello World 发现我们的pug代码并未渲染 这是因为我们没有安装pug插件导致的 到主目录执行 1cnpm i hexo-renderer-pug pug元素成功渲染 好了,接下来你可以编写你自己的主题啦!
pug
人心只能赢得,不能靠人馈赠——叶芝 分享一个前端框架pug github地址:https://github.com/pugjs/pug 它可以以下面的方式编写html 12345678910111213141516doctype htmlhtml(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) bar(1 + 5); body h1 Pug - node template engine #container.col if youAreUsingPug p You are amazing else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful fe...
mask
任凭人群来往,任凭钟声响起,小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》 分享一个css属性mask: https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask https://css-tricks.com/almanac/properties/m/mask/ CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 这个属性很类似于background属性,但不同的是,background是背景在元素下层,mask是遮罩在元素上层,且mask不支持直接指定color,只支持image对象如图片、svg等 同样两者都是组合属性,意味着可以用简写,而不是一个一个去指定 12mask-image: url(/img/oss/blog/vampireachao/bilibili-line.svg);mask-repeat: no-repeat; 可以简写为 1mask: url(/img/oss/blog/vampireachao/bilibili-line.svg) ...
