parabola-js demo page
.wrap {
overflow: hidden;
}
.box-1 {
position: relative;
width: 70%;
height: 400px;
margin: 100px auto;
bord ...
css svg loading demo
本篇将记录一些 loading demo。
通过svg属性stroke-dashoffset 偏移和svg的差速旋转实现 loading
了解 stroke-dashoffsethttps://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ ...
css-svg实现小于12号字体
效果
.s12-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.s12-d {
width: max-content;
margin: 20px aut ...
css-手风琴动效
.sfq-wrap {
width: 100%;
min-width: 400px;
margin: 100px auto;
}
.sfq-wrap ul,
.sfq-wrap li {
padding: 0;
margin: 0;
list-style: none;
} ...
三角边框-实心/镂空
实心边框
.sanjiao-wrap {
width: 400px;
min-height: 100px;
padding: 20px;
margin: 100px auto;
border: 1px solid;
}
.sanjiao-box ...
底部 footer 自适应
底部 footer 自适应在底部
.btn-wrap {
position: relative;
width: 300px;
height: 500px;
overflow-y: auto;
margin: 100px auto;
border: ...
css 实现毛玻璃
solution
filter: blur(x px);
效果
.f-wrap {
height: 400px;
position: relative;
background:
url("/img/filter-glass/bg1.jpg") no-r ...
绝对定位-元素宽度自动撑开
.wrap {
position: relative;
margin: auto;
height: 30px;
width: 120px;
margin-bottom: 50px;
border: 1px solid blue;
}
. ...
双线部署博客，解决 github 访问速度问题
项目部署 Github 并且仓库名为 "userName".github.io
项目设置绑定域名，建议开启 https在 项目/设置/githubPage 下绑定域名
域名绑定页面，选 cname(github 给的二级域名)，线路：境外项目部署到 coding 上
https: ...
滚动歌词
滚动歌词
把获取到的歌词 用换行符 split 分割
使用正则判断并分割出时间和歌词
把正则匹配出的 分、秒、毫秒 转换成秒 做 key 传入 temp 对象，或者 push 数组也可以，没有 key 的排序问题
通过 temp 遍历出 html 元素放入 content
监听 audio 的 [o ...