css 实现毛玻璃
solution
- filter: blur(x px);
效果
123
tips
background-attachment: fixed;
使用此属性时 背景size和定位是依据向上查找到第一个属性为overflow: auto的父元素
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
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...
2020-03-10
绝对定位-元素宽度自动撑开
.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; /*o...
2020-03-12
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; c...
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
底部 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-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: ...
评论
最新文章
