js 实现element-plus 文档页主题切换动画
需要借助到一个新的api,接受一个回调函数. 返回一个过渡实例
[这里有一个前提，就是 这个startViewTransition 有一个默认的动画效果就是淡入淡出，要实现自己的效果需要将默认效果覆盖掉]
::view-transition-old(root), ::view-transition-new(root) {
animation:none ;
// 这里是css代码
}
button.onClick = function (e) { const transition = document.startViewTransition(() => { document.documentElement.calssList.toggle('dark'); }) const x = e.cilentX // 鼠标位置 const y = e.clientY
const targetRadius = Math.hypot(
Math.max(window.innerWidth -x ,x),
Math.max(window.innerHeight -y ,y)
) // 计算出最终的圆的半径。 这里使用math.max 是因为可能远点在窗口左边，此时 圆的半径就是window.innerWidth -x，圆的半径在窗口有变的话， 那么此时圆的半径就是x！！！
transition.ready.then(() => {
// js 动画
document.documentElement.animate(
// 第一个参数是动画效果
{
clipPath:[`circle(0% at ${x}px ${y}px )`,`circle(${targetRadius}px at ${x}px ${y}px )`]
},
//第二个效果是配置
{
duration:1000,
pseudoElement:'::view-transition-new(root)' // 这里表示伪元素名称！！
})
})
}
::marker 选择器 ： 可以选择 有序列表的符号，单独控制！！！
li::marker {
font-size: 14px;
}
<!---->
修改滚动条样式
/* 整个滚动条 */
::-webkit-scrollbar {
/* 对应纵向滚动条的宽度 */
width: 10px;
/* 对应横向滚动条的宽度 */
height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #b4dbf5;
border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #d7dbdf;
border-radius: 32px;
}
<!---->
flex 布局，设置 flex-wrap 自动换行之后， 上下两行间距太大，如何调整？
```
align-content: flex-start;
```
使用该属性可以让div与交叉轴的起点对齐，即顶部对齐；
<!---->
最简单的CSS方式实现流式瀑布布局
div {
column-count:3 // 表示将div 分成三列，其中的元素就按其大小自己排列，不够的就按column 换行【这里是换列】
如下图所示，每个box的高度都是动态设置的，这样就形成了这种高度不同，但是排列不是很乱的瀑布布局。
}
flex 布局 flex-wrap的优雅替代方案：
1.如果是三个元素 设置 flex-wrap，当页面只能容下两个： 会出现下面这种情况，导致布局稍显奇怪。这时候需要配合 flex-grow:1.让最后一个占满空间，但是也会有奇怪的点就是会让别人觉得大的元素更加重要
2.媒体查询，通过媒体查询找到临界位置，改变flex-direction:column,变成下面的效果
3.存在较多的卡片时，width宽度固定，然后flex-nowrap，然后设置overflow-x:scroll,
设置滚动平滑而且滑停得位置为每个元素的左边框跟容易的左边对齐。这种方式可以隐藏滚动条，然后设置左右滚动的按钮，保证每次点击一次就滚动一个item，不会停留在两个卡片之前导致停留位置奇怪，看不到重点！！！
4. 使用grid 布局， 使用 grid-template-columns(count, size) 第一个是列的数量，第二个是大小。
可以使用 grid-template-columns(auto-fit, minmax(300px, 1fr)) 实现flex-wrap的效果，只不过在最后一个行，列不足的情况下，会效果比flex-wrap好。
