css 实现毛玻璃
solution
- filter: blur(x px);
效果
123
tips
background-attachment: fixed;
使用此属性时 背景size和定位是依据向上查找到第一个属性为overflow: auto的父元素
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
2019-07-01
css 底部菜单栏动画
从中间展开 after 需要设置 position:absolute；left：0；right：0；bottom：0；margin：auto
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-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...
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; ...
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-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...
评论
最新文章
