css 底部菜单栏动画
从中间展开 after 需要
设置 position:absolute；left：0；right：0；bottom：0；margin：auto
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
2024-05-14
【CSS】CSS-Nesting：CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套
现在 CSS 也有了嵌套写法，“不再需要” less sass 等预处理器，原生 CSS 就可以实现嵌套写法，可以减少代码量，提高代码可读性，让 CSS 更加优雅~哦，没人写 css 了是吧 QAQ CSS-Nesting 从 Chrmoe 112 开始，原生 CSS 就可以支持嵌套语法了（你不会还是旧版本吧？？？？） 语法 MDN 示例 /* Without nesting selector */ parent { /* parent styles */ child { /* child of parent styles */ } } /* With nesting selector */ parent { /* parent styl...
2020-03-12
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: ...
2020-03-11
三角边框-实心/镂空
实心边框 .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-widt...
2020-12-25
css 文字渐入效果，css 变量的进一步使用 setProperty
通过 js 修改 css 变量来更简单的实现动画效果，dom.style.setProperty 的使用 setPropertyconst a = document.querySelector('xx'); xx.style.setProperty(name, value); 顺带记一下获取的 // 该方法获取的值带 `单位` getComputedStyle(a).getPropertyValue('--x'); demo .iphoneText-wrap { margin: 100px auto; width: 400px; height: 400px; background-color: #000; overflow-y: auto; } .text { height: 300%; } .ihone-title { display: block; text-align: center; --x: 0%; position: sticky; top: 50%; transform: tra...
2023-07-19
【CSS】解决移动端（高清方案）下在谷歌浏览器中出现 字体大小布局异常，和设置的 font-size 不符（Text Autosizer、Font Boosting）
最近在谷歌浏览器调试移动端高清方案时，发现设置的字体大小竟然和实际显示的字体大小不一致？可以移动端 ua 打开此页面测试下方 demo。fontSize => 设置字体大小；actualSize => 实际展示字体大小 .font-boosting-wrap { } .font-boosting { } .font-boosting li { /*font-size: 22px;*/ } .font-boosting-size-wrap { font-size: 16px; /*text-size-adjust: none;*/ } .font-boosting-button { /*font-size: 22px;*/ } li 的 fontSize: fontSize: actualSize: auto set text-size-adjust ...
2020-12-25
Css 模拟赛博朋克 故障风格 按钮
clip-path 和 step 的运用 记录。 .punk-wrap { display: flex; align-items: center; justify-content: center; width: 400px; height: 300px; margin: 100px auto; background-color: #F8F005; } .punk-btn, .punk-btn::after { position: relative; width: 150px; font-size: 25px; height: 40px; line-height: 40px; font-family: 'Bebas Neue', cursive; outline: none; border: none; ...
评论
最新文章
