>[success] 这里收集 Code Pen 的一些 demo [TOC] # 阴影属性简介 ```css { box-shadow: none| [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ] } ``` 以 `box-shadow: 1px 2px 3px 4px #333` 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。 >扩张半径是以阴影的外边界向外扩展（为正数）或者向内抵消原来的阴影（为负数），当负数绝对值大于等于某方向的阴影偏移量时，该方向的阴影消失。 <iframe height="300" style="width: 100%;" scrolling="no" title="阴影属性" src="//codepen.io/chenmingk/embed/Bgazpw/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/Bgazpw/'>阴影属性</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 立体投影 ***** * 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作 * 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度 * `z-index：-1`可以让用于投影的元素被父元素覆盖 <iframe height="300" style="width: 100%;" scrolling="no" title="立体投影" src="//codepen.io/chenmingk/embed/qzBZaJ/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/qzBZaJ/'>立体投影</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 文字长阴影 ***** `H(hue 色调)、S(saturation 饱和度)、L(lightness 亮度)`，`hsl($hue, $saturation, $lightness)`，H 取值范围是 0°~360° 的圆心角，S 和 L 都是 0~100% 的取值范围。  下图是 H(色调) 取值的转盘图，我们需要记住六大主色： - 0° / 360°为红色(red) - 60°为黄色(yellow) - 120°为绿色(green) - 180°为青色(cyan) - 240°为蓝色(blue) - 300°为紫红色(magenta) 如 `hsl(300, 50%, 50%)`，300 就在转盘上的 300°，为紫红色。  阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。这个需求，SASS 可以很好的实现，下面是两个 SASS 颜色函数： * `fade-out` 改变颜色的透明度，让颜色更加透明 * `desaturate($color, $amount)` 改变颜色的饱和度值，让颜色更少的饱和（这个属于 SASS 的 HSL 函数） <iframe height="300" style="width: 100%;" scrolling="no" title="wLvGyz" src="//codepen.io/chenmingk/embed/wLvGyz/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/wLvGyz/'>wLvGyz</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 图片阴影（彩色） ***** 利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 `filter: blur()` 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。 `filter: blur(10px) brightness(80%) opacity(.8);` <iframe height="300" style="width: 100%;" scrolling="no" title="图片阴影" src="//codepen.io/chenmingk/embed/qzBNLN/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/qzBNLN/'>图片阴影</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # 文字霓虹灯效果 本质上都是大范围的 `box-shadow` 过渡效果与白色文字的叠加 使用 CSS3 animation 改变 `text-shadow` 属性 <iframe height="300" style="width: 100%;" scrolling="no" title="文字霓虹灯" src="//codepen.io/chenmingk/embed/ZdEpzE/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/ZdEpzE/'>文字霓虹灯</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> # CSS Shape [https://www.cnblogs.com/coco1s/p/6992177.html](https://www.cnblogs.com/coco1s/p/6992177.html) [https://css-tricks.com/the-shapes-of-css/](https://css-tricks.com/the-shapes-of-css/) # 瀑布流 关键点，横向 flex 布局嵌套多列纵向 flex 布局 ```css $lineCount: 4; // 行数 $count: 8; // 列数 // random -> [0, 1] 随机生成高度 @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 随机生成颜色 @function randomColor() { @return rgb(randomNum(255), randomNum(255), randomNum(255)); } .g-container { display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; } .g-queue { display: flex; flex-direction: column; flex-basis: 24%; } .g-item { position: relative; width: 100%; margin: 2.5% 0; } // [start, end) @for $i from 1 to $lineCount+1 { .g-queue:nth-child(#{$i}) { @for $j from 1 to $count+1 { .g-item:nth-child(#{$j}) { height: #{randomNum(300, 50)}px; background: randomColor(); &::after { content: "#{$j}"; position: absolute; color: #fff; font-size: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } } } ``` <iframe height="265" style="width: 100%;" scrolling="no" title="rXmvEp" src="//codepen.io/chenmingk/embed/rXmvEp/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/chenmingk/pen/rXmvEp/'>rXmvEp</a> by 陈明康 (<a href='https://codepen.io/chenmingk'>@chenmingk</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>