css 底部菜单栏动画
从中间展开 after 需要
设置 position:absolute；left：0；right：0；bottom：0；margin：auto
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
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...
2020-03-11
底部 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...
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 模拟赛博朋克 故障风格 按钮
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; ...
2024-05-15
【CSS】解决外边距重叠（重合）引起的 margin 垂直方向（top、bottom）不生效，无作用的问题
随着各种 UI 库的使用，像这种问题在业务中可能都很少接触，但是仍需了解其现象和解决方案。 一键直达 相邻兄弟元素的外边距重叠 父级与子级的外边距重叠 空块级元素的外边距重叠 什么是外边距重叠 —— Margin Collapsing 当块级元素（Block）的上下外边距与其相邻或嵌套的块级元素外边距重叠时，外边距会合并为一个外边距，而不是相加。这种行为成为外边距重叠。（浮动和绝对定位的元素不会发生外边距重叠） 外边距重叠只会发生在块级元素（Block）上，例如 div、p、section 等。 外边距重叠计算规则示例元素 <div class="css-fix-margin-item-parent"> <div class="css-fix-margin-item-child">child di...
2021-07-27
css 指定方向模糊 - 鸿蒙开机效果（animation 事件）
<svg> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0 2" /> </filter> </svg> 直截了当，没错是用 svg 来实现，其实 css 的样式与 svg 还是蛮接近的（一模一样） 效果使用 未使用（使用 blur） 鸿蒙开机效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <style> body { margin: 0; height: 100vh; display: block; } .ct-circle-content { --circle-width: 100px; --circle-height: 100px; d...
评论
最新文章
