css-svg实现小于12号字体
效果
.s12-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.s12-d {
width: max-content;
margin: 20px auto;
}
千山鸟飞绝 - from hill to hill no bird in flight
千山鸟飞绝 - from hill to hill no bird in flight
const svg = document.getElementById('size-svg');
const sText = document.getElementById('size-text');
const inp = document.getElementById('s12-inp');
let size = 12;
const fontsizeHeightMap = {
1: 1.2 ...
css-手风琴动效
.sfq-wrap {
width: 100%;
min-width: 400px;
margin: 100px auto;
}
.sfq-wrap ul,
.sfq-wrap li {
padding: 0;
margin: 0;
list-style: none;
}
.sfq-wrap .list {
display: flex;
overflow: hidden;
justify-content: flex-start;
align-items: flex-start;
}
.sfq-wrap .list > li {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 10px;
height: 500px;
width: 600px;
transition: width 0.5s;
font-size: 18px;
font-weight: bold;
colo ...
三角边框-实心/镂空
实心边框
.sanjiao-wrap {
width: 400px;
min-height: 100px;
padding: 20px;
margin: 100px auto;
border: 1px solid;
}
.sanjiao-box-1 {
width: max-content;
margin: 0 auto;
border-width: 0 30px 30px;
/*border-color: transparent transparent black black;*/
border-color: transparent transparent black;
border-style: solid;
}
.sanjiao-box-2 {
--width: 50px;
margin-top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: ...
底部 footer 自适应
底部 footer 自适应在底部
.btn-wrap {
position: relative;
width: 300px;
height: 500px;
overflow-y: auto;
margin: 100px auto;
border: 1px solid;
}
.btn-content-wrap {
min-height: 100%;
text-align: center;
background-color: azure;
}
.btn-content {
padding-bottom: 40px;
}
.btn-footer {
margin-top: -40px;
background-color: #00adb5;
line-height: 40px;
color: #fff;
text-align: center;
}
.btn-s-input:checked ~ .btn-content > .btn-s- ...
css 实现毛玻璃
solution
filter: blur(x px);
效果
.f-wrap {
height: 400px;
position: relative;
background:
url("/img/filter-glass/bg1.jpg") no-repeat 0 / 100% fixed;
}
.f-box-1 {
position: absolute;
/*left: 50%;*/
/*top: 50%;*/
/*transform: translate3d(-50%, -50%, 0);*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
width: 80%;
height: 55%;
box-sizing: border-box;
padding: 66px 30px;
background-color: rgba(255 ...
绝对定位-元素宽度自动撑开
.wrap {
position: relative;
margin: auto;
height: 30px;
width: 120px;
margin-bottom: 50px;
border: 1px solid blue;
}
.wrap > div {
position: absolute;
border: 1px solid;
}
.box-1 {
left: 50%;
transform: translateX(-50%);
}
情景当父级出现定宽高情况下，子级绝对定位元素需要宽度撑开时。原场景
我是父级 100px
子元素-撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑
.box-1 { left: 50%; transform: translateX(-50%);}
1. width: max-content
.wrap1 {
z-index: 2;
/*overflo ...
双线部署博客，解决 github 访问速度问题
项目部署 Github 并且仓库名为 "userName".github.io
项目设置绑定域名，建议开启 https在 项目/设置/githubPage 下绑定域名
域名绑定页面，选 cname(github 给的二级域名)，线路：境外项目部署到 coding 上
https://coding.net
项目/构建与部署 点立即部署（后续可自动化部署）同页面上半部分找到二级域名为 cname，线路选择默认。并在当前页面的设置里绑定你的域名（申请证书失败的话需要把域名境外线路调回默认）hexo 快速部署项目插件以下为 ssh 连接，可自行百度（双账号邮箱建议保持一致，方便注册 ssh）npm i hexo-deployer-git -Syarn add hexo-deployer-git
hexo 配置文件deploy: type: git# 触发分支 branch: master repo: github: git@github.com:<userName>/<projectName>.git codi ...
滚动歌词
滚动歌词
把获取到的歌词 用换行符 split 分割
使用正则判断并分割出时间和歌词
把正则匹配出的 分、秒、毫秒 转换成秒 做 key 传入 temp 对象，或者 push 数组也可以，没有 key 的排序问题
通过 temp 遍历出 html 元素放入 content
监听 audio 的 [on]timeupdate 事件，关键字 e.target.currentTime 为当前播放时间
根据 时间 找到 匹配的歌词元素，计算元素的 top 与 父元素 top 的差，即为上滚的距离
滚动时给当前 歌词元素 加上 active class 使其突出
获取到的歌词可在 log 里查看
audio {
width: 300px;
height: 100px;
}
.lrc-box {
margin: 100px auto;
}
.lrc-wrap {
margin: auto;
width: 80%;
heigh ...
css 底部菜单栏动画
从中间展开 after 需要设置 position:absolute；left：0；right：0；bottom：0；margin：auto
css 背景渐变 实现优惠券
关键词线性渐变 径向渐变
使用径向渐变实现缺口效果
