CocoB站直播学习笔记
布局
- 垂直并水平居中目前比较快的两种方法
方式一：grid布局
父元素设置css属性 :
display:grid;
place-content: center;
方式二：自动margin
- 父元素设置css属性 :
display:flex;
/*或者 display:grid; */
- 子元素设置css属性 :
margin:auto;
上述两种方法在单个子元素时居中表现是一致的，如图：
但在多个子元素下表现各不相同，包括方式二的父元素设置grid布局和flex布局效果也不相同，分别可实现如下布局:
代码如下，可自行调试查看效果：
- 利用自动margin实现导航栏左右布局
效果如下：
核心代码：
- 实现不规则形状容器
利用shape-outside实现平行四边形容器且文字环绕，效果如下：
MDN摘抄：
shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
代码：
阴影
- 利用多重阴影实现多重边框和云
效果：
思路： 多重边框的话就是扩散半径依次增大，模糊程度为0（不进行模糊处理）；云朵效果就是利用多重阴影生成几个一样的圆，让他们无规则相交，调整到合适的位置即可。
代码：
- 利用内阴影实现loading光圈，效果如下：
思路：主要设置一个有色的内阴影，然后让容器进行旋转即可。
代码：
- 利用阴影实现相交圆
效果：
思路：一个本体无颜色，一个有色外阴影与本体相交，一个有色内阴影向内调整到合适位置即可实现。
代码：
- drop-shadow
当需要给一些不规则的形状添加阴影时，可以使用drop-shadow，样式添加给父元素，效果作用于所有子元素；
例如，给上面的多彩边框和云朵添加阴影，只需在main盒子上面添加此样式。
渐变
- 利用圆锥渐变实现渐变边框
MDN摘抄：
CSS 函数 conic-gradient() 创建了一个由渐变组成的图像，渐变的颜色变换围绕一个中心点旋转（而不是从中心辐射）。锥形渐变的例子包括饼图和色轮 color wheels (en-US). conic-gradient() 函数的结果是 <gradient> 数据类型的对象，是一种特殊的 <image> 数据类型。
思路：利用一个伪元素设置为圆锥渐变，过渡一个白色由浅到深再到浅的效果，加上旋转动画，然后再用另外一个伪元素覆盖到上面实现镂空效果，边框就能呈现出来了。
- 利用重复渐变和动画实现进度条效果
思路：使用重复渐变实现间隔色，然后再把渐变元素加上位移动画。
混合模式
-利用mix-blend-mode混合模式实现文字反色
思路：给文字添加混合模式difference。
Coco大佬的ppt里面还有好多很有意思的效果，感兴趣可点击链接查看，录播链接也奉上。
过年这两天暂时就看了这么多，记录一下，后面再继续学习。 最后致敬Coco大佬，致敬神奇的css！
