背景、
可能咱们有时候潜意识里认为, 以后理论开发中css属性曾经足够用了, 然而前段时间忽然想到:"会不会咱们只是思维被限度在了罕用的css属性中, 从而丢失了创造力", 就像创造 车 之前大多数人会认为 骑马 曾经足够快能够满足本人的需要了, 所以我专门整顿了一下本人的学习笔记并且专门去学习了一些冷门的css属性, 果然播种满满, 所以明天也要在这里把这些脑洞大开的属性较少给你, 筹备好一起来感触css的魅力吧。
一、开胃菜 css画背景图: paint
咱们开发中应用的背景图大部分是(png, webp等)图片、svg矢量图、canvas画图, 然而其实咱们也能够抉择css间接画图, 那css这种甚至都"称不上"编程语言的家伙怎么绘制简单的图片那?
1: 为元素赋予css属性
div class="box"></div><style> .box { width: 180px; height: 180px; border: 1px solid; background: paint(xxxx); // 配角在此 } paint(xxxx); 这里填入的是绘图的"办法名", 往下看就晓得啥是"办法名"了, 之所以我这里写"xxxx"十分随便, 是因为我想表白这个名字轻易起。
2: 引入js文件
<script> if (window.CSS) { // 因为加载文件 须要启动server CSS.paintWorklet.addModule("./paint-grid.js"); } </script> 用法有点诡异, 但外围其实是引入了一个js文件。
3: js文件内定义导出的办法
paint-grid.js文件:
registerPaint( "xxxx", // 这就是: 办法名 class { paint(context, size) { context.fillStyle = 'red'; context.fillRect(10, 10, 39, 39); } }); paint办法外面就相似canvas了, 能够失常应用局部js代码。
以后的成果展现:
4: 可多导出
当看到须要指定绘制的"办法名"而不是"文件名", 我就晓得他肯定能够导出多个喽:
registerPaint( "xxxx1", class { paint(context, size) { context.fillStyle = 'red'; context.fillRect(10, 10, 39, 39); } });registerPaint( "xxxx2", class { paint(context, size) { context.fillStyle = 'green'; context.fillRect(10, 10, 39, 39); } });两个元素的款式设置
<style> .box { background: paint(xxxx1); } .box2 { margin-top: 20px; background: paint(xxxx2); }5: 变量赋予背景灵动
咱们时长遇到须要绘制"非固定大小背影", 此时在paint-grid.js中window是获取不到的, 然而咱们能够应用css变量:
// 在全局定义不便js批改 :root { --bg-size: 60; } paint-grid.js文件
registerPaint( "xxxx1", class { static get inputProperties() { return ["--bg-size"]; } paint(context, size, properties) { var bgSize = properties.get('--bg-size'); context.fillStyle = "red"; context.fillRect(10, 10, bgSize, bgSize); } }); inputProperties定义了须要获取哪些属性, paint的第三个参数能够接管这些属性, 这样霎时就感觉这个属性还有点用啦。
6: 注意事项
- 不能在
js文件的绘制办法外面写alert, 会导致报错阻断绘制: - 要留神保护
paint-grid.js文件与css文件的相关性, 因为大家写代码会下意识的不会认为js办法被css文件里的属性所应用, 这就导致可能后续无删除或者是不敢删除等问题。 - 适宜解决简略的图形, 如果复杂度高了或者还需借助其余"库"的状况, 则不倡议应用。
二、字体三连 (镂空、突变、背景)
1: 镂空字不算常见
p { font-size: 150px; color: white; -webkit-text-stroke: 6px red; }2: 渐变色文字
p { font-size: 150px; color: white; -webkit-text-stroke: 6px red; background-color: rosybrown; background-image: -webkit-linear-gradient(top, red, #fd8403, yellow); -webkit-background-clip: text; color: transparent; } <p> 高 <br> 低 </p>3: 文字背景
咱们把"白金之星"(jojo的微妙冒险中的'人物')的图片作为文字的背景:
div { font-size: 150px; background: url(../imgs/jojo.webp) no-repeat; background-size: 100%; background-origin: border-box; -webkit-background-clip: text; color: transparent; } 这里的关键点是-webkit-background-clip: text, 意思是将dom内文字以外的区域裁剪掉, 所以就剩文字区域了, 而后文字再设置成通明的。
三、他来了他来了, 他带着炫酷的过场动画走来了
先看一下咱们用css字体属性做的动动画成果:
倒计时骨王退场:
这里的思路就是利用文字的背景图属性, 然而难点是如何让文字变大。
1: 难点与坑点
文字变大有什么难的? 你可能会说这些so简略, 咱们设置文字所在的span标签position: absolute;定位在父级两头不就OK了? 然而如果这样设置就会导致-webkit-background-clip: text;生效, 也就是文本脱离了文档流。
有同学有会想到 transform:scale(1.5); 来动态控制文字的变大, 然而transform仍然会使-webkit-background-clip: text;生效。
所以我想到的是在div中设置flex让文字上下左右居中, 而后调大font-size属性。
还有一个问题就是背景色问题, 因为设置了背景图的同时没法设置文字外层的背景色。
2: 实现思路
首先总共须要三层构造, 第一层wrap负责彩色背景色以及overflow: hidden;来截断咱们的文字变大, 第二层box负责文字的居中, 并且设置font-size属性让外部元素继承, 第三层span标签负责文字①②③的寄存, 因为要管制这些文字的显隐所以须要dom标签包裹。
3: 实现代码
代码有些粗俗没有润色
<!DOCTYPE html><html lang="en"> <head> <style> #wrap { background-color: black; width: 500px; height: 500px; margin: 0 auto; overflow: hidden; } .box0 { background: url(../imgs/jojo.webp) no-repeat; } .box1 { background: url(../imgs/一起干饭.jpeg) no-repeat; } .box2 { background: url(../imgs/gat.webp) no-repeat; } #box { width: 500px; height: 500px; font-size: 150px; margin: 0 auto; background-size: 500px 500px; background-position: center; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; } .text { display: none; } </style> </head> <body> <div id="wrap"> <div id="box"> <span class="text">①</span> <span class="text">②</span> <span class="text">③</span> </div> </div> <script> const oBox = document.getElementById("box"); const textArr = document.getElementsByClassName('text') let i = 0; let n = 800; setInterval(()=>{ oBox.style.fontSize = n + 'px'; n+=3 if(n > 800){ n = 10; textArr[1].style.display = 'none' textArr[2].style.display = 'none' textArr[0].style.display = 'none' textArr[i].style.display = 'block' oBox.classList.remove('box1') oBox.classList.remove('box2') oBox.classList.remove('box3') oBox.classList.add(`box${i}`) i++ if(i > 2){ i = 0 } } },5) </script> </body></html>把文案改成 "◤ ◢ ✿" 就会呈现第一个动图的成果啦!
四、引号: quotes
所谓引号就相当于给书名加上'书名号', 给语言加上'冒号双引号', 当然他还有一些神奇玩法。
1: 根本应用
<div class="box">jojo的微妙冒险</div> <style> .box { quotes: "《" "》"; } .box::before { content: open-quote; } .box:after { content: close-quote; } </style>效果图:
这里要留神的是如果没写content: open-quote;会导致前后'书名号'都隐没, 然而唯独没写content: close-quote;则会保留展现"《"。
2: 看似鸡肋?
以后这个根底写法也太鸡肋了, 不就是给"《"起了个别名叫open-quote吗? 并且要害是占用了我的before与after, 感觉画龙点睛, 比方我能够用如下的办法进行替换:
:root { --open: "《"; --close: "》"; } div::before { content: var(--open); } div::after { content: var(--close); }<div class="box">jojo的微妙冒险</div>3: 套娃高手 quotes 雄起
其实quotes的看家本领是它能够承受n个参数!
.box { quotes: "--- start" "---- end" "《" "》"; } .box::before { content: open-quote; } .box:after { content: close-quote; } <div class="box"> <div class="box">jojo的微妙冒险</div> <div class="box">Overlord</div> <div class="box">艾尔登法环</div> </div> 神奇的事件呈现了, 当呈现嵌套构造的时候, 外部的元素会应用第三个与第四个参数作为"引号", 套娃事件呈现啦:
.box { quotes: "--- start" "---- end" "(" ")" "《" "》"; } .box::before { content: open-quote; } .box:after { content: close-quote; }<div class="box"> <div class="box"> <span class="box">jojo的微妙冒险</span> </div> <div class="box"> <span class="box">Overlord</span> </div> <div class="box"> <span class="box">艾尔登法环</span> </div></div> 说实话这个套娃能力还挺厉害的, 并且咱们能够讲 close-quote属性置空, 我想到的就是列表:
.box { quotes: "--- start" "---- end" "1: " "" "-- 2:" "" "---- 3: " "" "------ 4: " ""; } .box::before { content: open-quote; } .box:after { content: close-quote; } <div class="box"> <div class="box"> 第一: <div class="box"> 第二: <div class="box">第三:</div> </div> <div class="box"> 第二: <div class="box"> 第三: <div class="box">第四:</div> </div> </div> </div> <div class="box"> 第一: <div class="box">第二:</div> </div> </div> 要留神不写close-quote会让css找不到在哪里完结, 所以最好写上并给空值。
五、还原巨匠: all
CSS all 简写属性 将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。
这是一个比拟强硬的属性, 能够把简直所有css属性进行重置:
咱们先设置一下根底的环境
.wrap { font-size: 30px; font-weight: 900; } .box { width: 100px; height: 100px; border: 1px solid; background-color: red; color: white; } .box1 { all: initial; } .box2 { all: inherit; } .box3 { all: revert; } <body> <div class="wrap"> <div class="box">你好</div> <div class="box box1">你好: initial</div> <div class="box box2">你好: inherit</div> <div class="box box3">你好: revert</div> </div> </body>1: initial : 还原为初始值
顾名思义这里是将 div身上的所有属性都重置了, 不论是"背景色彩"还是"字体色彩", 甚至宽高, 所以这里属于是齐全初始化了。
然而有个大坑, 他会把div本来的display: block扭转成display: inline, 也就是说all: initial;将所有属性置为空了, 而不会依据标签属性进行筛选, 所以这个属性有点太相对了要小心应用。
2: inherit: 集成值保留
仍然是顾名思义, 将所有属性设置为 "继承父级", 并且还原本身的属性, 比方宽高都没有了然而继承了字体大小与字体粗细。
不是所有css属性的默认值都是'继承', 比如说position的默认值就不是集成, 然而position能够设置为position: inherit;, 这就埋下了隐患请看下一条属性。
3: revert: 还原
尽管看起来成果与inherit简直一样, 然而本质上有大区别, 比方如果此时wrap父元素设置position: absolute;, 那么设置了all: inherit的元素为position: absolute;, 设置了all:revert的元素是position: static, 也就是说指标元素单纯的还原成最开始的款式, 剔除掉了前期设置的属性, 但保留一些默认的继承属性, 这个属性尽管兼容性超差但最牛!
4: all的优先级
.box{ all: revert; background-color: red;} 这里的背景色是能够设置胜利的, 所以all应该算一锤子买卖, 只把设置all属性之前的款式重置。
// 父级 .box { background-color: red !important; } .box1 { all: revert; } 下面是不失效的, 因为all只能重置优先级不如本人选择器的属性, 所以须要all: revert!important;。
六、指标元素款式 :target
这个属性让页面的url参数与dom元素互动起来
1: 跳转选中
比方以后url是https://www.xxxxxxxxxxx.com/#target_id则:
:target { background-color: red; font-size: 200px; }<div id="target_id"> 你好</div>2: 跳转后动画
我想到的是每次选中元素后让元素有个动画成果, 切实太简略了就不演示了, 说一下这个属性的鸡肋点吧, 比方无奈同时传递多个id, 或者传递class, 并且他让css属性与dom构造之间绑定关系变弱了代码不不便保护与浏览。
七、输入框的placeholder款式设置: placeholder-shown
能够设置当input组件中展现placeholder时的款式:
input:placeholder-shown { background-color: lightblue; } input { width: 300px; height: 60px; } <input placeholder="展现我时为蓝色" />输出内容则还原
八、换行展现的艺术: hyphens
当英文单词必须折行时咱们是否须要一个'连字符':
<div class="box"> The auto setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. </div> .box { border: 1px solid black; width: 200px; height: 100px; }配角暴风退场
.box { border: 1px solid black; width: 200px; height: 100px; hyphens: auto; }比拟惋惜的是无奈自在定义'连字符'的款式, 否则肯定有点乏味。
九、滚动的优质体验: scroll-snap-type
定义一个滚动时的"长期进展点", 这个问题间接看gif动画比拟间接:
简略来看就是每次惯性滑动都会停留在特定元素所在位置, 有点像滚动的'锚点':
<!DOCTYPE html><html> <head> <style> .box { width: 200px; height: 150px; border: 1px solid; border-left: 5px solid black; border-right: 5px solid black; margin: 40px; overflow: auto; scroll-snap-type: y mandatory; } .item { border-top: 1px solid red; height: 150px; /* scroll-margin-top:20px; */ scroll-snap-align: start none; } </style> </head> <body> <div class="box"> <div class="item">11111</div> <div class="item">22222</div> <div class="item">33333</div> <div class="item">44444</div> <div class="item">55555</div> <div class="item">66666</div> </div> </body></html> scroll-snap-type: y mandatory;设置了y轴滚动时尽量停留在'元素点位'上, scroll-snap-align: start none;指标元素本身的滚动起始方向用来对齐, 也就是通知浏览器滚动后要停留在子元素的哪里。
在子元素身上设置scroll-margin-top: 20px 能够设置肯定的检测间隔, 并附加回弹成果:
end
这次神奇的css之旅就是这样, 心愿与你一起提高。