kshao-blog

.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; ...

实心边框 .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; ...

底部 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 >...

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:...

.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; ...

项目部署 Github 并且仓库名为 "userName".github.io 项目设置绑定域名，建议开启 https在 项目/设置/githubPage 下绑定域名 域名绑定页面，选 cname(github 给的二级域名)，线路：境外项目部署到 coding 上 https://coding.net 项目/构建与部署 点立即部署（后续可自动化部署）同页面上半部分找到二级域名为 cname，线路选择默认。并在当前页面的设置里绑定你的域名（申请证书失败的话需要把域名境外线路调回默认）hexo 快速部署项目插件以下为 ssh 连接，可自行百度（双账号邮箱建议保持一致，方便注册 ssh）npm i hexo-deployer-git -S yarn add hexo-deployer-git hexo 配置文件deploy: type: git # 触发分支 branch: master repo: github: git@github.com:<userName>/<projectName>.git ...

滚动歌词 把获取到的歌词 用换行符 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%; ...

从中间展开 after 需要设置 position:absolute；left：0；right：0；bottom：0；margin：auto

关键词线性渐变 径向渐变 使用径向渐变实现缺口效果

安装 docker https://www.docker.com/products/docker-toolbox 加速器 https://dashboard.daocloud.io/mirror 点击立即开始－接入自有主机－我已有一台主机－选择MAC－直接点击 根据步骤 直至控制台显示有你的主机 去镜像仓库搜索 gitlab-ce 部署镜像可在命令行部署，或者刚刚下载的 Gui 工具内 部署好镜像，打开映射的主机端口，会显示重置密码(密码应为 八位+英文字符限制)默认用户名 root 安装 runner 镜像，可在 Daocloud 中部署到主机 注册runner 在刚刚安装的 gitlab 中创建项目，在项目内的setting选项选中 Ci/CD 在 Runners 选项中会看到对应的 链接 和 token 注册 runner 启动 runner 容器，并进入容器 docker exec -it runner bash 退出命令 exit 进入容器输入 gitlab-runner register -n \ --url...