css 底部菜单栏动画
从中间展开 after 需要
设置 position:absolute；left：0；right：0；bottom：0；margin：auto
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
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...
2020-03-11
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(...
2020-03-13
css svg loading demo
本篇将记录一些 loading demo。 通过svg属性stroke-dashoffset 偏移和svg的差速旋转实现 loading 了解 stroke-dashoffsethttps://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset loading-1效果 .svg-loading-wrap { margin: 10px auto 10px 10px; } .svg-loading-wrap .item .load { width: 75px; animation: loading 3s linear infinite; } .svg-loading-wrap .item .load #loading-inner { stroke-dashoffset: 0; stroke-dasharray: 300; stroke-width: 10; stroke-miterlimit: 10; stroke-linecap: round; anim...
2023-06-13
【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器：:not、:is、:where、:has，除了 :has 比较新以外，其他选择器在一些 UI 库中都有广泛的使用，浏览器基本都已经支持了，一起卷起来，使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...
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-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: ...
评论
最新文章
