[ { "path": ".gitattributes", "content": "*.md linguist-language=CSS\n*.png linguist-language=CSS\n" }, { "path": ".gitignore", "content": "node_modules/\n.DS_Store\n.DS_Store?\n*/.DS_Store\n*/*/.DS_Store.DS_Store\n" }, { "path": ".nojekyll", "content": "" }, { "path": "3d/3d-ball.md", "content": "## 3D 球动画\r\n\r\n3D 球动画。\r\n### 关键点\r\n\r\n+ 借助 SASS，利用公式，随机将 100 个点附着在球表面，再进行动\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\n.container \r\n - for(var i=0; i<100; i++)\r\n .point\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$n: 100;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomColor() {\r\n @return rgba(randomNum(255), randomNum(255), randomNum(255), randomNum(100)/100);\r\n}\r\n\r\nbody {\r\n background: #000;\r\n overflow: hidden;\r\n}\r\n.container {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 200px;\r\n height: 200px;\r\n transform: translate3d(-50%, -50%, 0) rotateY(0deg) rotateZ(0deg);\r\n transform-style: preserve-3d;\r\n perspective: 1000;\r\n animation: fullrotate 10s linear infinite;\r\n // filter: blur(1px);\r\n}\r\n.point {\r\n position: absolute;\r\n top: 95px;\r\n left: 49%;\r\n background: #000;\r\n border-radius: 50%; \r\n width: 20px;\r\n height: 20px;\r\n // mix-blend-mode: lighten;\r\n \r\n @for $i from 1 through $n { \r\n $rot-x: random(360) + deg;\r\n $rot-y: random(360) + deg;\r\n $radius: 100px;\r\n \r\n &:nth-child(#{$i}) {\r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);\r\n background: randomColor();\r\n filter: blur(0px);\r\n animation: \r\n expand#{$i} 10s linear infinite, \r\n sparkle 0.25s linear infinite;\r\n animation-delay: $i*2ms;\r\n }\r\n @keyframes expand#{$i} {\r\n 0% { \r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);\r\n filter: blur(0px);\r\n width: 20px;\r\n height: 20px;\r\n }\r\n 20%, 40% { \r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*($i/10));\r\n filter: blur(10px);\r\n width: 20px;\r\n height: 20px;\r\n }\r\n 40%, 60% {\r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*4);\r\n filter: blur(0px);\r\n width: 40px;\r\n height: 40px;\r\n }\r\n 65%, 80% {\r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*($i/10));\r\n filter: blur(10px);\r\n width: 20px;\r\n height: 20px;\r\n }\r\n 85%, 100% {\r\n transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);\r\n filter: blur(0px);\r\n width: 20px;\r\n height: 20px;\r\n }\r\n }\r\n @-webkit-keyframes sparkle {\r\n 50% {\r\n background: lemonchiffon;\r\n }\r\n }\r\n }\r\n}\r\n\r\n@keyframes fullrotate {\r\n to { \r\n transform: translate3d(-50%, -50%, 0) rotateY(360deg) rotateZ(360deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-count-number.md", "content": "## 3D 数字计数动画\r\n\r\n3D 数字计数动画。\r\n\r\n### 关键点\r\n\r\n看着复杂，其实不难，主要是耗时间。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.com/coco1s/p/7443263.html)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-number-container.vision.preserve\r\n div.g-number-rotate.preserve\r\n div.g-number.preserve(data-digit=1)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n div.g-number.preserve(data-digit=2)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n div.g-number.preserve(data-digit=3)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n div.g-comma.preserve\r\n div.g-number.preserve(data-digit=4)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n div.g-number.preserve(data-digit=5)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n div.g-number.preserve(data-digit=6)\r\n - for(var i=0; i<7; i++) \r\n div.g-line.preserve.translate\r\n \r\n```\r\n\r\nSCSS：\r\n```scss\r\n$width: 3vw;\r\n$commaWidth: .5vw;\r\n$gap: 0.2vw;\r\n$dis: -0.2vw;\r\n$secTop: $width + $gap;\r\n$thirdTop: $width * 2 + $gap * 2;\r\n$secLineTop: $width + $gap * 2;\r\n$screenTop: $width * 4;\r\n$numberMargin: 3vw;\r\n$transformDistance: 50px;\r\n$bgColor: rgba(255, 255, 255, 1);\r\n$scale: .9;\r\n$normalColor: #181919;\r\n$lightColor: #34eabc;\r\n$drakColor: #3c4444;\r\n$lightShadow: 0 0 1vw #0BFDFD, inset 0 0 0.125vmin #0BFDFD;\r\n$drakShadow: 0 0 1vw #425454;\r\n$animTime: 10s;\r\n\r\nhtml,\r\nbody {\r\n width: 100%;\r\n height: 100%;\r\n background-color: #000;\r\n overflow: hidden;\r\n}\r\n\r\n.g-number-container {\r\n position: relative;\r\n margin-top: 10vh;\r\n text-align: center;\r\n animation: rotateReverse $animTime infinite linear;\r\n z-index: 999;\r\n}\r\n\r\n.g-number-rotate {\r\n transform: rotateX(10deg) rotateZ(0);\r\n animation: rotate $animTime infinite linear;\r\n}\r\n\r\n.vision {\r\n // transform: translate(-50%, -50%);\r\n // transform-origin: 50% 50%;\r\n}\r\n\r\n.preserve {\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n}\r\n\r\n.g-number {\r\n position: relative;\r\n width: $width;\r\n height: $screenTop;\r\n display: inline-block;\r\n margin: $numberMargin $numberMargin 0 0;\r\n \r\n .g-line {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: $width;\r\n height: 2px;\r\n background: $normalColor;\r\n \r\n &:nth-child(1) {\r\n transform: translateY($dis);\r\n }\r\n \r\n &:nth-child(2) {\r\n top: $secTop; \r\n }\r\n \r\n &:nth-child(3) {\r\n transform: rotate(180deg) translateY($dis);\r\n top: $thirdTop;\r\n }\r\n \r\n &:nth-child(4) {\r\n transform: rotate(90deg) translateY(-$dis);\r\n transform-origin: 0 center;\r\n }\r\n \r\n &:nth-child(5) {\r\n transform: rotate(-90deg) translateY(-$dis);\r\n transform-origin: 100% center;\r\n }\r\n \r\n &:nth-child(6) {\r\n top: $secLineTop; \r\n transform: rotate(90deg) translateY(-$dis);\r\n transform-origin: 0 center;\r\n }\r\n \r\n &:nth-child(7) {\r\n top: $secLineTop; \r\n transform: rotate(-90deg) translateY(-$dis);\r\n transform-origin: 100% center;\r\n }\r\n }\r\n \r\n .g-line::before,\r\n .g-line::after{\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n background-color: $lightColor;\r\n box-shadow: $lightShadow;\r\n }\r\n \r\n .g-line::before {\r\n left: 0;\r\n right: 50%;\r\n transition: all .5s ease-in;\r\n }\r\n \r\n .g-line::after {\r\n left: 50%;\r\n right: 0;\r\n transition: all .5s ease-out;\r\n }\r\n \r\n .translate {\r\n &::before,\r\n &::after{\r\n transform: translateZ($transformDistance);\r\n }\r\n }\r\n}\r\n\r\n.g-comma {\r\n position: relative;\r\n top: -$thirdTop + 1vw;\r\n display: inline-block;\r\n width: 1vw;\r\n height: 1vw;\r\n background: $normalColor;\r\n margin: $numberMargin $numberMargin 0 -.8vw;\r\n \r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: $lightColor;\r\n transform: translateZ($transformDistance);\r\n }\r\n \r\n &::after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: -.8vw;\r\n right: .3vw;\r\n border: .2vw solid transparent;\r\n border-top: .9vw solid $lightColor;\r\n transform: translateZ($transformDistance) rotate(40deg);\r\n }\r\n}\r\n\r\n.g-number[data-digit=\"1\"] .g-line:nth-child(1),\r\n.g-number[data-digit=\"1\"] .g-line:nth-child(2),\r\n.g-number[data-digit=\"1\"] .g-line:nth-child(3),\r\n.g-number[data-digit=\"1\"] .g-line:nth-child(4),\r\n.g-number[data-digit=\"1\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"2\"] .g-line:nth-child(4),\r\n.g-number[data-digit=\"2\"] .g-line:nth-child(7),\r\n.g-number[data-digit=\"3\"] .g-line:nth-child(4),\r\n.g-number[data-digit=\"3\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"4\"] .g-line:nth-child(1),\r\n.g-number[data-digit=\"4\"] .g-line:nth-child(3),\r\n.g-number[data-digit=\"4\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"5\"] .g-line:nth-child(5),\r\n.g-number[data-digit=\"5\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"6\"] .g-line:nth-child(5),\r\n.g-number[data-digit=\"7\"] .g-line:nth-child(2),\r\n.g-number[data-digit=\"7\"] .g-line:nth-child(3),\r\n.g-number[data-digit=\"7\"] .g-line:nth-child(4),\r\n.g-number[data-digit=\"7\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"9\"] .g-line:nth-child(6),\r\n.g-number[data-digit=\"0\"] .g-line:nth-child(2){\r\n &::before,\r\n &::after {\r\n transform: translateZ(25px);\r\n background: $drakColor;\r\n box-shadow: $drakShadow;\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\r\n }\r\n 50% {\r\n transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);\r\n }\r\n 100% {\r\n transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);\r\n }\r\n}\r\n\r\n@keyframes rotateReverse {\r\n 0% {\r\n transform: rotateZ(0deg);\r\n }100% {\r\n transform: rotateZ(-360deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-css-galaxy-shuttle.md", "content": "## 3D 宇宙时空穿梭效果\n\n利用 CSS 3D 实现星空穿梭效果\n\n### 关键点\n\n1. 选取一张合适的星空图\n2. 利用 5 个元素设定上述星空图，在 3D 效果的作用下，在上下左右中5个方向铺满一屏\n3. 父容器在极小的 `perspective` 值下，设定容器的 `translateZ`动画，实现效果\n4. 通过两组同样的动画，其中一组设置负延迟实现动画的衔接\n\nHTML：\n```\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n```\n\nSCSS：\n```scss\nhtml, body{\n height: 100%;\n width: 100%;\n overflow: hidden;\n background: #000;\n text-align: center;\n}\n\nbody:before{\n content: '';\n display: inline-block;\n height: 100%;\n vertical-align: middle;\n}\n\n.g-container{\n display: inline-block;\n vertical-align: middle;\n perspective: 4px;\n perspective-origin: 50% 50%;\n position: relative;\n animation: hueRotate 21s infinite linear;\n}\n\n.g-group{\n position: absolute;\n/* perspective: 4px; */\n width: 1000px;\n height: 1000px;\n left: -500px;\n top: -500px;\n transform-style: preserve-3d;\n animation: move 12s infinite linear;\n animation-fill-mode: forwards;\n}\n\n.g-group:nth-child(2){\n animation: move 12s infinite linear;\n animation-delay: -6s;\n}\n\n.item {\n position: absolute;\n width: 100%;\n height: 100%;\n background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);\n background-size: cover;\n opacity: 1;\n animation: fade 12s infinite linear;\n animation-delay: 0;\n}\n\n.g-group:nth-child(2) .item {\n animation-delay: -6s;\n}\n\n.item-right {\n transform: rotateY(90deg) translateZ(500px);\n}\n\n.item-left {\n transform: rotateY(-90deg) translateZ(500px);\n}\n\n.item-top {\n transform: rotateX(90deg) translateZ(500px);\n}\n\n.item-bottom {\n transform: rotateX(-90deg) translateZ(500px);\n}\n\n.item-middle {\n transform: rotateX(180deg) translateZ(1000px);\n}\n\n@keyframes move {\n 0%{\n transform: translateZ(-500px) rotate(0deg);\n }\n 100%{\n transform: translateZ(500px) rotate(0deg);\n }\n}\n\n@keyframes fade {\n 0%{\n opacity: 0;\n }\n 25%,\n 60%{\n opacity: 1;\n }\n 100%{\n opacity: 0;\n }\n}\n\n@keyframes hueRotate {\n 0% {\n filter: hue-rotate(0);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n```\n\n效果如下：\n\n" }, { "path": "3d/3d-cuber-progress-bar.md", "content": "## 3D 立方体进度条\n\n使用 CSS 3D 实现的立方体制作酷炫的进度条。\n\n### 关键点\n\n+ 可以利用 CSS Property 实现渐变的动画效果\n+ 可以利用滤镜的 hue-rotate 变化实现整体的颜色变化\n\n\nHTML：\n```\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n```\n\nSCSS：\n```scss\n@property --per {\n syntax: '';\n inherits: false;\n initial-value: 0%;\n}\n\nbody,\nhtml {\n width: 100%;\n height: 100%;\n background: linear-gradient(0deg, #EEEFED, #F9E3E9);\n display: flex;\n flex-direction: column;\n}\n\n.demo-cube {\n margin: auto;\n}\n\n.perspective {\n transform-style: preserve-3d;\n perspective: 520px;\n transform: rotateX(15deg);\n}\n\nul {\n padding: 0;\n list-style: none;\n}\n\n.demo-cube {\n position: relative;\n width: 100%;\n height: 200px;\n\n .cube {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 300px;\n height: 100px;\n transform-style: preserve-3d;\n transform-origin: 50px 50px;\n transform: translate(-50%, -50%) rotateX(-33.5deg);\n\n li {\n position: absolute;\n display: block;\n width: 100px;\n height: 100px;\n // background: rgba(156, 39, 176, .4);\n // border: 1px solid #ddd;\n }\n .top {\n width: 300px;\n transform: rotateX(90deg) translateZ(50px);\n }\n .bottom {\n width: 300px;\n transform: rotateX(-90deg) translateZ(50px);\n }\n .front {\n width: 300px;\n transform: translateZ(50px);\n }\n .back {\n width: 300px;\n transform: rotateX(-180deg) translateZ(50px);\n }\n }\n}\n\n.percentage .cube {\n .top,\n .front,\n .bottom,\n .back {\n background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 65%, rgba(255, 255, 255, .6) 65%, rgba(255, 255, 255, .6));\n }\n}\n\n.colorful {\n animation: hueRotate 10s infinite linear;\n .cube {\n .top,\n .front,\n .bottom,\n .back {\n background: linear-gradient(90deg, rgba(40, 101, 127, .9), rgba(133, 165, 181, .5) 85%, rgba(255, 255, 255, .6) 85%, rgba(255, 255, 255, .6));\n }\n }\n}\n.pink .cube {\n .top,\n .front,\n .bottom,\n .back {\n background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));\n animation: perChange 6s infinite;\n }\n}\n\n@keyframes perChange {\n 0% {\n --per: 0%;\n }\n 90%,\n to {\n --per: 80%;\n }\n}\n\n@keyframes hueRotate {\n 0% {\n filter: hue-rotate(0);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n```\n\n效果如下：\n\n" }, { "path": "3d/3d-cuber-roll-404.md", "content": "## 3D 立方体滚动 404 效果\n\n使用 CSS 3D 实现的立方体制作的一个 404 效果。\n\n### 关键点\n\n其核心就在于在一个 CSS 3D 立方体的基础上：\n\n1. 添加立方体的滚动动画\n2. 控制下落的缓动函数，及落地的震荡动画（为了效果更为逼真，运用了设计动画中的预备动作、跟随和重叠动画等技巧）\n3. 控制立方体及地面数字画面的平移\n4. 控制动画的无限循环\n\n整体制作还是非常有难度的，但是用在自己的 404 页面，确实也是非常的酷炫。这个效果，我最早见于 [Yusuke Nakaya](https://codepen.io/YusukeNakaya) 大神，完整的代码你也可以戳这里：[CodePen -- Only CSS: 404 Rolling Box ](https://codepen.io/YusukeNakaya/pen/YLPVER)\n\nHTML（使用了 Pug 模板引擎）：\n```\n.rail\n - for (i = 0; i < 10; i++)\n .stamp.four 4\n .stamp.zero 0\n.world\n .forward\n .box\n - for (i = 0; i < 6; i++)\n .wall\n```\n\nSCSS：\n```scss\nbody {\n background: #fff;\n height: 100vh;\n overflow: hidden;\n display: flex;\n font-family: 'Anton', sans-serif;\n justify-content: center;\n align-items: center;\n perspective: 1000px;\n}\n\n$wallSize: 200px;\n\ndiv {\n transform-style: preserve-3d;\n}\n.rail {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transform: rotateX(-30deg) rotateY(-30deg);\n .stamp {\n position: absolute;\n width: $wallSize;\n height: $wallSize;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(20, 20, 20, 1);\n color: #fff;\n font-size: 7rem;\n @for $i from 1 through 20 {\n &:nth-child(#{$i}) {\n animation: stampSlide 20 * 2000ms ($i * -2000) - 300ms linear infinite;\n }\n }\n }\n}\n@keyframes stampSlide {\n 0% {\n transform: rotateX(90deg) rotateZ(-90deg) translateZ(-$wallSize) translateY(130px);\n }\n 100% {\n transform: rotateX(90deg) rotateZ(-90deg) translateZ(-$wallSize) translateY(130 - 200 * 20px);\n }\n}\n.world {\n transform: rotateX(-30deg) rotateY(-30deg);\n .forward {\n position: absolute;\n animation: slide 2000ms linear infinite;\n }\n .box {\n width: $wallSize;\n height: $wallSize;\n transform-origin: 100% 100%;\n animation: roll 2000ms cubic-bezier(1.000, 0.010, 1.000, 1.000) infinite;\n .wall {\n position: absolute;\n width: $wallSize;\n height: $wallSize;\n background: rgba(10, 10, 10, 0.8);\n border: 1px solid rgba(250, 250, 250, 1);\n box-sizing: border-box;\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n font-size: 7rem;\n }\n &:nth-child(1) {\n transform: translateZ($wallSize / 2);\n }\n &:nth-child(2) {\n transform: rotateX(180deg) translateZ($wallSize / 2);\n }\n &:nth-child(3) {\n transform: rotateX(90deg) translateZ($wallSize / 2);\n &::before {\n transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);\n animation: zeroFour 4000ms -2000ms linear infinite;\n }\n }\n &:nth-child(4) {\n transform: rotateX(-90deg) translateZ($wallSize / 2);\n &::before {\n transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);\n animation: zeroFour 4000ms -2000ms linear infinite;\n }\n }\n &:nth-child(5) {\n transform: rotateY(90deg) translateZ($wallSize / 2);\n &::before {\n transform: rotateX(180deg) translateZ(-1px);\n animation: zeroFour 4000ms linear infinite;\n }\n }\n &:nth-child(6) {\n transform: rotateY(-90deg) translateZ($wallSize / 2);\n &::before {\n transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);\n animation: zeroFour 4000ms linear infinite;\n }\n }\n }\n }\n}\n\n@keyframes zeroFour {\n 0% {\n content: '4';\n }\n 100% {\n content: '0';\n }\n}\n\n@keyframes roll {\n 0% {\n transform: rotateZ(0deg);\n }\n 85% {\n transform: rotateZ(90deg);\n }\n 87% {\n transform: rotateZ(88deg);\n }\n 90% {\n transform: rotateZ(90deg);\n }\n 100% {\n transform: rotateZ(90deg);\n }\n}\n\n@keyframes slide {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-$wallSize);\n }\n}\n```\n\n效果如下：\n\n" }, { "path": "3d/3d-glowing-rotate-text.md", "content": "## 3D 光影变换文字效果\n\n利用 CSS 3D 实现光影变换文字效果。\n\n### 关键点\n\n+ 给父元素 `div` 设置 `transform-style: preserve-3d`，给每个 `

` 设定不同的 `translateZ()` 来达到文字的 3D 效果\n+ 辅助一些旋转，色彩变化给效果增色\n\nHTML：\n```\n
\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n

Glowing 3D TEXT

\n
\n```\n\nSCSS：\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');\n\nhtml,\nbody {\n width: 100%;\n height: 100%;\n background: #000;\n overflow: hidden;\n text-align: center;\n font-family: 'Rajdhani', sans-serif;\n}\n\ndiv {\n animation: wobble 5s ease-in-out infinite;\n transform-origin: center center;\n transform-style: preserve-3d;\n/* perspective: 500px; */\n}\n\n@keyframes wobble {\n 0%,\n 100% {\n transform: rotate3d(1, 1, 0, 40deg);\n }\n 25% {\n transform: rotate3d(-1, 1, 0, 40deg);\n }\n 50% {\n transform: rotate3d(-1, -1, 0, 40deg);\n }\n 75% {\n transform: rotate3d(1, -1, 0, 40deg);\n }\n}\n\nh1 {\n position: absolute;\n display: block;\n width: 100%;\n top: 120px;\n font-size: 100px;\n font-weight: bold;\n text-transform: uppercase;\n color: rgba(255, 100, 100, 1);\n text-shadow: \n 0 0 5px rgba(255, 0, 0, 1), \n 0 0 20px rgba(255, 0, 0, .8), \n 0 0 50px rgba(255, 0, 0, .6);\n animation: glow 10s ease-in-out infinite;\n}\n\n@keyframes glow {\n from {\n filter: hue-rotate(0);\n }\n to {\n filter: hue-rotate(360deg);\n }\n}\n\nh1:nth-child(2) {\n transform: translateZ(5px);\n}\nh1:nth-child(3) {\n transform: translateZ(10px);\n}\nh1:nth-child(4) {\n transform: translateZ(15px);\n}\nh1:nth-child(5) {\n transform: translateZ(20px);\n}\nh1:nth-child(6) {\n transform: translateZ(25px);\n}\nh1:nth-child(7) {\n transform: translateZ(30px);\n}\nh1:nth-child(8) {\n transform: translateZ(35px);\n}\nh1:nth-child(9) {\n transform: translateZ(40px);\n}\nh1:nth-child(10) {\n transform: translateZ(45px);\n}\n```\n\n效果如下：\n\n" }, { "path": "3d/3d-infinite-maze.md", "content": "## 3D 无限延伸视角动画\r\n\r\n3D 无限延伸视角动画。\r\n\r\n\r\n### 关键点\r\n\r\n这个实现起来非常有难度。\r\n\r\n+ 四面墙壁的无限延伸的感觉塑造\r\n+ 视角的变动\r\n+ 远处最深处的遮罩\r\n\r\n非原创，原效果链接：[Perspective Origin Tunnel Animation](https://codepen.io/jkantner/pen/zXwyGr)\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n\tbackground: #575757;\r\n\tdisplay: flex;\r\n\theight: 100vh;\r\n\tmargin: 0;\r\n\t\r\n}\r\nmain {\r\n\t/* Timing */\r\n\t--durM: 6s;\r\n\t--durD: 0.5s;\r\n\t/* Tunnel itself */\r\n\t--size: 20em;\r\n\t--depth: calc(var(--size) * 6);\r\n\t--bgPos: calc(var(--size) * 0.4);\r\n\t/* Camera movement */\r\n\t--endX1: 33%;\r\n\t--endX2: 67%;\r\n\t--endY1: 40%;\r\n\t--endY2: 60%;\r\n\tanimation: po var(--durM) ease-in-out infinite;\r\n\tmargin: auto;\r\n\toverflow: hidden;\r\n\tperspective: 5em;\r\n\tperspective-origin: 50% 50%;\r\n\tposition: relative;\r\n\twidth: var(--size);\r\n\theight: var(--size);\r\n\ttransform: scale(6);\r\n}\r\nmain:before, div {\r\n\tposition: absolute;\r\n}\r\nmain:before {\r\n\tanimation: end var(--durM) ease-in-out infinite;\r\n\tbackground: currentColor;\r\n\tbox-shadow: 0 0 1em 1em;\r\n\tcolor: #000;\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tmargin: -0.5em -0.5em;\r\n\twidth: 1em;\r\n\theight: 1em;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 5;\r\n}\r\ndiv {\r\n\tbackground: conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0 / var(--bgPos) var(--bgPos);\r\n}\r\n.t, .l {\r\n\ttop: 0;\r\n\tleft: 0;\r\n\ttransform-origin: 0 0;\r\n}\r\n.r, .b {\r\n\tright: 0;\r\n\tbottom: 0;\r\n\ttransform-origin: 100% 100%;\r\n}\r\n.t, .b {\r\n\twidth: 100%;\r\n\theight: var(--depth);\r\n}\r\n.r, .l {\r\n\tfilter: brightness(70%);\r\n\twidth: var(--depth);\r\n\theight: 100%;\r\n}\r\n.t {\r\n\tanimation: t var(--durD) linear infinite;\r\n\tbackground-position: 0 calc(var(--bgPos) / 2);\r\n\tfilter: brightness(40%);\r\n\ttransform: rotateX(-90deg);\r\n}\r\n.r {\r\n\tanimation: r var(--durD) linear infinite;\r\n\tbackground-position: calc(var(--bgPos) / 2) 0;\r\n\ttransform: rotateY(-90deg);\r\n}\r\n.b {\r\n\tanimation: b var(--durD) linear infinite;\r\n\ttransform: rotateX(90deg);\r\n}\r\n.l {\r\n\tanimation: l var(--durD) linear infinite;\r\n\ttransform: rotateY(90deg);\r\n}\r\n@keyframes po {\r\n\tfrom, to { perspective-origin: var(--endX1) var(--endY1) }\r\n\t25% { perspective-origin: var(--endX2) var(--endY1) }\r\n\t50% { perspective-origin: var(--endX2) var(--endY2) }\r\n\t75% { perspective-origin: var(--endX1) var(--endY2) }\r\n}\r\n@keyframes t {\r\n\tto { transform: rotateX(-90deg) translateY(calc(var(--bgPos) * -1)) }\r\n}\r\n@keyframes r {\r\n\tto { transform: rotateY(-90deg) translateX(var(--bgPos)) }\r\n}\r\n@keyframes b {\r\n\tto { transform: rotateX(90deg) translateY(var(--bgPos)) }\r\n}\r\n@keyframes l {\r\n\tto { transform: rotateY(90deg) translateX(calc(var(--bgPos) * -1)) }\r\n}\r\n@keyframes end {\r\n\tfrom, to {\r\n\t\ttop: var(--endY1);\r\n\t\tleft: var(--endX1);\r\n\t}\r\n\t25% {\r\n\t\ttop: var(--endY1);\r\n\t\tleft: var(--endX2);\r\n\t}\r\n\t50% {\r\n\t\ttop: var(--endY2);\r\n\t\tleft: var(--endX2);\r\n\t}\r\n\t75% {\r\n\t\ttop: var(--endY2);\r\n\t\tleft: var(--endX1);\r\n\t}\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-line.md", "content": "## 3D 线条动画\r\n\r\n3D 线条动画。\r\n\r\n### 关键点\r\n\r\n+ 借助 SASS，其实是 100 个元素，借助 animation-delay 实现的一条线\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.container\r\n - for(var i=0; i<100; i++)\r\n div.circle\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$n: 100;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomColor() {\r\n @return rgba(randomNum(255), randomNum(255), randomNum(255), randomNum(100)/100);\r\n}\r\n\r\nhtml,\r\nbody {\r\n width: 100%;\r\n height: 100%;\r\n background: #000;\r\n overflow: hidden;\r\n}\r\n\r\n.container {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 1vmin;\r\n height: 1vmin;\r\n transform-style: preserve-3d;\r\n perspective: 1000;\r\n animation: screenMove 16s infinite alternate;\r\n // mix-blend-mode: lighten;\r\n}\r\n\r\n@for $i from 1 through $n { \r\n .circle:nth-child(#{$i}) {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 1vmax;\r\n height: 1vmax;\r\n border-radius: 50%;\r\n animation: anim-#{$i} 10s infinite 0.01s * $i alternate ease-in-out;\r\n background: hsl($i * 2, 95, 60);\r\n // mix-blend-mode: lighten;\r\n }\r\n \r\n @keyframes anim-#{$i}{\r\n 100% {\r\n filter: hue-rotate(360deg);\r\n transform: \r\n rotate(28 * 360deg) \r\n translate3d(50vmin, 50vmin, -#{$i * 20}px)\r\n scale(6);\r\n }\r\n }\r\n}\r\n\r\n@keyframes screenMove {\r\n 100% {\r\n transform: translate3d(-50%, -50%, 0) rotateY(45deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-maze.md", "content": "## 3D 迷宫线条特效\r\n\r\n3D 迷宫线条特效。\r\n\r\n在这里 [使用线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md)，利用线性渐变实现了一个简单的类似迷宫的线条图像，这里再实现一个 3D 的。\r\n\r\n本效果还搭配了滤镜和混合模式一起使用。\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\n-for(var j=0; j<10; j++)\r\n div.g-grid\r\n - for(var i=0; i<400; i++)\r\n div.g-box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 400;\r\n$containerCount: 10;\r\n\r\nhtml,\r\nbody {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n transform-style: preserve-3d;\r\n perspective: 2500;\r\n animation: spectiveMove 40s infinite alternate linear;\r\n filter: blur(1px) contrast(2);\r\n // mix-blend-mode: screen;\r\n background: linear-gradient(45deg, #000, #444);\r\n}\r\n\r\n@function randomRotate() {\r\n $r: random(100);\r\n @if $r > 50 { @return 45 }\r\n @if $r <= 50 { @return -45 }\r\n}\r\n\r\n.g-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: 100vmin;\r\n height: 100vmin;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(20, 5%);\r\n grid-template-rows: repeat(20, 5%);\r\n // transform: translate3d(0, 0, #{random(50)}px);\r\n}\r\n\r\n@for $i from 1 to $count + 1 {\r\n .g-box:nth-child(#{$i}) {\r\n background: linear-gradient(#{randomRotate()}deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);\r\n transform: translate3d(0, 0, #{random(100)}px);\r\n }\r\n \r\n}\r\n\r\n@for $i from 1 to $containerCount + 1 {\r\n .g-grid:nth-child(#{$i}) {\r\n transform: translate3d(-50%, 0, #{180 * $i + random(50)}px) rotateZ(#{random(90)}deg);\r\n }\r\n}\r\n\r\n@keyframes spectiveMove {\r\n 100% {\r\n perspective: 600;\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-rope-swing.md", "content": "## 3D 绳动画\n\n非常好的学习 CSS 3D 的动画 DEMO。\n\nHTML：\n\n```HTML\n\n
\n\t\n\t
    \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t\t
  • swing
    • \n\t
\n
\n```\n\nSCSS：\n```scss\n// vars\n\n$random_color: rgba(rd(255),rd(255),rd(255),.33);\n\n$c: ( // colors\n\tt: rgba(0,0,0,0),\n\ts: #000,\n\tw: #fff,\n\tgr: desaturate(rgb(rd(255),rd(255),rd(255)), 100%),\n\tr: rgb(rd(255),rd(150),rd(150)),\n\tg: rgb(rd(150),rd(255),rd(150)),\n\tb: rgb(rd(150),rd(150),rd(255)),\n\tbg: $random_color,\n\tcp: ( // color palette\n\t\t1: #283739,\n\t\t2: #2C5D63,\n\t\t3: #A9C52F,\n\t\t4: #F7EEBB\n\t),\n);\n\n// settings\n$f: unquote(\"'Podkova', serif\");\n$fb: unquote(\"'Trebuchet MS', Helvetica, sans-serif\");\n$fz: 16px;\n// uncomment for responsive font-size\n$fz: unquote('calc(1.1vw + 1.1vh - .6vmin)');\n@media screen and (max-width: 600px) {\n\tbody > * {\n\t\tfont-size: 1.5em;\n\t}\n}\n\n$time: 4s;\n\n// --------- defaults ---------\n* {\n\t&:focus {\n\t\toutline: 0;\n\t}\n\t\n\t&, &:before, &:after {\n\t\tbox-sizing: border-box;\n\t}\n}\n// @include placeholder(){\n// \t\tfont-family: $f;\n// }\n// --------------------\nhtml {\n\tbackground-color: clr(s);\n\t\n\tbody {\n\t\tfont-family: $f;\n\t\tfont-size: $fz;\n\t\tcolor: clr(w);\n\t\tbackground-color: clr(bg);\n\t}\n\t\n\t&, body {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\toverflow: hidden;\n\t}\n}\n#toggle {\n\tdisplay: none;\n}\n\n.toggle {\n\tposition: fixed;\n\tz-index: 10;\n\tleft: 1em;\n\ttop: 1em;\n\tdisplay: inline-block;\n\tpadding: .4em .5em .5em;\n\tcursor: pointer;\n\ttext-indent: 1.7em;\n\tcolor: clr(cp, 3);\n\tborder-radius: .25em;\n\ttransition: all $time/5;\n\tbackground-color: clr(cp, 1);\n\t\n\t&:before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: 20;\n\t\tleft: .5em;\n\t\ttop: .4em;\n\t\twidth: 1em;\n\t\theight: 1em;\n\t\tdisplay: inline-block;\n\t\tborder: 2px solid clr(cp, 2);\n\t\tvertical-align: middle;\n\t\tborder-radius: 3px;\n\t}\n\t\n\t&:after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tz-index: 21;\n\t\tdisplay: inline-block;\n\t\tborder: 2px solid clr(cp,4);\n\t\tborder-width: 0 4px 4px 0;\n\t\tleft: .75em;\n\t\ttop: .75em;\n\t\topacity: 0;\n\t\ttransition: all $time/5;\n\t\ttransform: rotate(45deg);\n\n\t\t#toggle:checked + #sect & {\n\t\t\twidth: .5em;\n\t\t\ttop: .25em;\n\t\t\theight: 1em;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t\n\t#toggle:checked + #sect & {\n\t\tcolor: clr(cp, 4);\n\t}\n}\n\n#sect\t{\n\twidth: 100vw;\n\theight: 100vh;\n\tpadding: 1em;\n\ttext-align: center;\n\tvertical-align: middle;\n\tdisplay: block;\n\tposition: relative;\n\tperspective: 600px;\n\t\n\tul {\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttransition: all $time/3;\n\t\ttransform-style: preserve-3d;\n\t\ttransform: translateZ(-70vmax) translateX(-50vw) rotateY(0deg);\n\t\tposition: absolute;\n\t\t\n\t\t#toggle:checked + & {\n\t\t\ttransform: translateZ(-50em) translateX(0vw) rotateY(90deg);\n\n\t\t}\n\t}\n\t\n\tli {\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\tfont-size: 3em;\n\t\tmargin-left: -5em;\n\t\ttransition: all $time/5;\n\t\t// filter: blur(0px);\n\t\topacity: 1;\n\t\tcolor: clr(cp, 4);\n\t\ttransform-origin: center -123vmax;\n\t\tanimation: pendulum ease-in-out infinite alternate $time;\n\t\t\n\t\t&:before {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 100%;\n\t\t\twidth: 1px;\n\t\t\tbox-shadow: 0 0 0 .01em clr(cp, 3);\n\t\t\theight: 25em;\n\t\t\tleft: 50%;\n\t\t\tbackground-color: clr(cp, 3);\n\t\t}\n\t\t\n\t\t@for $i from 0 to 24 {\n\t\t\t&:nth-of-type(#{$i}) {\n\t\t\t\tleft: 2.5em * $i;\n\t\t\t\tanimation-delay: -#{$i/10}s;\n\n\t\t#toggle:checked + & {\n\t\t\t\t// filter: blur(#{floor($i/3)}px);\n\t\t\t\topacity: 1.2 - ($i/15);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n@keyframes pendulum {\n\tfrom {\n\t\ttransform: translateY(70vh) rotateX(-45deg);\n\t}\n\tto {\n\t\ttransform: translateY(70vh) rotateX(45deg);\n\t}\n}\n\n\n\n// ease():\n// default, in-cubic, out-cubic, in-out-cubic, in-circ, out-circ, in-out-circ, in-expo, out-expo, in-out-expo, in-quad, out-quad, in-out-quad, in-quart, out-quart, in-out-quart, in-quint, out-quint, in-out-quint, in-sine, out-sine, in-out-sine, in-back, out-back, in-out-back, liquid\", bounce, in-out-bounce, perpetuum, impetus, full-circle, gravity, overshot, downhill, pendulum, wtf, swing\n```\n\n效果如下：\n\n" }, { "path": "3d/3d-spiral-number.md", "content": "## 3D 螺旋数字动画\r\n\r\n3D 螺旋数字动画。\r\n\r\n### 关键点\r\n\r\n+ 借助 SASS，把每一列数字渐进旋转一定角度即可\r\n+ 当然，细心的你应该发现，每个数字一直都是面向正面的\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\n.container\r\n - for(var i=0; i<36; i++)\r\n .line\r\n - for(var j=0; j<12; j++)\r\n .number\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$lineNumber: 36;\r\n$column: 12;\r\n$aniTime: 10s;\r\n\r\n@function randomNum($max, $min: 0) {\r\n\t@return ($min + random($max));\r\n}\r\n\r\n\r\nhtml,\r\nbody {\r\n background-color: #000;\r\n overflow: hidden;\r\n}\r\n\r\n.container {\r\n width: 80vw;\r\n position: relative;\r\n margin: 10vh auto;\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n display: flex;\r\n justify-content: space-between;\r\n // mix-blend-mode: luminosity;\r\n}\r\n\r\n.line {\r\n width: 20px;\r\n height: 80vh;\r\n flex: 0 1 auto;\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n \r\n .number {\r\n position: relative;\r\n font-size: 16px;\r\n height: calc(80vh / 18);\r\n border-radius: 50%;\r\n transform-style: preserve-3d;\r\n perspective: 1000px;\r\n box-shadow: 0 0 5px 5px rgba(255, 248, 78, .1),\r\n inset 0 0 5px 5px rgba(255, 248, 78, .1);\r\n line-height: calc(80vh / 18);\r\n \r\n &::before {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n text-align: center; \r\n color: #57ff5e;\r\n text-shadow: 0 0 40px #57ff5e;\r\n }\r\n }\r\n}\r\n\r\n@for $i from 0 to $lineNumber {\r\n .line:nth-child(#{$i + 1}) {\r\n transform: rotateX(#{$i * 10}deg);\r\n \r\n \r\n @for $j from 0 to $column {\r\n .number:nth-child(#{$j + 1}) {\r\n // 卡就去掉这一行\r\n animation: reRotate $aniTime linear infinite;\r\n \r\n &::before {\r\n transform: rotateX(#{$i * -10}deg);\r\n content: '#{randomNum(9)}';\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.container {\r\n transform: rotateX(0);\r\n animation: conRotate $aniTime linear infinite;\r\n}\r\n\r\n@keyframes conRotate {\r\n to {\r\n transform: rotateX(360deg);\r\n }\r\n}\r\n\r\n@keyframes reRotate {\r\n to {\r\n transform: rotateX(-360deg);\r\n }\r\n}\r\n\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/3d-text-debut.md", "content": "## 3D 文字出场动画\n\n利用 CSS 3D 实现文字出场特效\n\n### 关键点\n\n1. 父元素、子元素设置 `transform-style: preserve-3d`\n2. 用 `span` 元素的两个伪元素复制两个相同的字，利用 `translateZ()` 让它们在 Z 轴间隔一定距离\n3. 添加简单的旋转、透明度、字体颜色变化\n\n可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。\n\nHTML：\n```\n
\n C\n S\n S\n \n 3\n D\n
\n```\n\nSCSS：\n```scss\n@import url(https://fonts.googleapis.com/css?family=Crimson+Text);\n@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');\n$bright : #AFA695;\n$gold : #867862;\n$dark : #746853;\n\n$duration : 8s;\n\nbody, html {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tbackground: #000;\n\toverflow: hidden;\n}\n\ndiv {\n\tmargin: auto;\n\tperspective: 2000px;\n\ttransform-style: preserve-3d;\n\tfont: 10vw Righteous;\n\tanimation: fade $duration infinite;\n}\n\nspan {\n\tposition: relative;\n\tdisplay: inline-block;\n\tmin-width: .5em;\n\ttext-align: center;\n\ttransform-style: preserve-3d;\n\ttransform: rotateY(25deg);\n\tanimation: rotate $duration infinite ease-in;\n\tcolor: black;\n\t\n\t&:after, &:before {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tcontent: attr(class);\n\t\tcolor: $gold;\n\t\tz-index: -1;\n\t\tanimation: shadow $duration infinite;\n\t}\n\t\n\t&:before {\n\t\ttransform: translateZ(-14px);\n\t}\n\t&:after {\n\t\ttransform: translateZ(-7px);\n\t}\n}\n\n@keyframes fade {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: scale(1.2);\n\t}\n\t25% { opacity: 1; }\n\t100% {\n\t\ttransform: scale(1);\n\t}\n}\n\n@keyframes rotate {\n\tfrom {\n\t\ttransform: rotateY(65deg);\n\t}\n\t50%, 100% {\n\t\tcolor: $dark;\n\t\ttransform: rotateY(5deg);\n\t}\n\t100% {\n\t\tcolor: $gold;\n\t}\n}\n\n@keyframes shadow {\n\tfrom {\n\t\tcolor: shade($gold, 50%);\n\t}\n\t25% { \n\t\tcolor: $bright;\n\t}\n\t50%, 100% {\n\t\tcolor: tint($gold, 100%);\n\t}\n}\n```\n\n效果如下：\n\n

\n See the Pen \n CSS 3D TEXT by Chokcoco (@Chokcoco)\n on CodePen.\n

\n" }, { "path": "3d/parallax-3d-1.md", "content": "## 借助 translate3d\\perspective 实现 3D 视差效果\r\n\r\n借助 translate3d\\perspective 实现 3D 视差效果。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。\r\n\r\n### 关键点\r\n\r\n+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，\r\n\r\n+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样\r\n\r\n+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。\r\n\r\n详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n

Just hover around

\r\n

translateZ 3D

\r\n

3D视差

\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n\r\nbody{\r\n background: #edf2f4;\r\n perspective: 1000px;\r\n transform-style: preserve-3d;\r\n display: flex;\r\n height: 100vh;\r\n font-family: \"Playfair Display\",georgia,serif;\r\n}\r\n.card{\r\n pointer-events: none;\r\n transform: translateZ(0);\r\n padding: 30px;\r\n background: white;\r\n border-radius: 5px;\r\n width: 400px;\r\n height: 200px;\r\n margin: auto;\r\n transform-style: preserve-3d;\r\n backface-visibility: hidden;\r\n display: flex;\r\n box-shadow: 0 0 5px rgba(0,0,0,.1);\r\n position: relative;\r\n animation: move 10s infinite alternate;\r\n \r\n &:after{\r\n content:\" \";\r\n position: absolute;\r\n width: 100%;\r\n height: 10px;\r\n border-radius: 50%;\r\n left:0;\r\n bottom:-50px;\r\n box-shadow: 0 30px 20px rgba(0,0,0,.3);\r\n \r\n }\r\n \r\n .card-content{\r\n margin: auto;\r\n text-align:center;\r\n transform-style: preserve-3d;\r\n line-height: 40px;\r\n }\r\n \r\n h1{\r\n transform: translateZ(100px);\r\n }\r\n p{\r\n transform: translateZ(50px);\r\n display: block;\r\n \r\n &.related{\r\n transform: translateZ(80px);\r\n font-style: italic;\r\n }\r\n }\r\n a{\r\n color:#69c6b8;\r\n pointer-events: auto;\r\n }\r\n}\r\n\r\n@keyframes move {\r\n 0% {\r\n transform: rotateY(20deg) rotateZ(10deg);\r\n }\r\n 100% {\r\n transform: rotateY(-60deg) rotateZ(-10deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n" }, { "path": "3d/parallax-3d-2.md", "content": "## 借助 translate3d\\perspective 实现 3D 视差效果2\r\n\r\n借助 translate3d\\perspective 实现 3D 视差效果2。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。\r\n\r\n### 关键点\r\n\r\n+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，\r\n\r\n+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样\r\n\r\n+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。\r\n\r\n详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-container\r\n - for(var i=0; i<10; i++)\r\n div.g-section CSS Parallax\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$length: 10;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\nbody {\r\n background: #000;\r\n font-family: \"lato\", lucida grande,lucida sans unicode,lucida,helvetica,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;\r\n}\r\n\r\n.g-container {\r\n width: 100vw;\r\n height: 100vh;\r\n overflow-x: hidden;\r\n overflow: scroll;\r\n transform-style: preserve-3d;\r\n // perspective: 1px;\r\n // mix-blend-mode: lighten;\r\n filter: blur(5px) contrast(5px);\r\n animation: perspectiveChange 10s infinite ease-in alternate;\r\n}\r\n\r\n.g-section {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n text-align: center;\r\n line-height: 100vh;\r\n padding: 30vh 0;\r\n font-size: 15vh;\r\n}\r\n\r\n@for $i from 1 through $length {\r\n .g-section:nth-child(#{$i}) {\r\n transform: translate3d(-200px, 0, -#{$i}px) scale(#{$i * 0.1 + 1 });\r\n $hue : $i * 35deg;\r\n color : hsla($hue, 100%, 60%, .8);\r\n // text-shadow: 0px 0px 1px hsla($hue, 100%, 60%, .9);\r\n z-index: #{$i};\r\n }\r\n}\r\n\r\n@keyframes perspectiveChange {\r\n 0% {\r\n perspective: 12;\r\n }\r\n 100% {\r\n perspective: 120;\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "3d/parallax-3d-translate.md", "content": "## 使用 translateZ 实现滚动视差\r\n\r\n使用 `translateZ` 实现滚动视差。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。\r\n\r\n### 关键点\r\n\r\n+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，\r\n\r\n+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样\r\n\r\n+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。\r\n\r\n详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
translateZ(-1)
\r\n
translateZ(-2)
\r\n
translateZ(-3)
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n perspective: 2px;\r\n transform-style: preserve-3d;\r\n transform-origin: center center;\r\n height: 100%;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n}\r\n\r\n.g-container {\r\n position: relative;\r\n height: 150%;\r\n \r\n & > div {\r\n font-size: 5vw; \r\n position: absolute;\r\n top: 20%;\r\n }\r\n \r\n .section-one {\r\n left: 0%;\r\n background: rgba(10, 10, 10, .2);\r\n transform: translateZ(-1px);\r\n }\r\n \r\n .section-two {\r\n left: 40%;\r\n background: rgba(30, 130, 30, .2);\r\n transform: translateZ(-2px);\r\n }\r\n \r\n .section-three {\r\n left: 90%;\r\n background: rgba(200, 100, 130, .2);\r\n transform: translateZ(-3px);\r\n }\r\n}\r\n```\r\n\r\n效果如下，滚动页面（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n" }, { "path": "README.md", "content": "![logo2.png](./images/logo2.png)\n\n这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\n\n## 在线预览\n\n[Online Pages](https://csscoco.com/inspiration/#/./init)\n\n> 偶尔证书过期，可暂时使用这个链接 -- [Github Page](https://chokcoco.github.io/CSS-Inspiration/#/)\n\n## 布局（Layout） \n\n+ [实现水平垂直居中最便捷的方法](https://csscoco.com/inspiration/#/./layout/best-way-to-center-element.md) \n+ [双飞翼布局](https://csscoco.com/inspiration/#/./layout/double-wing-layout.md) \n+ [grid 布局配合 clip-path 实现 GTA5 封面](https://csscoco.com/inspiration/#/./layout/grid-clip-path-gta5-poster.md) \n+ [flex 实现圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout-flex.md) \n+ [圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout.md) \n+ [CSS实现瀑布流布局（column-count）](https://csscoco.com/inspiration/#/./layout/masonry-layout-colum.md) \n+ [CSS 实现瀑布流布局（display: flex）](https://csscoco.com/inspiration/#/./layout/masonry-layout-flex.md) \n+ [CSS实现瀑布流布局（display: grid）](https://csscoco.com/inspiration/#/./layout/masonry-layout-grid.md) \n+ [6种实现多列等高的方法](https://csscoco.com/inspiration/#/./layout/multi-column-contour.md) \n+ [多方案实现跨行或跨列布局](https://csscoco.com/inspiration/#/./layout/multi-row-or-column.md) \n+ [多种方案实现单列等宽，其他多列自适应均匀布局](https://csscoco.com/inspiration/#/./layout/single-column-isometric.md) \n+ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-align-self.md) \n+ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-space-between.md) \n\n## 阴影(box-shadow、drop-shadow) \n\n+ [Box-shadow实现圆环进度条动画](https://csscoco.com/inspiration/#/./shadow/circle-loading.md) \n+ [使用box-shadow/渐变实现内切角](https://csscoco.com/inspiration/#/./shadow/inscribed-angle.md) \n+ [Neon Effect 3D TEXT](https://csscoco.com/inspiration/#/./shadow/neon-effect-3d-text.md) \n+ [box-shadow实现霓虹氖灯文字效果](https://csscoco.com/inspiration/#/./shadow/neon-shadow-light.md) \n+ [使用 box-shadow 实现半透明遮罩](https://csscoco.com/inspiration/#/./shadow/opacity-wrap.md) \n+ [线性渐变模拟长阴影](https://csscoco.com/inspiration/#/./shadow/projection-long-shadow.md) \n+ [单侧投影](https://csscoco.com/inspiration/#/./shadow/projection-one-sided-shadow.md) \n+ [立体投影](https://csscoco.com/inspiration/#/./shadow/projection-solid-shadow.md) \n+ [线性渐变配合阴影实现条纹立体阴影条纹字](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow-ii.md) \n+ [立体文字阴影](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow.md) \n+ [浮雕风格按钮](https://csscoco.com/inspiration/#/./shadow/relief-style-btn.md) \n+ [box-shadow实现背景动画 2](https://csscoco.com/inspiration/#/./shadow/shadow-ani-ii.md) \n+ [box-shadow实现背景动画 ](https://csscoco.com/inspiration/#/./shadow/shadow-ani.md) \n+ [单标签实现抖音LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-douyin-logo.md) \n+ [单标签实现叉子图形](https://csscoco.com/inspiration/#/./shadow/single-div-fork.md) \n+ [单标签借助 inset shadow 实现IE LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-ie-logo.md) \n\n## 伪类/伪元素 \n\n+ [伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-hover.md) \n+ [伪元素 target 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-target.md) \n+ [伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control.md) \n+ [伪元素实现边界智能判断移动](https://csscoco.com/inspiration/#/./pesudo/pesudo-boundary-judge.md) \n+ [伪元素+border实现气泡对话框](https://csscoco.com/inspiration/#/./pesudo/pesudo-bubble.md) \n+ [使用 checked 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-checked.md) \n+ [使用 target 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-target.md) \n+ [placeholder-shown 配合 focus-within 实现 input 输入交互](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md) \n+ [focus-within switch tab](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within.md) \n+ [伪元素 focus-within 纯 CSS 方式实现掘金登陆特效](https://csscoco.com/inspiration/#/./pesudo/pesudo-juejin.md) \n+ [伪元素实现打点 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-content.md) \n+ [伪元素遮罩实现线条 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-line.md) \n+ [使用:not()伪类控制特殊边框样式](https://csscoco.com/inspiration/#/./pesudo/pesudo-not-2.md) \n+ [使用:not()伪类实现弹窗背景元素模糊](https://csscoco.com/inspiration/#/./pesudo/pesudo-not.md) \n\n## 滤镜(fliter) \n\n+ [小球穿梭放大loading动画](https://csscoco.com/inspiration/#/./filter/filter-ball-loading.md) \n+ [小球穿梭效果](https://csscoco.com/inspiration/#/./filter/filter-ball-through.md) \n+ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://csscoco.com/inspiration/#/./filter/filter-blur-constrast.md) \n+ [使用 filter:blur | filter:constrast 生成火焰效果2](https://csscoco.com/inspiration/#/./filter/filter-fire-2.md) \n+ [使用 filter:blur | filter:constrast 生成火焰效果](https://csscoco.com/inspiration/#/./filter/filter-fire.md) \n+ [单标签纯CSS实现幽灵动画](https://csscoco.com/inspiration/#/./filter/filter-ghost.md) \n+ [使用 hue-rotate 实现渐变背景动画](https://csscoco.com/inspiration/#/./filter/filter-hue-rotate-color.md) \n+ [滤镜及混合模式混搭特效](https://csscoco.com/inspiration/#/./filter/filter-mix.md) \n+ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://csscoco.com/inspiration/#/./filter/filter-polygon-shadow.md) \n+ [使用 filter:blur 生成彩色阴影](https://csscoco.com/inspiration/#/./filter/filter-shadow.md) \n+ [单标签实现滴水效果](https://csscoco.com/inspiration/#/./filter/filter-single-div-water-drop.md) \n+ [利用 filter:blur 增强文字的 3D 效果](https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect.md) \n\n## 边框 \n\n+ [活用 border-radius, 实现充电动画](https://csscoco.com/inspiration/#/./border/border-chargin.md) \n+ [利用 border-image 实现动态边框](https://csscoco.com/inspiration/#/./border/border-image-animate.md) \n+ [活用 border-radius, 单标签线条动画](https://csscoco.com/inspiration/#/./border/border-line-animation.md) \n+ [使用 border-radius 的变化模拟绳子下坠](https://csscoco.com/inspiration/#/./border/border-line-drop-animation.md) \n+ [border-radius变换实现loading效果](https://csscoco.com/inspiration/#/./border/border-loading.md) \n+ [活用 outline 巧妙实现加号符号](https://csscoco.com/inspiration/#/./border/border-outline-symbol-add.md) \n+ [巧用 overflow 及实现边框线条动画](https://csscoco.com/inspiration/#/./border/border-overflow-btn.md) \n+ [border-color 变换实现文字输入效果](https://csscoco.com/inspiration/#/./border/border-typing.md) \n+ [活用 border-radius, 实现波浪百分比图](https://csscoco.com/inspiration/#/./border/border-wave-percent.md) \n+ [活用 border-radius, 实现波浪动画](https://csscoco.com/inspiration/#/./border/border-wave.md) \n\n## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) \n\n+ [利用渐变及 CSS Property 实现 TV 噪音动画](https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise.md) \n+ [使用 background-attachment 实现毛玻璃效果](https://csscoco.com/inspiration/#/./background/bg-attachment-frosted-glass.md) \n+ [使用 background-attachment 实现滚动阴影](https://csscoco.com/inspiration/#/./background/bg-attachment-scroll-shadow.md) \n+ [background-clip 实现流光文字效果](https://csscoco.com/inspiration/#/./background/bg-clip-text-shine.md) \n+ [角向渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-effect.md) \n+ [角向渐变实现光影 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-light-effect.md) \n+ [角向渐变实现纯 CSS 圆环进度图](https://csscoco.com/inspiration/#/./background/bg-conic-circle-loading.md) \n+ [角向渐变配合混合模式实现炫酷光影效果](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-animation.md) \n+ [一行代码重复角向渐变代码实现酷炫图案](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-repeating-pattern.md) \n+ [线性渐变实现箭头符号](https://csscoco.com/inspiration/#/./background/bg-linear-arrow.md) \n+ [线性渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-linear-border-effect.md) \n+ [线性渐变实现类迷宫图形](https://csscoco.com/inspiration/#/./background/bg-linear-gradient-maze.md) \n+ [线性渐变实现内切角](https://csscoco.com/inspiration/#/./background/bg-linear-inscribed.md) \n+ [线性渐变模拟进度条运动](https://csscoco.com/inspiration/#/./background/bg-linear-progress-bar.md) \n+ [线性渐变实现滚动进度条](https://csscoco.com/inspiration/#/./background/bg-linear-scroll-indicator.md) \n+ [线性渐变背景实现条纹字](https://csscoco.com/inspiration/#/./background/bg-linear-stripe.md) \n+ [线性渐变实现下划线](https://csscoco.com/inspiration/#/./background/bg-linear-underline.md) \n+ [mask-image 实现图片变幻](https://csscoco.com/inspiration/#/./background/bg-mask-image.md) \n+ [mask-image 实现文字的渐现](https://csscoco.com/inspiration/#/./background/bg-mask-text-show.md) \n+ [mask-image 实现图片转场变换](https://csscoco.com/inspiration/#/./background/bg-mask-transition.md) \n+ [使用多重背景单标签实现气泡按钮点击效果](https://csscoco.com/inspiration/#/./background/bg-radial-btn-click-bubble.md) \n+ [径向渐变实现优惠券波浪造型](https://csscoco.com/inspiration/#/./background/bg-radial-coupon.md) \n+ [径向渐变实现舞台灯光聚焦效果](https://csscoco.com/inspiration/#/./background/bg-radial-focus.md) \n+ [渐变实现波浪边框](https://csscoco.com/inspiration/#/./background/bg-wave-border.md) \n+ [渐变实现波浪下划线](https://csscoco.com/inspiration/#/./background/bg-wave-underline.md) \n+ [渐变实现波浪效果/波浪进度框](https://csscoco.com/inspiration/#/./background/bg-wave.md) \n+ [利用 CSS @property 探寻渐变的极限效果](https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md) \n+ [多重径向渐变实现美妙的艺术背景](https://csscoco.com/inspiration/#/./background/repeating-radial-background-artistic-bg.md) \n\n## 混合模式（mix-blend-mode/background-blend-mode) \n\n+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://csscoco.com/inspiration/#/./blendmode/blend-color-set.md) \n+ [使用 mix-blend-mode 实现抖音 LOGO](https://csscoco.com/inspiration/#/./blendmode/blend-douyin-logo.md) \n+ [mix-blend-mode 实现 loading 效果](https://csscoco.com/inspiration/#/./blendmode/blend-loading.md) \n+ [图片的类抖音 LOGO 晕眩效果](https://csscoco.com/inspiration/#/./blendmode/blend-mix-img.md) \n+ [mix-blend-mode MIX](https://csscoco.com/inspiration/#/./blendmode/blend-mix.md) \n+ [mix-blend-mode 实现颜色叠加旋转动画](https://csscoco.com/inspiration/#/./blendmode/blend-rotate.md) \n+ [类抖音 LOGO 文字故障效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-glitch.md) \n+ [使用 mix-blend-mode 实现光影文字效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-shine.md) \n+ [CSS WAVE MOVE(惊艳的水波效果)](https://csscoco.com/inspiration/#/./blendmode/blend-water-wave.md) \n+ [mix-blend-mode 叠加多重渐变背景](https://csscoco.com/inspiration/#/./blendmode/mix-multi-graidient-bg.md) \n+ [使用混合模式叠加实现文字波浪效果](https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect.md) \n\n## 3D \n\n+ [3D 球动画](https://csscoco.com/inspiration/#/./3d/3d-ball.md) \n+ [3D 数字计数动画](https://csscoco.com/inspiration/#/./3d/3d-count-number.md) \n+ [3D 宇宙时空穿梭效果](https://csscoco.com/inspiration/#/./3d/3d-css-galaxy-shuttle.md) \n+ [3D 立方体进度条](https://csscoco.com/inspiration/#/./3d/3d-cuber-progress-bar.md) \n+ [3D 立方体滚动 404 效果](https://csscoco.com/inspiration/#/./3d/3d-cuber-roll-404.md) \n+ [3D 光影变换文字效果](https://csscoco.com/inspiration/#/./3d/3d-glowing-rotate-text.md) \n+ [3D 无限延伸视角动画](https://csscoco.com/inspiration/#/./3d/3d-infinite-maze.md) \n+ [3D 线条动画](https://csscoco.com/inspiration/#/./3d/3d-line.md) \n+ [3D 迷宫线条特效](https://csscoco.com/inspiration/#/./3d/3d-maze.md) \n+ [3D 绳动画](https://csscoco.com/inspiration/#/./3d/3d-rope-swing.md) \n+ [3D 螺旋数字动画](https://csscoco.com/inspiration/#/./3d/3d-spiral-number.md) \n+ [3D 文字出场动画](https://csscoco.com/inspiration/#/./3d/3d-text-debut.md) \n+ [借助 translate3d\\perspective 实现 3D 视差效果](https://csscoco.com/inspiration/#/./3d/parallax-3d-1.md) \n+ [借助 translate3d\\perspective 实现 3D 视差效果2](https://csscoco.com/inspiration/#/./3d/parallax-3d-2.md) \n+ [使用 translateZ 实现滚动视差](https://csscoco.com/inspiration/#/./3d/parallax-3d-translate.md) \n\n## 动画/过渡(transition/animation) \n\n+ [借助transition-delay实现按钮border动画效果](https://csscoco.com/inspiration/#/./animation/animation-button-border.md) \n+ [CSS实现曲线运动](https://csscoco.com/inspiration/#/./animation/animation-curve.md) \n+ [利用 animation-delay 实现文字渐现效果](https://csscoco.com/inspiration/#/./animation/animation-delay-control-text-effect.md) \n+ [利用动画延迟实现波浪动画](https://csscoco.com/inspiration/#/./animation/animation-delay-wavy.md) \n+ [scale 配合 transfrom-origin 精准控制动画方向](https://csscoco.com/inspiration/#/./animation/animation-direction.md) \n+ [CSS 巧妙控制动画行进](https://csscoco.com/inspiration/#/./animation/animation-play-state.md) \n+ [正负旋转相消动画](https://csscoco.com/inspiration/#/./animation/animation-rotate.md) \n\n## clip-path \n\n+ [使用 clip-path 和 border-image 实现圆角渐变边框](https://csscoco.com/inspiration/#/./clippath/clippath-border-image.md) \n+ [clip-path 实现边框线条动画 2](https://csscoco.com/inspiration/#/./clippath/clippath-border-line-radius.md) \n+ [clip-path 实现边框线条动画](https://csscoco.com/inspiration/#/./clippath/clippath-border-line.md) \n+ [clip-path 实现图片的故障艺术风格动画](https://csscoco.com/inspiration/#/./clippath/clippath-img-glitch.md) \n+ [clip-path 实现文字断裂效果](https://csscoco.com/inspiration/#/./clippath/clippath-word-crack.md) \n\n## 文本类 \n\n+ [使用text-decoration实现波浪效果](https://csscoco.com/inspiration/#/./text/text-underline-wave.md) \n\n## 综合 \n\n+ [retina屏下的1px线的实现](https://csscoco.com/inspiration/#/./others/1px-line.md) \n+ [fieldset 与 legend 实现边框嵌套文字](https://csscoco.com/inspiration/#/./others/border-inset-text.md) \n+ [利用 resize 实现图片切换预览功能](https://csscoco.com/inspiration/#/./others/css-resize-switch-picture.md) \n+ [暗黑字符雨动画](https://csscoco.com/inspiration/#/./others/digital-char-rain-animation.md) \n+ [chrome Tab 分栏实现](https://csscoco.com/inspiration/#/./others/others-chrome-tab.md) \n+ [等角螺线](https://csscoco.com/inspiration/#/./others/others-equiangular-spiral.md) \n+ [华为充电动画](https://csscoco.com/inspiration/#/./others/others-huawei-charging.md) \n+ [夜晚居室图](https://csscoco.com/inspiration/#/./others/others-night.md) \n+ [纯CSS实现360°饼图](https://csscoco.com/inspiration/#/./others/others-pie.md) \n+ [PURE CSS 实现鼠标跟随2](https://csscoco.com/inspiration/#/./others/pointer-follow-2.md) \n+ [PURE CSS 实现鼠标跟随3](https://csscoco.com/inspiration/#/./others/pointer-follow-3.md) \n+ [PURE CSS 实现鼠标跟随](https://csscoco.com/inspiration/#/./others/pointer-follow.md) \n+ [利用 box-reflect 实现艺术图形](https://csscoco.com/inspiration/#/./others/reflect-artist.md) \n+ [利用 box-reflect 实现光影按钮](https://csscoco.com/inspiration/#/./others/reflect-btn-effect.md) \n+ [利用 box-reflect 实现 3D 照片墙倒影效果](https://csscoco.com/inspiration/#/./others/reflect-text-effect.md) \n+ [CSS文字分裂移动特效](https://csscoco.com/inspiration/#/./others/word-break-move.md) \n+ [CSS文字分裂特效](https://csscoco.com/inspiration/#/./others/word-break.md) \n+ [CSS文字故障效果](https://csscoco.com/inspiration/#/./others/word-glitch.md) \n\n## CSS-Doodle \n\n+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-clippath.md) \n+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern-2.md) \n+ [CSS-Doodle 利用不同图形线条实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern.md) \n+ [CSS-Doodle background + mask 实现万花筒效果](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-composite.md) \n+ [CSS-Doodle background + mask 实现条纹艺术背景](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-mix.md) \n+ [CSS-Doodle fish 🐟 & seaweed 🍀](https://csscoco.com/inspiration/#/./cssdoodle/fish-seaweed.md) \n+ [CSS-Doodle spotlight🎆](https://csscoco.com/inspiration/#/./cssdoodle/spotlight.md) \n+ [夏日城市夕阳图🌇](https://csscoco.com/inspiration/#/./cssdoodle/sunset.md) \n\n## svg \n\n+ [支付宝AR扫福动画](https://csscoco.com/inspiration/#/./svg/alipay-ar-scan.md) \n+ [SVG绘制弧形文字](https://csscoco.com/inspiration/#/./svg/svg-arc-word.md) \n+ [SVG 按钮 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-btn-hover.md) \n+ [SVG 配合 drop-shadow 实现线条光影效果](https://csscoco.com/inspiration/#/./svg/svg-dropshadow-line-neon-effect.md) \n+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](https://csscoco.com/inspiration/#/./svg/svg-feTurbulence-harmony-logo.md) \n+ [SVG feTurbulence 滤镜实现故障按钮点击效果](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-btn-glitch.md) \n+ [SVG feTurbulence 滤镜实现云彩效果 ](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-clouds.md) \n+ [SVG 文字 hover 线条动画 2](https://csscoco.com/inspiration/#/./svg/svg-line-text-2.md) \n+ [SVG 文字 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-line-text.md) \n" }, { "path": "_sidebar.md", "content": "# CSS-Inspiration \n\n + [引言](./init.md) \n\n\n## 布局（Layout） \n\n+ [实现水平垂直居中最便捷的方法](./layout/best-way-to-center-element.md) \n+ [双飞翼布局](./layout/double-wing-layout.md) \n+ [grid 布局配合 clip-path 实现 GTA5 封面](./layout/grid-clip-path-gta5-poster.md) \n+ [flex 实现圣杯布局](./layout/holy-grail-layout-flex.md) \n+ [圣杯布局](./layout/holy-grail-layout.md) \n+ [CSS实现瀑布流布局（column-count）](./layout/masonry-layout-colum.md) \n+ [CSS 实现瀑布流布局（display: flex）](./layout/masonry-layout-flex.md) \n+ [CSS实现瀑布流布局（display: grid）](./layout/masonry-layout-grid.md) \n+ [6种实现多列等高的方法](./layout/multi-column-contour.md) \n+ [多方案实现跨行或跨列布局](./layout/multi-row-or-column.md) \n+ [多种方案实现单列等宽，其他多列自适应均匀布局](./layout/single-column-isometric.md) \n+ [使用 margin auto 实现 flex 下的 align-self: flex-end](./layout/use-margin-auto-to-simulate-align-self.md) \n+ [使用 margin auto 实现 flex 下的 justify-content: space-between](./layout/use-margin-auto-to-simulate-space-between.md) \n\n## 阴影(box-shadow、drop-shadow) \n\n+ [Box-shadow实现圆环进度条动画](./shadow/circle-loading.md) \n+ [使用box-shadow/渐变实现内切角](./shadow/inscribed-angle.md) \n+ [Neon Effect 3D TEXT](./shadow/neon-effect-3d-text.md) \n+ [box-shadow实现霓虹氖灯文字效果](./shadow/neon-shadow-light.md) \n+ [使用 box-shadow 实现半透明遮罩](./shadow/opacity-wrap.md) \n+ [线性渐变模拟长阴影](./shadow/projection-long-shadow.md) \n+ [单侧投影](./shadow/projection-one-sided-shadow.md) \n+ [立体投影](./shadow/projection-solid-shadow.md) \n+ [线性渐变配合阴影实现条纹立体阴影条纹字](./shadow/projection-word-solid-shadow-ii.md) \n+ [立体文字阴影](./shadow/projection-word-solid-shadow.md) \n+ [浮雕风格按钮](./shadow/relief-style-btn.md) \n+ [box-shadow实现背景动画 2](./shadow/shadow-ani-ii.md) \n+ [box-shadow实现背景动画 ](./shadow/shadow-ani.md) \n+ [单标签实现抖音LOGO](./shadow/single-div-douyin-logo.md) \n+ [单标签实现叉子图形](./shadow/single-div-fork.md) \n+ [单标签借助 inset shadow 实现IE LOGO](./shadow/single-div-ie-logo.md) \n\n## 伪类/伪元素 \n\n+ [伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-hover.md) \n+ [伪元素 target 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-target.md) \n+ [伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control.md) \n+ [伪元素实现边界智能判断移动](./pesudo/pesudo-boundary-judge.md) \n+ [伪元素+border实现气泡对话框](./pesudo/pesudo-bubble.md) \n+ [使用 checked 伪类实现纯 CSS Tab 切换](./pesudo/pesudo-focus-checked.md) \n+ [使用 target 伪类实现纯 CSS Tab 切换](./pesudo/pesudo-focus-target.md) \n+ [placeholder-shown 配合 focus-within 实现 input 输入交互](./pesudo/pesudo-focus-within-placeholder-shown.md) \n+ [focus-within switch tab](./pesudo/pesudo-focus-within.md) \n+ [伪元素 focus-within 纯 CSS 方式实现掘金登陆特效](./pesudo/pesudo-juejin.md) \n+ [伪元素实现打点 loading 效果](./pesudo/pesudo-loading-content.md) \n+ [伪元素遮罩实现线条 loading 效果](./pesudo/pesudo-loading-line.md) \n+ [使用:not()伪类控制特殊边框样式](./pesudo/pesudo-not-2.md) \n+ [使用:not()伪类实现弹窗背景元素模糊](./pesudo/pesudo-not.md) \n\n## 滤镜(fliter) \n\n+ [小球穿梭放大loading动画](./filter/filter-ball-loading.md) \n+ [小球穿梭效果](./filter/filter-ball-through.md) \n+ [使用 filter:blur | filter:constrast 生成特殊融合效果](./filter/filter-blur-constrast.md) \n+ [使用 filter:blur | filter:constrast 生成火焰效果2](./filter/filter-fire-2.md) \n+ [使用 filter:blur | filter:constrast 生成火焰效果](./filter/filter-fire.md) \n+ [单标签纯CSS实现幽灵动画](./filter/filter-ghost.md) \n+ [使用 hue-rotate 实现渐变背景动画](./filter/filter-hue-rotate-color.md) \n+ [滤镜及混合模式混搭特效](./filter/filter-mix.md) \n+ [使用 drop-shadow 配合 clip-path 生成规则阴影](./filter/filter-polygon-shadow.md) \n+ [使用 filter:blur 生成彩色阴影](./filter/filter-shadow.md) \n+ [单标签实现滴水效果](./filter/filter-single-div-water-drop.md) \n+ [利用 filter:blur 增强文字的 3D 效果](./filter/use-filter-blur-enhance-text-3d-effect.md) \n\n## 边框 \n\n+ [活用 border-radius, 实现充电动画](./border/border-chargin.md) \n+ [利用 border-image 实现动态边框](./border/border-image-animate.md) \n+ [活用 border-radius, 单标签线条动画](./border/border-line-animation.md) \n+ [使用 border-radius 的变化模拟绳子下坠](./border/border-line-drop-animation.md) \n+ [border-radius变换实现loading效果](./border/border-loading.md) \n+ [活用 outline 巧妙实现加号符号](./border/border-outline-symbol-add.md) \n+ [巧用 overflow 及实现边框线条动画](./border/border-overflow-btn.md) \n+ [border-color 变换实现文字输入效果](./border/border-typing.md) \n+ [活用 border-radius, 实现波浪百分比图](./border/border-wave-percent.md) \n+ [活用 border-radius, 实现波浪动画](./border/border-wave.md) \n\n## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) \n\n+ [利用渐变及 CSS Property 实现 TV 噪音动画](./background/background-css-property-tv-noise.md) \n+ [使用 background-attachment 实现毛玻璃效果](./background/bg-attachment-frosted-glass.md) \n+ [使用 background-attachment 实现滚动阴影](./background/bg-attachment-scroll-shadow.md) \n+ [background-clip 实现流光文字效果](./background/bg-clip-text-shine.md) \n+ [角向渐变线条 border 效果](./background/bg-conic-border-effect.md) \n+ [角向渐变实现光影 border 效果](./background/bg-conic-border-light-effect.md) \n+ [角向渐变实现纯 CSS 圆环进度图](./background/bg-conic-circle-loading.md) \n+ [角向渐变配合混合模式实现炫酷光影效果](./background/bg-conic-gradient-animation.md) \n+ [一行代码重复角向渐变代码实现酷炫图案](./background/bg-conic-gradient-repeating-pattern.md) \n+ [线性渐变实现箭头符号](./background/bg-linear-arrow.md) \n+ [线性渐变线条 border 效果](./background/bg-linear-border-effect.md) \n+ [线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md) \n+ [线性渐变实现内切角](./background/bg-linear-inscribed.md) \n+ [线性渐变模拟进度条运动](./background/bg-linear-progress-bar.md) \n+ [线性渐变实现滚动进度条](./background/bg-linear-scroll-indicator.md) \n+ [线性渐变背景实现条纹字](./background/bg-linear-stripe.md) \n+ [线性渐变实现下划线](./background/bg-linear-underline.md) \n+ [mask-image 实现图片变幻](./background/bg-mask-image.md) \n+ [mask-image 实现文字的渐现](./background/bg-mask-text-show.md) \n+ [mask-image 实现图片转场变换](./background/bg-mask-transition.md) \n+ [使用多重背景单标签实现气泡按钮点击效果](./background/bg-radial-btn-click-bubble.md) \n+ [径向渐变实现优惠券波浪造型](./background/bg-radial-coupon.md) \n+ [径向渐变实现舞台灯光聚焦效果](./background/bg-radial-focus.md) \n+ [渐变实现波浪边框](./background/bg-wave-border.md) \n+ [渐变实现波浪下划线](./background/bg-wave-underline.md) \n+ [渐变实现波浪效果/波浪进度框](./background/bg-wave.md) \n+ [利用 CSS @property 探寻渐变的极限效果](./background/css-property-variable-bg-change-animation.md) \n+ [多重径向渐变实现美妙的艺术背景](./background/repeating-radial-background-artistic-bg.md) \n\n## 混合模式（mix-blend-mode/background-blend-mode) \n\n+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](./blendmode/blend-color-set.md) \n+ [使用 mix-blend-mode 实现抖音 LOGO](./blendmode/blend-douyin-logo.md) \n+ [mix-blend-mode 实现 loading 效果](./blendmode/blend-loading.md) \n+ [图片的类抖音 LOGO 晕眩效果](./blendmode/blend-mix-img.md) \n+ [mix-blend-mode MIX](./blendmode/blend-mix.md) \n+ [mix-blend-mode 实现颜色叠加旋转动画](./blendmode/blend-rotate.md) \n+ [类抖音 LOGO 文字故障效果](./blendmode/blend-text-glitch.md) \n+ [使用 mix-blend-mode 实现光影文字效果](./blendmode/blend-text-shine.md) \n+ [CSS WAVE MOVE(惊艳的水波效果)](./blendmode/blend-water-wave.md) \n+ [mix-blend-mode 叠加多重渐变背景](./blendmode/mix-multi-graidient-bg.md) \n+ [使用混合模式叠加实现文字波浪效果](./blendmode/mixblend-text-wave-effect.md) \n\n## 3D \n\n+ [3D 球动画](./3d/3d-ball.md) \n+ [3D 数字计数动画](./3d/3d-count-number.md) \n+ [3D 宇宙时空穿梭效果](./3d/3d-css-galaxy-shuttle.md) \n+ [3D 立方体进度条](./3d/3d-cuber-progress-bar.md) \n+ [3D 立方体滚动 404 效果](./3d/3d-cuber-roll-404.md) \n+ [3D 光影变换文字效果](./3d/3d-glowing-rotate-text.md) \n+ [3D 无限延伸视角动画](./3d/3d-infinite-maze.md) \n+ [3D 线条动画](./3d/3d-line.md) \n+ [3D 迷宫线条特效](./3d/3d-maze.md) \n+ [3D 绳动画](./3d/3d-rope-swing.md) \n+ [3D 螺旋数字动画](./3d/3d-spiral-number.md) \n+ [3D 文字出场动画](./3d/3d-text-debut.md) \n+ [借助 translate3d\\perspective 实现 3D 视差效果](./3d/parallax-3d-1.md) \n+ [借助 translate3d\\perspective 实现 3D 视差效果2](./3d/parallax-3d-2.md) \n+ [使用 translateZ 实现滚动视差](./3d/parallax-3d-translate.md) \n\n## 动画/过渡(transition/animation) \n\n+ [借助transition-delay实现按钮border动画效果](./animation/animation-button-border.md) \n+ [CSS实现曲线运动](./animation/animation-curve.md) \n+ [利用 animation-delay 实现文字渐现效果](./animation/animation-delay-control-text-effect.md) \n+ [利用动画延迟实现波浪动画](./animation/animation-delay-wavy.md) \n+ [scale 配合 transfrom-origin 精准控制动画方向](./animation/animation-direction.md) \n+ [CSS 巧妙控制动画行进](./animation/animation-play-state.md) \n+ [正负旋转相消动画](./animation/animation-rotate.md) \n\n## clip-path \n\n+ [使用 clip-path 和 border-image 实现圆角渐变边框](./clippath/clippath-border-image.md) \n+ [clip-path 实现边框线条动画 2](./clippath/clippath-border-line-radius.md) \n+ [clip-path 实现边框线条动画](./clippath/clippath-border-line.md) \n+ [clip-path 实现图片的故障艺术风格动画](./clippath/clippath-img-glitch.md) \n+ [clip-path 实现文字断裂效果](./clippath/clippath-word-crack.md) \n\n## 文本类 \n\n+ [使用text-decoration实现波浪效果](./text/text-underline-wave.md) \n\n## 综合 \n\n+ [retina屏下的1px线的实现](./others/1px-line.md) \n+ [fieldset 与 legend 实现边框嵌套文字](./others/border-inset-text.md) \n+ [利用 resize 实现图片切换预览功能](./others/css-resize-switch-picture.md) \n+ [暗黑字符雨动画](./others/digital-char-rain-animation.md) \n+ [chrome Tab 分栏实现](./others/others-chrome-tab.md) \n+ [等角螺线](./others/others-equiangular-spiral.md) \n+ [华为充电动画](./others/others-huawei-charging.md) \n+ [夜晚居室图](./others/others-night.md) \n+ [纯CSS实现360°饼图](./others/others-pie.md) \n+ [PURE CSS 实现鼠标跟随2](./others/pointer-follow-2.md) \n+ [PURE CSS 实现鼠标跟随3](./others/pointer-follow-3.md) \n+ [PURE CSS 实现鼠标跟随](./others/pointer-follow.md) \n+ [利用 box-reflect 实现艺术图形](./others/reflect-artist.md) \n+ [利用 box-reflect 实现光影按钮](./others/reflect-btn-effect.md) \n+ [利用 box-reflect 实现 3D 照片墙倒影效果](./others/reflect-text-effect.md) \n+ [CSS文字分裂移动特效](./others/word-break-move.md) \n+ [CSS文字分裂特效](./others/word-break.md) \n+ [CSS文字故障效果](./others/word-glitch.md) \n\n## CSS-Doodle \n\n+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](./cssdoodle/bg-artist-clippath.md) \n+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](./cssdoodle/bg-artist-pattern-2.md) \n+ [CSS-Doodle 利用不同图形线条实现图案艺术](./cssdoodle/bg-artist-pattern.md) \n+ [CSS-Doodle background + mask 实现万花筒效果](./cssdoodle/bg-mask-composite.md) \n+ [CSS-Doodle background + mask 实现条纹艺术背景](./cssdoodle/bg-mask-mix.md) \n+ [CSS-Doodle fish 🐟 & seaweed 🍀](./cssdoodle/fish-seaweed.md) \n+ [CSS-Doodle spotlight🎆](./cssdoodle/spotlight.md) \n+ [夏日城市夕阳图🌇](./cssdoodle/sunset.md) \n\n## svg \n\n+ [支付宝AR扫福动画](./svg/alipay-ar-scan.md) \n+ [SVG绘制弧形文字](./svg/svg-arc-word.md) \n+ [SVG 按钮 hover 线条动画](./svg/svg-btn-hover.md) \n+ [SVG 配合 drop-shadow 实现线条光影效果](./svg/svg-dropshadow-line-neon-effect.md) \n+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](./svg/svg-feTurbulence-harmony-logo.md) \n+ [SVG feTurbulence 滤镜实现故障按钮点击效果](./svg/svg-feturbulence-btn-glitch.md) \n+ [SVG feTurbulence 滤镜实现云彩效果 ](./svg/svg-feturbulence-clouds.md) \n+ [SVG 文字 hover 线条动画 2](./svg/svg-line-text-2.md) \n+ [SVG 文字 hover 线条动画](./svg/svg-line-text.md) \n" }, { "path": "animation/animation-button-border.md", "content": "## 借助transition-delay实现按钮border动画效果\r\n\r\n借助 `transition-delay` 实现按钮 border hover 时的动画效果。\r\n\r\n\r\n### 关键点\r\n\r\n+ 给容器每一边的 border 合理设置 `transition-delay`，可以延缓动画的发生，再连贯的拼凑在一起实现一些效果\r\n\r\nHTML：\r\n\r\n```html\r\n
Both
\r\n
Rectangle
\r\n
Circle
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n background: #000;\r\n}\r\n\r\ndiv {\r\n position: relative;\r\n width: 200px;\r\n height: 64px;\r\n line-height: 64px;\r\n box-shadow: inset 0 0 0 3px #fff;\r\n margin: 50px auto;\r\n text-align: center;\r\n color: #fff;\r\n font-size: 32px;\r\n cursor: pointer;\r\n transition: color 1s;\r\n}\r\n\r\ndiv::before,\r\ndiv::after {\r\n content: \"\";\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n top: 0;\r\n left: 0;\r\n box-sizing: border-box;\r\n // transition: width .5s, height .5s;\r\n // transition-delay: .5s, 0s;\r\n border: 3px solid transparent;\r\n}\r\n\r\n.both:hover {\r\n color: #00e2ff;\r\n \r\n &::before {\r\n transition: width .5s, height .5s, border-bottom-color 0s;\r\n transition-delay: .5s, 0s, .5s;\r\n width: 200px;\r\n height: 64px;\r\n border-left: 3px solid #00e2ff;\r\n border-bottom: 3px solid #00e2ff;\r\n }\r\n \r\n &::after {\r\n transition: width .5s, height .5s, border-right-color .5s;\r\n transition-delay: 0s, .5s, .5s;\r\n width: 200px;\r\n height: 64px;\r\n border-top: 3px solid #00e2ff;\r\n border-right: 3px solid #00e2ff;\r\n }\r\n}\r\n\r\n.rectangle {\r\n &::after {\r\n top: unset;\r\n left: unset;\r\n right: 0;\r\n bottom: 0;\r\n }\r\n \r\n &:hover {\r\n color: #00e2ff;\r\n \r\n &::before {\r\n transition: width .25s, height .25s, border-bottom-color 0s;\r\n transition-delay: .25s, 0s, .25s;\r\n width: 200px;\r\n height: 64px;\r\n border-left: 3px solid #00e2ff;\r\n border-bottom: 3px solid #00e2ff;\r\n }\r\n\r\n &::after {\r\n transition: width .25s, height .25s, border-top-color .25s;\r\n transition-delay: 0.75s, 0.5s, 0.75s;\r\n width: 200px;\r\n height: 64px;\r\n border-top: 3px solid #00e2ff;\r\n border-right: 3px solid #00e2ff;\r\n }\r\n } \r\n}\r\n\r\n.circle {\r\n width: 120px;\r\n height: 120px;\r\n line-height: 120px;\r\n border-radius: 50%;\r\n \r\n &::before,\r\n &::after{\r\n border-radius: 50%; \r\n }\r\n \r\n &:hover {\r\n color: #00e2ff;\r\n \r\n &::before {\r\n width: 120px;\r\n height: 120px;\r\n border-color: #00e2ff;\r\n transition: border-top-color .25s linear,\r\n border-right-color .25s linear,\r\n border-bottom-color .25s linear,\r\n border-left-color .25s linear;\r\n transition-delay: 0s, .25s, .5s, .75s;\r\n }\r\n \r\n &::after {\r\n width: 120px;\r\n height: 120px;\r\n border-top: 3px solid #00e2ff;\r\n transform: rotate(270deg);\r\n transition: transform .75s linear;\r\n transition-delay: 0s;\r\n }\r\n }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n" }, { "path": "animation/animation-curve.md", "content": "## CSS实现曲线运动\r\n\r\nCSS实现曲线运动。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n position: relative;\r\n width: 10vmin;\r\n height: 70vmin;\r\n margin: 20vmin auto;\r\n // background: rgba(0, 0, 0, .1);\r\n transform-origin: center 0;\r\n animation: rotate 1.5s cubic-bezier(.5, 0, .5, 1) infinite alternate, opacity 3s linear infinite alternate;\r\n}\r\n\r\n.g-ball {\r\n position: absolute;\r\n width: 10vmin;\r\n height: 10vmin;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, #fff, #000);\r\n top: 60vmin;\r\n left: 0;\r\n animation: move 1.5s cubic-bezier(.5, 0, .5, 1) infinite alternate;\r\n}\r\n\r\n@keyframes opacity {\r\n from, 50% {\r\n border: 1px dashed rgba(255, 255, 255, 0);\r\n }\r\n to {\r\n border: 1px dashed rgba(0, 0, 0, .2);\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 100% {\r\n transform: rotate(90deg) translate(-3vmin, 0);\r\n }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n" }, { "path": "animation/animation-delay-control-text-effect.md", "content": "## 利用 animation-delay 实现文字渐现效果\n\n利用 animation-delay 实现文字渐现效果\n\n### 关键点\n\n1. hover 状态下和非 hover 状态下的 `transition-duration` 是不一样的，是因为取消 hover 过程中，动画消失过程的时间通常是要求更短的；\n2. 借助了 SASS 的循环 `@for $i from 1 to 21 {}` 递增给每个 `span` 和它的伪元素添加了递增的 `transition-delay`；\n\n### 线性渐变\nHTML：\n```HTML\n
Button
\n
\n

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam.

\n```\n\nCSS：\n```CSS\nhtml,\nbody {\n width: 100%;\n height: 100%;\n display: flex;\n overflow: hidden;\n}\n\n.button {\n // position: fixed;\n top: 0;\n left: 0;\n width: 120px;\n height: 64px;\n line-height: 64px;\n text-align: center;\n border: 1px solid #eee;\n cursor: pointer;\n transition: .3s all;\n z-index: 1;\n\n &:hover {\n background: #eee;\n }\n}\n\n.button:hover ~ .g-wrap {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: .3s background linear;\n background: rgba(0, 0, 0, .5);\n // z-index: -1;\n}\n\np {\n position: relative;\n margin: 50px auto;\n width: 500px;\n height: 250px;\n font-size: 22px;\n line-height: 1.5;\n overflow: hidden;\n z-index: 2;\n}\n\np span {\n position: relative;\n display: inline-block;\n opacity: 0;\n transform: translateY(15px) translateZ(0);\n transition-property: transform, opacity;\n transition-duration: .3s, .2s;\n transition-timing-function: cubic-bezier(.23,1,.32,1), linear;\n\n}\n\n.button:hover ~ p span {\n opacity: 1;\n color: #ddd;\n transform: translateY(0) translateZ(0);\n transition-property: transform, opacity;\n transition-duration: 1s, .2s;\n transition-timing-function: cubic-bezier(.23,1,.32,1), linear;\n\n}\n\np span:after,\np span:before {\n position: absolute;\n content: attr(data-text);\n top: 0;\n left: 0;\n z-index: 1;\n transform: translateZ(0);\n will-change: opacity;\n}\n\n// p span:before {\n// color: #fff;\n// transition: opacity .6s .2s;\n// }\n\n// .button:hover ~ p span:before {\n// opacity: 0;\n// transition: opacity .6s .3s;\n// }\n\np span:after {\n color: #e62541;\n transition-property: opacity;\n transition-duration: .1s;\n transition-timing-function: cubic-bezier(.23,1,.32,1);\n}\n\n.button:hover ~ p span:after {\n opacity: 0;\n transition-property: opacity;\n transition-duration: .4s;\n transition-timing-function: cubic-bezier(.23,1,.32,1);\n}\n\n@for $i from 1 to 21 {\n p span:nth-child(#{$i}) {\n transition-delay: #{$i * 0.04}s;\n \n &::after {\n transition-delay: #{$i * 0.04 + 0.2}s;\n }\n }\n}\n```\n\n效果如下（Hover 按钮触发效果）：\n\n" }, { "path": "animation/animation-delay-wavy.md", "content": "## 利用动画延迟实现波浪动画\n\n利用动画延迟实现的波浪效果。\n\n### 关键点\n\n给每个子元素设定一个高度变化的动画，同时按顺序给每个元素设定一个不同时间的负延迟即可，就可以得到一个简单的波浪效果。\n\n关于本效果的详情，你可以查看这篇文章：[一种巧妙的使用 CSS 制作波浪效果的思路](https://github.com/chokcoco/iCSS/issues/112)\n\nHTML（使用了 Pug 模板引擎）：\n\n```Pug\ndiv.g-container\n -for(var i=0; i<24; i++)\n div.g-item\n```\n\nSCSS：\n```scss\nhtml,\nbody {\n width: 100%;\n height: 100%;\n display: flex;\n background: #fff;\n}\n\n$count: 24;\n$speed: 1s;\n\n:root {\n --angle: 15deg;\n}\n\n.g-container {\n position: relative;\n width: 200px;\n height: 200px;\n display: flex;\n align-items: flex-end;\n border-radius: 50%;\n border: 2px solid #000;\n overflow: hidden;\n flex-shrink: 0;\n margin: auto;\n}\n\n.rect {\n border-radius: 0;\n}\n\n.g-item {\n --f: #{$speed / -24};\n --h: 50px;\n flex-grow: 1;\n background-color: #000;\n animation: heightChange $speed infinite ease-in-out alternate;\n}\n\n.g-container .g-item {\n animation: heightChange $speed infinite ease-in-out alternate,\n skewChange $speed infinite ease-in-out alternate;\n}\n\n@for $i from 0 to $count {\n .g-container {\n .g-item:nth-child(#{$i + 1}) {\n animation-delay: calc(var(--f) * #{$i}),\n calc(var(--f) * #{$i} - #{$speed / 2});\n }\n }\n}\n\n@keyframes heightChange {\n from {\n height: var(--h);\n }\n to {\n height: calc(var(--h) + 30px);\n }\n}\n\n@keyframes skewChange {\n from {\n transform: scale(1.2) translate3d(0, 10px, 0) skewY(calc(var(--angle) * 1));\n }\n to {\n transform: scale(1.2) translate3d(0, 10px, 0) skewY(calc(var(--angle) * -1));\n }\n}\n```\n\n效果如下：\n\n" }, { "path": "animation/animation-direction.md", "content": "## scale 配合 transfrom-origin 精准控制动画方向\r\n\r\nscale 配合 transfrom-origin 精准控制动画方向。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/63)\r\n\r\nHTML：\r\n\r\n```HTML\r\n
Hover Me
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n position: absolute;\r\n width: 200px;\r\n height: 60px;\r\n line-height: 60px;\r\n font-size: 32px;\r\n cursor: pointer;\r\n color: #333;\r\n text-align: center;\r\n transition: color .5s;\r\n margin: 20px;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\ndiv::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 200px;\r\n transform: scaleX(0);\r\n height: 2px;\r\n background: deeppink;\r\n z-index: -1;\r\n transition: transform .5s;\r\n transform-origin: 100% 0;\r\n}\r\n\r\ndiv:hover::before {\r\n transform: scaleX(1);\r\n transform-origin: 0 0;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n\r\n\r\n------\r\n\r\n当然，其实这只是其中一种方案。\r\n\r\n不使用 `transform-orign` + `scale` 也是可以实现的，直接使用定位的方案如下：\r\n\r\nHTML：\r\n\r\n```HTML\r\n
Hover Me
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n position: relative;\r\n width: 200px;\r\n height: 60px;\r\n margin: auto;\r\n line-height: 60px;\r\n font-size: 32px;\r\n cursor: pointer;\r\n color: #333;\r\n text-align: center;\r\n transition: color .5s;\r\n}\r\n\r\ndiv::before {\r\n content: \"\";\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n width: 0;\r\n height: 2px;\r\n background: deeppink;\r\n transition: all .5s;\r\n}\r\n\r\ndiv:hover::before {\r\n left: 0;\r\n width: 200px;\r\n}\r\n```\r\n" }, { "path": "animation/animation-play-state.md", "content": "## CSS 巧妙控制动画行进\r\n\r\nCSS 巧妙控制动画行进。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/63)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板语言\r\ndiv.g-container\r\n div.g-btn\r\n -for(var i=0; i<60; i++)\r\n div.g-ball \r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n filter: contrast(10);\r\n background: #000;\r\n}\r\n\r\n.g-btn {\r\n position: relative;\r\n width: 200px;\r\n height: 200px;\r\n margin: 130px auto;\r\n cursor: pointer;\r\n filter: blur(2px) contrast(10);\r\n \r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: #dc8165;\r\n border-radius: 48% 45% 48% 46%;\r\n animation: rotate 3s infinite linear;\r\n z-index: 0;\r\n }\r\n}\r\n\r\n.g-ball {\r\n position: absolute;\r\n top: 50px;\r\n transform: translate(0, 0);\r\n background: #fa8763;\r\n border-radius: 50%;\r\n z-index: -1;\r\n}\r\n\r\n@for $i from 0 to $count {\r\n .g-ball:nth-child(#{$i}) {\r\n $width: #{random(60)}px;\r\n \r\n width: $width;\r\n height: $width;\r\n left: calc(#{(random(100))}px + 30px);\r\n animation: movetop .6s linear #{random(2000)/1000}s infinite;\r\n animation-play-state: running;\r\n }\r\n \r\n .g-btn:hover .g-ball:nth-child(#{$i}) {\r\n animation-play-state: paused;\r\n }\r\n}\r\n\r\n@keyframes movetop {\r\n 0% {\r\n transform: translate(0, 0);\r\n }\r\n 100% {\r\n transform: translate(0, -180px);\r\n opacity: .4;\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n" }, { "path": "animation/animation-rotate.md", "content": "## 正负旋转相消动画\r\n\r\n正负旋转相消动画。\r\n\r\n### 关键点\r\n\r\n利用了两个容器相向旋转，其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.com/coco1s/p/7443263.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n
正负旋转相消3D动画
\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n\r\ndiv {\r\n transform-style: preserve-3d;\r\n perspective: 500px;\r\n}\r\n\r\n.reverseRotate {\r\n margin: 20vh auto;\r\n}\r\n\r\n.rotate,\r\n.reverseRotate {\r\n width: 50vh;\r\n height: 50vh;\r\n}\r\n\r\n.content {\r\n width: 100%;\r\n height: 100%;\r\n line-height: 50vh;\r\n text-align: center;\r\n background-color: rgba(255, 100, 100, .8);\r\n font-size: 5vh;\r\n color: #fff;\r\n box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);\r\n}\r\n\r\n.rotate {\r\n animation: rotate 5s linear infinite; \r\n}\r\n\r\n.reverseRotate {\r\n animation: reverseRotate 5s linear infinite; \r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateZ(0deg);\r\n }\r\n 50% {\r\n transform: rotateX(40deg) rotateZ(180deg);\r\n }\r\n 100% {\r\n transform: rotateX(0deg) rotateZ(360deg);\r\n }\r\n}\r\n\r\n@keyframes reverseRotate {\r\n 0% {\r\n transform: rotateZ(0deg);\r\n }\r\n 100% {\r\n transform: rotateZ(-360deg);\r\n }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n" }, { "path": "assets/css/highlight.css", "content": "/*\r\nOriginal highlight.js style (c) Ivan Sagalaev \r\n*/\r\n\r\n.hljs {\r\n display: block;\r\n overflow-x: auto;\r\n padding: 0.5em;\r\n background: #F0F0F0;\r\n }\r\n \r\n \r\n /* Base color: saturation 0; */\r\n \r\n .hljs,\r\n .hljs-subst {\r\n color: #444;\r\n }\r\n \r\n .hljs-comment {\r\n color: #888888;\r\n }\r\n \r\n .hljs-keyword,\r\n .hljs-attribute,\r\n .hljs-selector-tag,\r\n .hljs-meta-keyword,\r\n .hljs-doctag,\r\n .hljs-name {\r\n font-weight: bold;\r\n }\r\n \r\n \r\n /* User color: hue: 0 */\r\n \r\n .hljs-type,\r\n .hljs-string,\r\n .hljs-number,\r\n .hljs-selector-id,\r\n .hljs-selector-class,\r\n .hljs-quote,\r\n .hljs-template-tag,\r\n .hljs-deletion {\r\n color: #880000;\r\n }\r\n \r\n .hljs-title,\r\n .hljs-section {\r\n color: #880000;\r\n font-weight: bold;\r\n }\r\n \r\n .hljs-regexp,\r\n .hljs-symbol,\r\n .hljs-variable,\r\n .hljs-template-variable,\r\n .hljs-link,\r\n .hljs-selector-attr,\r\n .hljs-selector-pseudo {\r\n color: #BC6060;\r\n }\r\n \r\n \r\n /* Language color: hue: 90; */\r\n \r\n .hljs-literal {\r\n color: #78A960;\r\n }\r\n \r\n .hljs-built_in,\r\n .hljs-bullet,\r\n .hljs-code,\r\n .hljs-addition {\r\n color: #397300;\r\n }\r\n \r\n \r\n /* Meta color: hue: 200 */\r\n \r\n .hljs-meta {\r\n color: #1f7199;\r\n }\r\n \r\n .hljs-meta-string {\r\n color: #4d99bf;\r\n }\r\n \r\n \r\n /* Misc effects */\r\n \r\n .hljs-emphasis {\r\n font-style: italic;\r\n }\r\n \r\n .hljs-strong {\r\n font-weight: bold;\r\n }" }, { "path": "assets/css/index.css", "content": "\r\nbody {\r\n font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;\r\n}\r\n\r\n.markdown-section ol, .markdown-section p, .markdown-section ul {\r\n line-height: 1.6rem;\r\n font-size: 14px;\r\n}\r\n\r\n.markdown-section {\r\n max-width: 100%;\r\n margin-top: 0;\r\n margin-left: 50px;\r\n margin-right: 70px;\r\n padding: 30px 15px 40px;\r\n position: relative;\r\n}\r\n\r\n.vuep {\r\n flex-direction: column;\r\n}\r\n\r\n.vuep-editor,\r\n.vuep-preview,\r\n.vuep-error {\r\n border-radius: 2px;\r\n height: inherit;\r\n margin-right: 10px;\r\n overflow: auto;\r\n flex: 0 0 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.vuep-preview {\r\n overflow: initial;\r\n}\r\n\r\n.content {\r\n padding-top: 20px;\r\n left: 360px;\r\n}\r\n\r\n.sidebar {\r\n width: 360px;\r\n padding: 5px;\r\n}\r\n\r\n.markdown-section {\r\n padding: 5px 30px 40px;\r\n}\r\n\r\n.markdown-section pre>code {\r\n padding: 3px 5px;\r\n}\r\n\r\nh1 a:hover,\r\nh2 a:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\n.sidebar h1,\r\n.sidebar h2 {\r\n font-size: 18px;\r\n padding-left: 5px;\r\n}\r\n\r\n.sidebar ul li {\r\n margin: 2;\r\n}\r\n\r\n.sidebar ul li a {\r\n transition: all .2s;\r\n font-size: 14px;\r\n line-height: 2;\r\n}\r\n\r\n.sidebar ul li a:hover {\r\n text-decoration: none;\r\n color: #42b983;\r\n}\r\n\r\n.gitalk-container.gitalk-container {\r\n width: unset !important;\r\n padding: 0 100px 0 80px;\r\n}\r\n\r\n.github-fork {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n}\r\n\r\n.content ul li {\r\n margin: 6px 0;\r\n}\r\n\r\n.markdown-section pre>code {\r\n font-size: 12px;\r\n line-height: 1.4;\r\n}\r\n\r\n.token.selector {\r\n font-size: 1.1em;\r\n}\r\n\r\n.markdown-section h2 {\r\n padding-bottom: 12px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.g-pv-container {\r\n font-size: 12px;\r\n color: #bbb; \r\n}\r\n\r\n.g-pv-container .g-time,\r\n.g-pv-container .g-pv {\r\n margin-right: 12px;\r\n}\r\n\r\n.g-btn-like-container {\r\n position: fixed;\r\n width: 48px;\r\n height: 48px;\r\n right: 24px;\r\n bottom: 24px;\r\n background: #fff;\r\n box-shadow: 0 1px 2px 0 #00000030;\r\n cursor: pointer;\r\n border-radius: 50%;\r\n transition: all 0.3s;\r\n z-index: 10;\r\n}\r\n\r\n.g-btn-like-container:hover {\r\n box-shadow: 0 2px 4px 0 #00000050;\r\n}\r\n\r\n.g-btn-like {\r\n position: absolute;\r\n background-image: url('../images/like.png');\r\n background-repeat: no-repeat;\r\n /*background-size: 2900%;*/\r\n height: 100px;\r\n width: 100px;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -47.5%);\r\n overflow: hidden;\r\n}\r\n\r\n.is-liked {\r\n background-position: -2800px 0;\r\n}\r\n\r\n.like-active {\r\n animation-timing-function: steps(28);\r\n animation-name: heart-burst;\r\n animation-duration: 0.8s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n}\r\n\r\n\r\n\r\n@keyframes heart-burst {\r\n 0% {\r\n background-position: left;\r\n }\r\n 100% {\r\n background-position: right;\r\n }\r\n}\r\n\r\n.sidebar-toggle::before {\r\n content: \"\";\r\n position: fixed;\r\n background: #fff;\r\n border-radius: 50%;\r\n width: 100px;\r\n height: 100px;\r\n box-shadow: 0 0 4px 1px #ddd;\r\n bottom: 0;\r\n left: 0;\r\n transform: translate(-50%, 50%);\r\n z-index: -1;\r\n cursor: pointer;\r\n transition: .5s all;\r\n}\r\n\r\n.sidebar-toggle-button span {\r\n transition: .5s all;\r\n opacity: 1;\r\n transform: translate(0, 0) rotate(0);\r\n}\r\nbody.sticky .sidebar-toggle {\r\n width: 50px;\r\n}\r\nbody.close .sidebar-toggle-button span:nth-child(1) {\r\n transform: translate(0px, 9px) rotate(45deg);\r\n background-color: #fff;\r\n}\r\nbody.close .sidebar-toggle-button span:nth-child(3) {\r\n transform: translate(0px, -3px) rotate(-45deg);\r\n background-color: #fff;\r\n}\r\nbody.close .sidebar-toggle-button span:nth-child(2) {\r\n background-color: #fff;\r\n opacity: 0;\r\n}\r\nbody.close .sidebar-toggle::before {\r\n background: #42b983;\r\n}\r\nbody.close .sidebar-toggle:hover .sidebar-toggle-button {\r\n opacity: .8;\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n .sidebar {\r\n left: -360px;\r\n }\r\n body.close .sidebar {\r\n transform: translateX(360px);\r\n }\r\n .markdown-section {\r\n margin-left: 0;\r\n margin-right: 0;\r\n padding: 5px 12px 40px;\r\n }\r\n .gitalk-container.gitalk-container {\r\n padding: 0 12px;\r\n }\r\n}" }, { "path": "assets/css/prism-line-numbers.css", "content": "pre[class*=\"language-\"].line-numbers {\r\n\tposition: relative;\r\n\tpadding-left: 3.8em;\r\n\tcounter-reset: linenumber;\r\n}\r\n\r\npre[class*=\"language-\"].line-numbers > code {\r\n\tposition: relative;\r\n\twhite-space: inherit;\r\n}\r\n\r\n.line-numbers .line-numbers-rows {\r\n\tposition: absolute;\r\n\tpointer-events: none;\r\n\ttop: 0;\r\n\tfont-size: 100%;\r\n\tleft: -3.8em;\r\n\twidth: 3em; /* works for line-numbers below 1000 lines */\r\n\tletter-spacing: -1px;\r\n\tborder-right: 1px solid #999;\r\n\r\n\t-webkit-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n\r\n}\r\n\r\n\t.line-numbers-rows > span {\r\n\t\tpointer-events: none;\r\n\t\tdisplay: block;\r\n\t\tcounter-increment: linenumber;\r\n\t}\r\n\r\n\t\t.line-numbers-rows > span:before {\r\n\t\t\tcontent: counter(linenumber);\r\n\t\t\tcolor: #999;\r\n\t\t\tdisplay: block;\r\n\t\t\tpadding-right: 0.8em;\r\n\t\t\ttext-align: right;\r\n\t\t}" }, { "path": "assets/js/highlight.js", "content": "Prism.languages.scss=Prism.languages.extend(\"css\",{comment:{pattern:/(^|[^\\\\])(?:\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*)/,lookbehind:!0},atrule:{pattern:/@[\\w-]+(?:\\([^()]+\\)|[^(])*?(?=\\s+[{;])/,inside:{rule:/@[\\w-]+/}},url:/(?:[-a-z]+-)*url(?=\\()/i,selector:{pattern:/(?=\\S)[^@;{}()]?(?:[^@;{}()]|&|#\\{\\$[-\\w]+\\})+(?=\\s*\\{(?:\\}|\\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:\"important\"},placeholder:/%[-\\w]+/,variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}}}),Prism.languages.insertBefore(\"scss\",\"atrule\",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\\w-]|\\$[-\\w]+|#\\{\\$[-\\w]+\\})+(?=\\s*:)/i,inside:{variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}},Prism.languages.insertBefore(\"scss\",\"important\",{variable:/\\$[-\\w]+|#\\{\\$[-\\w]+\\}/}),Prism.languages.insertBefore(\"scss\",\"function\",{placeholder:{pattern:/%[-\\w]+/,alias:\"selector\"},statement:{pattern:/\\B!(?:default|optional)\\b/i,alias:\"keyword\"},\"boolean\":/\\b(?:true|false)\\b/,\"null\":/\\bnull\\b/,operator:{pattern:/(\\s)(?:[-+*\\/%]|[=!]=|<=?|>=?|and|or|not)(?=\\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;\r\n" }, { "path": "assets/js/index.js", "content": "const gitalkConfig = {\r\n clientID: '38238cb03b9966294d48',\r\n clientSecret: '2550a359e8369c93d7dd1259f9db3984a117387f',\r\n repo: 'CSS-Inspiration',\r\n owner: 'chokcoco',\r\n admin: ['chokcoco'],\r\n distractionFreeMode: false,\r\n language: \"zh-CN\",\r\n proxy: 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'\r\n}\r\n\r\nwindow.$docsify = {\r\n loadSidebar: true,\r\n name: 'CSS Inspiration -- CSS灵感',\r\n repo: 'https://github.com/chokcoco/CSS-Inspiration',\r\n // 完整配置参数\r\n search: {\r\n maxAge: 86400000, // 过期时间，单位毫秒，默认一天\r\n paths: \"auto\", // or 'auto'\r\n placeholder: '搜索效果或CSS关键字，优惠券 或者 clip-path',\r\n noData: 'No Results!',\r\n // 搜索标题的最大程级, 1 - 6\r\n depth: 2\r\n },\r\n plugins: [\r\n function (hook, vm) {\r\n hook.init(function() {\r\n window.addEventListener('click', async (e) => {\r\n const target = e.target;\r\n const label = vm.route.path.split(\"/\").pop().split('.')[0];\r\n\r\n if (target.className.indexOf('g-btn-like') === -1 || target.className.indexOf('is-liked') !== -1) {\r\n return;\r\n }\r\n\r\n target.setAttribute('class', 'g-btn-like like-active');\r\n localStorage.setItem(`id_${label}`, true);\r\n await addLike(label);\r\n await insertPvAndLike(label);\r\n }, true);\r\n });\r\n\r\n hook.doneEach(function () {\r\n const label = vm.route.path.split(\"/\").pop().split('.')[0];\r\n\r\n gitalkRender(vm, label);\r\n\r\n if (!label || label === 'init') {\r\n return;\r\n }\r\n\r\n insertPvAndLike(label);\r\n insertLikeDOM(label);\r\n addPv(label);\r\n });\r\n }\r\n ]\r\n}\r\n\r\nasync function insertPvAndLike(label) {\r\n const id = md5(label);\r\n const URL = '/getPageInfo';\r\n\r\n await axios.get(URL, {\r\n params: {\r\n id\r\n }\r\n })\r\n .then(function (res) {\r\n const data = res.data;\r\n \r\n if (!data.ret) {\r\n const { likes = 0, pv = 0, ct = new Date().getTime() } = data.data;\r\n insertPvDOM(pv, likes, ct);\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n });\r\n}\r\n\r\nasync function addPv(label) {\r\n const id = md5(label);\r\n const URL = '/getPageInfo/addpv';\r\n\r\n return await axios.post(URL, {\r\n id\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n });\r\n}\r\n\r\nasync function addLike(label) {\r\n const id = md5(label);\r\n const URL = '/getPageInfo/addlike';\r\n\r\n return await axios.post(URL, {\r\n id\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n });\r\n}\r\n\r\nfunction insertPvDOM(pv, likes, ct) {\r\n const el = document.querySelector('.g-pv-container');\r\n\r\n if (el) {\r\n el.remove();\r\n }\r\n\r\n let domObj, divEle;\r\n\r\n domObj = Docsify.dom;\r\n\r\n divEle = domObj.create(\"div\");\r\n divEle.className = \"g-pv-container\";\r\n divEle.innerHTML = `创建于 ${format(ct)}阅读 ${pv} 次${likes} 人表示喜欢`;\r\n\r\n domObj.appendTo(document.querySelector('#main h2'), divEle);\r\n}\r\n\r\nfunction insertLikeDOM(label) {\r\n const el = document.querySelector('.g-btn-like-container');\r\n\r\n if (el) {\r\n el.remove();\r\n }\r\n\r\n const isLiked = localStorage.getItem(`id_${label}`);\r\n\r\n let domObj, divEle;\r\n\r\n domObj = Docsify.dom;\r\n\r\n divEle = domObj.create(\"div\");\r\n divEle.className = \"g-btn-like-container\";\r\n divEle.innerHTML = `
`;\r\n\r\n domObj.appendTo(document.querySelector('.content'), divEle);\r\n}\r\n\r\nfunction gitalkRender(vm, label) {\r\n let domObj, main, divEle, gitalk;\r\n\r\n domObj = Docsify.dom;\r\n main = domObj.getNode(\"#main\");\r\n\r\n Array.apply(\r\n null,\r\n document.querySelectorAll(\"div.gitalk-container\")\r\n ).forEach(function (ele) {\r\n ele.remove();\r\n });\r\n\r\n divEle = domObj.create(\"div\");\r\n divEle.id = \"gitalk-container-\" + label;\r\n divEle.className = \"gitalk-container\";\r\n divEle.style = \"width: \" + main.clientWidth + \"px; margin: 0 auto 20px;\";\r\n domObj.appendTo(domObj.find(\".content\"), divEle);\r\n gitalk = new Gitalk(\r\n Object.assign(gitalkConfig, { id: !label ? \"home\" : label })\r\n );\r\n gitalk.render(\"gitalk-container-\" + label);\r\n}\r\n\r\nfunction format(date, unit) {\r\n unit = unit || 'second';\r\n\r\n if (!date) {\r\n return '';\r\n }\r\n\r\n if (typeof date === 'string') return date;\r\n if (typeof date === 'number') {\r\n // 处理前后端标准时间戳相差 3 位的问题\r\n if (date.length === 10) {\r\n date *= 1000;\r\n }\r\n }\r\n\r\n date = new Date(date);\r\n\r\n const year = addLeadingZero(date.getFullYear());\r\n const month = addLeadingZero(date.getMonth() + 1);\r\n const day = addLeadingZero(date.getDate());\r\n const hour = addLeadingZero(date.getHours());\r\n const minute = addLeadingZero(date.getMinutes());\r\n const second = addLeadingZero(date.getSeconds());\r\n if (unit === 'year') return `${year}`;\r\n if (unit === 'month') return `${year}-${month}`;\r\n if (unit === 'day') return `${year}-${month}-${day}`;\r\n if (unit === 'hour') return `${year}-${month}-${day} ${hour}`;\r\n if (unit === 'minute') return `${year}-${month}-${day} ${hour}:${minute}`;\r\n if (unit === 'second')\r\n return `${year}-${month}-${day} ${hour}:${minute}:${second}`;\r\n if (unit === 'hour2second') return `${hour}:${minute}:${second}`;\r\n if (unit === 'reverseDay') return `${day} ${Months[+month - 1]} ${year}`;\r\n}\r\n\r\nconst addLeadingZero = (t) => (t < 10 ? '0' : '') + t.toString();\r\n\r\n" }, { "path": "assets/js/md5.js", "content": "!function(n){\"use strict\";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t>5]|=(255&n.charCodeAt(t/8))<16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e=\"\";for(r=0;r>>4&15)+\"0123456789abcdef\".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}\"function\"==typeof define&&define.amd?define(function(){return A}):\"object\"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);\r\n//# sourceMappingURL=md5.min.js.map" }, { "path": "assets/js/prism-line-number.js", "content": "(function () {\r\n\t\r\n\tif (typeof self === 'undefined' || !self.Prism || !self.document) {\r\n\t\treturn;\r\n\t}\r\n\t\r\n\t/**\r\n\t * Plugin name which is used as a class name for 
 which is activating the plugin\r\n\t * @type {String}\r\n\t */\r\n\tvar PLUGIN_NAME = 'line-numbers';\r\n\t\r\n\t/**\r\n\t * Regular expression used for determining line breaks\r\n\t * @type {RegExp}\r\n\t */\r\n\tvar NEW_LINE_EXP = /\\n(?!$)/g;\r\n\r\n\t/**\r\n\t * Resizes line numbers spans according to height of line of code\r\n\t * @param {Element} element 
 element\r\n\t */\r\n\tvar _resizeElement = function (element) {\r\n\r\n\t\tvar codeStyles = getStyles(element);\r\n\t\tvar whiteSpace = codeStyles['white-space'];\r\n\r\n\t\tif (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {\r\n\t\t\tvar codeElement = element.querySelector('code');\r\n\t\t\tvar lineNumbersWrapper = element.querySelector('.line-numbers-rows');\r\n\t\t\tvar lineNumberSizer = element.querySelector('.line-numbers-sizer');\r\n\t\t\tvar codeLines = codeElement.textContent.split(NEW_LINE_EXP);\r\n\r\n\t\t\tif (!lineNumberSizer) {\r\n\t\t\t\tlineNumberSizer = document.createElement('span');\r\n\t\t\t\tlineNumberSizer.className = 'line-numbers-sizer';\r\n\r\n\t\t\t\tcodeElement.appendChild(lineNumberSizer);\r\n\t\t\t}\r\n\r\n\t\t\tlineNumberSizer.style.display = 'block';\r\n\r\n\t\t\tcodeLines.forEach(function (line, lineNumber) {\r\n\t\t\t\tlineNumberSizer.textContent = line || '\\n';\r\n\t\t\t\tvar lineSize = lineNumberSizer.getBoundingClientRect().height;\r\n\t\t\t\tlineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';\r\n\t\t\t});\r\n\r\n\t\t\tlineNumberSizer.textContent = '';\r\n\t\t\tlineNumberSizer.style.display = 'none';\r\n\t\t}\r\n\t};\r\n\r\n\t/**\r\n\t * Returns style declarations for the element\r\n\t * @param {Element} element\r\n\t */\r\n\tvar getStyles = function (element) {\r\n\t\tconsole.log(222);\r\n\t\tif (!element) {\r\n\t\t\treturn null;\r\n\t\t}\r\n\r\n\t\treturn window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);\r\n\t};\r\n\r\n\twindow.addEventListener('resize', function () {\r\n\t\tArray.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);\r\n\t});\r\n\r\n\tPrism.hooks.add('complete', function (env) {\r\n\t\tconsole.log(111);\r\n\r\n\t\tif (!env.code) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// works only for  wrapped inside 
 (not inline)\r\n\t\tvar pre = env.element.parentNode;\r\n\t\tvar clsReg = /\\s*\\bline-numbers\\b\\s*/;\r\n\t\tif (\r\n\t\t\t!pre || !/pre/i.test(pre.nodeName) ||\r\n\t\t\t// Abort only if nor the 
 nor the  have the class\r\n\t\t\t(!clsReg.test(pre.className) && !clsReg.test(env.element.className))\r\n\t\t) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (env.element.querySelector('.line-numbers-rows')) {\r\n\t\t\t// Abort if line numbers already exists\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (clsReg.test(env.element.className)) {\r\n\t\t\t// Remove the class 'line-numbers' from the \r\n\t\t\tenv.element.className = env.element.className.replace(clsReg, ' ');\r\n\t\t}\r\n\t\tif (!clsReg.test(pre.className)) {\r\n\t\t\t// Add the class 'line-numbers' to the 
\r\n\t\t\tpre.className += ' line-numbers';\r\n\t\t}\r\n\r\n\t\tvar match = env.code.match(NEW_LINE_EXP);\r\n\t\tvar linesNum = match ? match.length + 1 : 1;\r\n\t\tvar lineNumbersWrapper;\r\n\r\n\t\tvar lines = new Array(linesNum + 1);\r\n\t\tlines = lines.join('');\r\n\r\n\t\tlineNumbersWrapper = document.createElement('span');\r\n\t\tlineNumbersWrapper.setAttribute('aria-hidden', 'true');\r\n\t\tlineNumbersWrapper.className = 'line-numbers-rows';\r\n\t\tlineNumbersWrapper.innerHTML = lines;\r\n\r\n\t\tif (pre.hasAttribute('data-start')) {\r\n\t\t\tpre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);\r\n\t\t}\r\n\r\n\t\tenv.element.appendChild(lineNumbersWrapper);\r\n\r\n\t\t_resizeElement(pre);\r\n\r\n\t\tPrism.hooks.run('line-numbers', env);\r\n\t});\r\n\r\n\tPrism.hooks.add('line-numbers', function (env) {\r\n\t\tenv.plugins = env.plugins || {};\r\n\t\tenv.plugins.lineNumbers = true;\r\n\t});\r\n\t\r\n\t/**\r\n\t * Global exports\r\n\t */\r\n\tPrism.plugins.lineNumbers = {\r\n\t\t/**\r\n\t\t * Get node for provided line number\r\n\t\t * @param {Element} element pre element\r\n\t\t * @param {Number} number line number\r\n\t\t * @return {Element|undefined}\r\n\t\t */\r\n\t\tgetLine: function (element, number) {\r\n\t\t\tif (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tvar lineNumberRows = element.querySelector('.line-numbers-rows');\r\n\t\t\tvar lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;\r\n\t\t\tvar lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);\r\n\r\n\t\t\tif (number < lineNumberStart) {\r\n\t\t\t\tnumber = lineNumberStart;\r\n\t\t\t}\r\n\t\t\tif (number > lineNumberEnd) {\r\n\t\t\t\tnumber = lineNumberEnd;\r\n\t\t\t}\r\n\r\n\t\t\tvar lineIndex = number - lineNumberStart;\r\n\r\n\t\t\treturn lineNumberRows.children[lineIndex];\r\n\t\t}\r\n\t};\r\n\r\n}());"
  },
  {
    "path": "background/background-css-property-tv-noise.md",
    "content": "## 利用渐变及 CSS Property 实现 TV 噪音动画\n\n利用渐变及 CSS Property 实现 TV 电视雪花屏的噪音动画。\n\n### 关键点\n\nCSS @property，它的出现，极大的增强的 CSS 的能力！\n\n关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)\n\nHTML：\n\n```\n
\n```\n\nSCSS：\n```scss\nhtml,\nbody {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n\n@property --length {\n  syntax: '';\n  inherits: false;\n  initial-value: 0.00085px;\n}\n\ndiv {\n    width: 240px;\n    height: 240px;\n    margin: auto;\n}\n\ndiv {\n    background-image: repeating-radial-gradient(\n        circle at 17% 32%,\n        rgb(4, 4, 0),\n        rgb(52, 72, 197),\n        rgb(115, 252, 224),\n        rgb(116, 71, 5),\n        rgb(223, 46, 169),\n        rgb(0, 160, 56),\n        rgb(234, 255, 0) var(--length)\n    );\n    animation: change 1s infinite alternate;\n}\n\n@keyframes change {\n    100% {\n        --length: 0.0009px;\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-attachment-frosted-glass.md",
    "content": "## 使用 background-attachment 实现毛玻璃效果\r\n\r\n使用 background-attachment，filter: blur() 实现毛玻璃效果。\r\n\r\n毛玻璃效果的重点在于，需要虚化的底图部分是会随页面 resize 变换而变换的。\r\n\r\n`background-attachment:fixed` 则可以完美契合这一需求。\r\n\r\n### 关键点\r\n\r\n`background-attachment` 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。\r\n\r\n`background-attachment`：如果指定了 `background-image` ，那么 `background-attachment` 决定背景是在视口中固定的还是随着包含它的区块滚动的。\r\n\r\n### background-attachment: fixed\r\n\r\n**fixed** 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
使用 
background-attachment: fixed 
filter: bulr() 
实现毛玻璃效果
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';\r\n\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url($img);\r\n    background-repeat: no-repeat;\r\n    background-attachment: fixed;\r\n    background-size: cover;\r\n    background-position: top;\r\n    overflow: hidden;\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    width: 30vw;\r\n    height: 40vh;\r\n    background: inherit;\r\n    margin: 50px auto;\r\n    padding: 5vmin;\r\n    border-radius: 5px;\r\n    border: 2px solid rgba(255, 255, 255, .5);\r\n    // transform: translate(-50%, -50%);\r\n    // left: 50%;\r\n    // top: 50%;\r\n    \r\n    p {\r\n        position: relative;\r\n        color: #000;\r\n        z-index: 10;\r\n        font-size: 24px;\r\n        line-height: 1.5;\r\n        \r\n    }\r\n    \r\n    &::after {\r\n        position: absolute;\r\n        content: \"\";\r\n        background: inherit; \r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        filter: blur(10px);\r\n        z-index: 0;\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-attachment-scroll-shadow.md",
    "content": "## 使用 background-attachment 实现滚动阴影\r\n\r\n这里，我们借助 `background-attachment: srcoll` 和 `background-attachment: local` 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。\r\n\r\n详见这篇文章：[使用纯 CSS 实现滚动阴影效果](https://juejin.cn/post/6913725602428600334)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    \r\n        \r\n            \r\n                \r\n                \r\n                \r\n                \r\n        \r\n    
日期姓名地址
\r\n    
\r\n        \r\n            \r\n                \r\n                    \r\n                    \r\n                    \r\n                    \r\n            \r\n        
2021-01-01XXXXXDDDDD
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-table {\r\n    margin: 50px auto;\r\n    width: 450px;\r\n}\r\n\r\ntable {\r\n    position: relative;\r\n    width: 450px;\r\n    border: 1px solid #ccc;\r\n    text-align: center;\r\n    \r\n    tbody {\r\n        border-collapse: separate;\r\n        height: 200px;\r\n    }\r\n    \r\n    td, th {\r\n        width: 150px;\r\n        padding: 5px;\r\n        border: 1px solid #ccc;\r\n    }\r\n}\r\n\r\n.g-scroll {\r\n    top: -1px;\r\n    position: relative;\r\n    height: 200px;\r\n    overflow-y: scroll;\r\n    overflow-x: hidden;\r\n    background: \r\n        linear-gradient(#fff, transparent) top / 100% 100px,\r\n        radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;\r\n    background-repeat: no-repeat;\r\n    background-attachment: local, scroll;\r\n}\r\n```\r\n\r\n效果如下（滚动表格即可看到效果）：\r\n\r\n"
  },
  {
    "path": "background/bg-clip-text-shine.md",
    "content": "## background-clip 实现流光文字效果\r\n\r\n使用 `background-clip: text` 实现流光文字效果。\r\n\r\n### 关键点\r\n\r\n背景中有个属性为 background-clip， 其作用就是设置元素的背景（背景图片或颜色）的填充规则。\r\n\r\n与 box-sizing 的取值非常类似，通常而言，它有 3 个取值，border-box，padding-box，content-box，后面规范新增了一个 background-clip。时至今日，部分浏览器仍需要添加前缀 webkit 进行使用 -webkit-background-clip。\r\n\r\n使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。\r\n\r\n详细的可以看看这篇文章：[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
 Lorem ipsum dolor 
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml, body {\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);\r\n    display: flex;\r\n}\r\n\r\np {\r\n    position: relative;\r\n    margin: auto;\r\n    font-size: 5rem;\r\n    word-spacing: 0.2em;\r\n    display: inline-block;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    color: transparent;\r\n    background-color: #E8A95B;\r\n    background-clip: text;\r\n}\r\n\r\np::after {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 5;\r\n    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);\r\n    background-clip: text;\r\n    background-size: 150% 100%;\r\n    background-repeat: no-repeat;\r\n    animation: shine 5s infinite linear;\r\n}\r\n\r\n@keyframes shine {\r\n\t0% {\r\n\t\tbackground-position: 50% 0;\r\n\t}\r\n\t100% {\r\n\t\tbackground-position: -190% 0;\r\n\t}\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-conic-border-effect.md",
    "content": "## 角向渐变线条 border 效果\n\n角向渐变实现线条 border 效果。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现线条 border 效果\n\nHTML：\n\n```html\n
\n```\n\nSCSS：\n```scss\nbody {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100vh;\n}\n\n*, *::before, *::after {\n\tbox-sizing: border-box;\n}\n\n@keyframes rotate {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n\ndiv {\n\tposition: relative;\n\tz-index: 0;\n\twidth: 400px;\n\theight: 300px;\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tpadding: 2rem;\n\t\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -2;\n\t\tleft: -50%;\n\t\ttop: -50%;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t\tbackground-color: #fff;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 50% 50%;\n\t\tbackground-position: 0 0;\n\t\tbackground-image: conic-gradient(#399953, #399953);\n\t\tanimation: rotate 4s linear infinite;\n\t}\n\t\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tleft: 6px;\n\t\ttop: 6px;\n\t\twidth: calc(100% - 12px);\n\t\theight: calc(100% - 12px);\n\t\tbackground: white;\n\t\tborder-radius: 5px;\n\t\tanimation: opacityChange 3s infinite alternate;\n\t}\n}\n\n@keyframes opacityChange {\n\t50% {\n\t\topacity:1;\n\t}\n\t100% {\n\t\topacity: .5;\n\t}\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-conic-border-light-effect.md",
    "content": "## 角向渐变实现光影 border 效果\n\n角向渐变实现光影 border 效果。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现光影 border 效果\n\nHTML：\n\n```html\n
\n
\n```\n\nSCSS：\n```scss\nbody {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100vh;\n\tbackground: #000;\n}\n\n*, *::before, *::after {\n\tbox-sizing: border-box;\n}\n\n@keyframes rotate {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n\n.conic {\n\tposition: relative;\n\tz-index: 0;\n\twidth: 400px;\n\theight: 300px;\n\tmargin: 20px;\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tpadding: 2rem;\n\t\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -2;\n\t\tleft: -50%;\n\t\ttop: -50%;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t\tbackground-color: #1a232a;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: 0 0;\n\t\tbackground-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);\n\t\tanimation: rotate 4s linear infinite;\n\t}\n\t\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tleft: 6px;\n\t\ttop: 6px;\n\t\twidth: calc(100% - 12px);\n\t\theight: calc(100% - 12px);\n\t\tbackground: #000;\n\t\tborder-radius: 5px;\n\t}\n}\n\n.conic-demo::after {\n\tanimation: opacityChange 5s infinite linear;\n}\n\n@keyframes opacityChange {\n\t50% {\n\t\topacity:.5;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-conic-circle-loading.md",
    "content": "## 角向渐变实现纯 CSS 圆环进度图\n\n角向渐变实现纯 CSS 圆环进度图。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现拖尾的圆环进度条\n\nHTML：\n\n```html\n
\n    
\n
\n```\n\nSCSS：\n```scss\nbody, html {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    background: #333;\n}\n\n.g-container {\n    position: relative;\n    width: 200px;\n    height: 200px;\n    margin: auto;\n    border-radius: 50%;\n    box-sizing: border-box;\n    border: 6px solid #444;\n}\n.g-circle {\n    position: absolute;\n    top: -6px;\n    left: -6px;\n    bottom: -6px;\n    right: -6px;\n    border-radius: 50%;\n    background: conic-gradient(#fc0 0%, transparent 40%, transparent);\n    animation: rotate 3s ease-in-out infinite;\n    transition-origin: 50% 50%;\n    \n    &::before {\n        content: \"\";\n        position: absolute;\n        top: 6px;\n        left: 6px;\n        bottom: 6px;\n        right: 6px;\n        background: #333;\n        border-radius: 50%;\n        // z-index: 1;\n    }\n    \n    &::after {\n        content: \"\";\n        position: absolute;\n        width: 12px;\n        height: 12px;\n        top: 0;\n        left: 50%;\n        transform: translate(-50%, -3px);\n        border-radius: 50%;\n        background: #fc0;\n        box-shadow: 0 0 4px 2px #fc0;\n    }\n}\n\n@keyframes rotate {\n    100% {\n        transform: rotate(-360deg);\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-conic-gradient-animation.md",
    "content": "## 角向渐变配合混合模式实现炫酷光影效果\r\n\r\n角向渐变配合混合模式实现炫酷光影效果。\r\n\r\n角向渐变，又叫角向渐变，属于正在路上的标准，具体的，可以看看我的这篇文章：\r\n\r\n[神奇的 conic-gradient 角向渐变](https://www.cnblogs.com/coco1s/p/7079529.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomConicGradient() {\r\n\t$n: 16 + random(16);\r\n\t$list: ();\r\n\t\r\n\t@for $i from 0 to $n {\r\n\t\t$list: $list, rgba(hsl(100, randomNum(250, 5, 10%), randomNum(1, 1, 1%)), randomNum(100, 0, .01));\r\n\t}\r\n\t\t\r\n\t@return conic-gradient($list, nth($list, 1));\r\n}\r\n\r\ndiv {\r\n    width: 100vw;\r\n    height: 100vh;\r\n\tmargin: 0;\r\n\tbackground: \r\n\t\tradial-gradient(hsl(9, randomNum(100, 75, 1%), randomNum(100, 75%, 1%)), black);\r\n\t\r\n\t&:before, &:after {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%; left: 50%;\r\n\t\tmargin: -100vmax; \r\n\t\twidth: 200vmax; \r\n        height: 200vmax;\r\n\t\topacity: .5;\r\n\t\tmix-blend-mode: overlay;\r\n\t\tanimation: rotate randomNum(100, 25, .1s) ease-in-out infinite;\r\n\t\tcontent: '';\r\n\t}\r\n\t\r\n\t&:before { background: randomConicGradient(); }\r\n\t&:after {\r\n\t\tbackground: randomConicGradient();\r\n\t\tanimation-duration: randomNum(100, 25, .1s);\r\n\t\tanimation-direction: reverse;\r\n\t}\r\n}\r\n\r\n@keyframes rotate { \r\n    to { \r\n        transform: rotate(1turn); \r\n    } \r\n}\r\n```\r\n\r\n上面效果，使用了角向渐变 polyfill JS 库：\r\n\r\n+ https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\r\n+ https://leaverou.github.io/conic-gradient/conic-gradient.js\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-conic-gradient-repeating-pattern.md",
    "content": "## 一行代码重复角向渐变代码实现酷炫图案\r\n\r\n一行代码重复角向渐变代码实现酷炫图案。\r\n\r\n具体的，可以看看我的这篇文章：\r\n\r\n[一行 CSS 代码的魅力](https://github.com/chokcoco/iCSS/issues/87)\r\n\r\nSCSS：\r\n```scss\r\nhtml {\r\n    height: 100%;\r\n    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-arrow.md",
    "content": "## 线性渐变实现箭头符号\r\n\r\n线性渐变实现箭头符号。\r\n\r\n### 关键点\r\n\r\n+ 利用多重线性渐变拼凑箭头形状\r\n+ 恰当运用 `background-position`，`background-size`\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n .arrow{\r\n    position: absolute;\r\n    top:50%;\r\n    left: 50%;\r\n    transform:translate(-50%,-50%);\r\n    width: 200px;\r\n    height: 40px;\r\n    text-align: center;\r\n    color: white;\r\n    font-size: 200%;\r\n}\r\n.arrow{\r\n    background:\r\n    linear-gradient(-135deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)\r\n    top right,\r\n    linear-gradient(-45deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)\r\n    bottom right,\r\n    linear-gradient(-135deg, #04e6fb 0, #65ff9a 90%, transparent 90%)\r\n    top left,\r\n    linear-gradient(-45deg, #04e6fb 0, #65ff9a 90%, transparent 90%)\r\n    bottom left;\r\n    background-size: 90% 50%;\r\n    background-repeat: no-repeat;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-border-effect.md",
    "content": "## 线性渐变线条 border 效果\n\n线性渐变线条 border 效果。\n\n### 关键点\n\n+ 利用线性渐变 `conic-gradient` 与**遮罩**实现线条 border 效果\n\n> 这里利用角向渐变也是可以的。\n\nHTML：\n\n```html\n
\n```\n\nSCSS：\n```scss\nbody {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 100vh;\n}\n\n*, *::before, *::after {\n\tbox-sizing: border-box;\n}\n\n@keyframes rotate {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n\n.rainbow {\n\tposition: relative;\n\tz-index: 0;\n\twidth: 400px;\n\theight: 300px;\n\tborder-radius: 10px;\n\toverflow: hidden;\n\tpadding: 2rem;\n\t\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -2;\n\t\tleft: -50%;\n\t\ttop: -50%;\n\t\twidth: 200%;\n\t\theight: 200%;\n\t\tbackground-color: #399953;\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 50% 50%, 50% 50%;\n\t\tbackground-position: 0 0, 100% 0, 100% 100%, 0 100%;\n\t\tbackground-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);\n\t\tanimation: rotate 4s linear infinite;\n\t}\n\t\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\tleft: 6px;\n\t\ttop: 6px;\n\t\twidth: calc(100% - 12px);\n\t\theight: calc(100% - 12px);\n\t\tbackground: white;\n\t\tborder-radius: 5px;\n\t\tanimation: opacityChange 3s infinite alternate;\n\t}\n}\n\n@keyframes opacityChange {\n\t50% {\n\t\topacity:1;\n\t}\n\t100% {\n\t\topacity: .5;\n\t}\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-linear-gradient-maze.md",
    "content": "## 线性渐变实现类迷宫图形\r\n\r\n使用线性渐变实现类迷宫图形。\r\n\r\n随机的艺术。\r\n\r\nHTML：\r\n\r\n```pug\r\ndiv.g-grid\r\n    - for(var i=0; i<400; i++)\r\n        div.g-box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 400;\r\n\r\n@function randomRotate() {\r\n    $r: random(100);\r\n    @if $r > 50 { @return 45  }\r\n    @if $r <= 50      { @return -45 }\r\n}\r\n\r\n.g-grid {\r\n    width: 100vmin;\r\n    height: 100vmin;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns:  repeat(20, 5%);\r\n    grid-template-rows: repeat(20, 5%);\r\n}\r\n\r\n@for $i from 1 to $count + 1 {\r\n    .g-box:nth-child(#{$i}) {\r\n        background: linear-gradient(#{randomRotate()}deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-inscribed.md",
    "content": "## 线性渐变实现内切角\r\n\r\n线性渐变实现内切角。\r\n\r\n### 关键点\r\n\r\n+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n .notching{\r\n    width: 160px;\r\n    padding: 60px 20px;\r\n}\r\n.notching{\r\n    background:\r\n    linear-gradient(135deg, transparent 15px, deeppink 0)\r\n    top left,\r\n    linear-gradient(-135deg, transparent 15px, deeppink 0)\r\n    top right,\r\n    linear-gradient(-45deg, transparent 15px, deeppink 0)\r\n    bottom right,\r\n    linear-gradient(45deg, transparent 15px, deeppink 0)\r\n    bottom left;\r\n    background-size: 50% 50%;\r\n    background-repeat: no-repeat;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-progress-bar.md",
    "content": "## 线性渐变模拟进度条运动\r\n\r\n使用线性渐变模拟进度条运动。\r\n\r\n### 知识点\r\n\r\n核心难点在于动画的首尾如何衔接上，需要自己尝试计算。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n}\r\n\r\n.bar {\r\n    position: relative;\r\n    width: 400px;\r\n    height: 30px;\r\n    margin: auto;\r\n    border-radius:20px;\r\n    // border: 1px solid #000;\r\n    background: #ffba01;\r\n    \r\n    &::before {\r\n        position: absolute;\r\n        content: \"\";\r\n        top: 0;\r\n        left: 0;\r\n        width: 400px;\r\n        height: 85px;\r\n        background: repeating-linear-gradient(45deg, #f06a0e, #f06a0e\r\n10px, transparent 11px, transparent 19px, #f06a0e 20px);\r\n        background-position: 0 0;\r\n        background-repeat: no-repeat;\r\n        animation: move 1s linear infinite;\r\n    }\r\n    \r\n}\r\n\r\n.overflow {\r\n    overflow: hidden;\r\n}\r\n\r\n@keyframes move {\r\n    from { background-position: 0 0; }\r\n    to { background-position: 0 -56px; }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-scroll-indicator.md",
    "content": "## 线性渐变实现滚动进度条\r\n\r\n使用线性渐变实现滚动进度条。\r\n\r\n滚动下面的页面，你会看到顶部实现了进度条的效果，这里其实是个简单的利用了线性渐变的障眼法。\r\n\r\n具体可以看看这篇文章：\r\n\r\n[不可思议的纯 CSS 滚动进度条效果](https://github.com/chokcoco/iCSS/issues/43)\r\n\r\nHTML：\r\n\r\n```html\r\n
不可思议的纯 CSS 进度条效果
\r\n\r\n....\r\n\r\n
OK，继续。这个效......
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    position: relative;\r\n    padding: 50px;\r\n    font-size: 24px;\r\n    line-height: 30px;\r\n    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);\r\n    background-size: 100% calc(100% - 100vh + 5px);\r\n    background-repeat: no-repeat;\r\n    z-index: 1;\r\n}\r\n\r\nbody::after {\r\n    content: \"\";\r\n    position: fixed;\r\n    top: 5px;\r\n    left: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    background: #fff;\r\n    z-index: -1;\r\n}\r\n\r\n\r\n/**\r\n * Unrelated css\r\n */\r\n\r\nh1 {\r\n    font-size: 32px;\r\n    line-height: 60px;\r\n}\r\n\r\nul {\r\n    margin-top: 30px;\r\n}\r\n\r\np {\r\n    font-size: 24px;\r\n    line-height: 30px;\r\n    margin-top: 30px;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-stripe.md",
    "content": "## 线性渐变背景实现条纹字\r\n\r\n利用线性渐变背景实现条纹字。\r\n\r\n### 关键点\r\n\r\n重点在于渐变色白色与透明色的重复渐变。\r\n\r\n结合其他 CSS 属性有很多作用，譬如立体条纹字。\r\n\r\nHTML：\r\n\r\n```html\r\n
所有字体都是条纹字
\r\n
利用线性渐变背景实现
\r\n
重点在于渐变色白色与透明色的重复渐变
\r\n
结合其他CSS属性有很多作用，譬如立体条纹字
\r\n```\r\n\r\nSCSS：\r\n```scss\r\np {\r\n    position: relative;\r\n    text-align: center;\r\n    font-size: 15vmin;\r\n    line-height: 25vmin;\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: linear-gradient(45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);\r\n        background-size: 6px 6px;\r\n        z-index: 1;\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-linear-underline.md",
    "content": "## 线性渐变实现下划线\r\n\r\n利用线性渐变实现下划线。与传统下划线相比，渐变实现的下划线有更多的可操控性。\r\n\r\n+ 可控下划线距离底部的距离\r\n+ 可控下划线的粗细\r\n+ 可控下划线的颜色\r\n+ 可添加动画&渐变\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
.underline1-ajkpys
\r\n    
.underline2-ajkpys
\r\n    
.underline3-ajkpys
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.underline {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 400px;\r\n    height: 200px;\r\n    text-align: center;\r\n    color: white;\r\n    font-size: 200%;\r\n    background: #00aabb;\r\n    border-radius: 0.5em;\r\n}\r\n\r\n.underline1-ajkps,\r\n.underline2-ajkps,\r\n.underline3-ajkps {\r\n    height: 100px;\r\n    cursor: pointer;\r\n    position: absolute;\r\n    left: 16%;\r\n    text-shadow: 0.1em 0 #00aabb, -0.1em 0 #00aabb;\r\n    transition: 1s;\r\n}\r\n\r\n.underline1-ajkps {\r\n    top: 10%;\r\n    background: linear-gradient(white, white) no-repeat;\r\n    background-size: 100% 1px;\r\n    background-position: -10em 1.15em;\r\n}\r\n\r\n.underline1-ajkps:hover {\r\n    background-position: 0 1.15em;\r\n}\r\n\r\n.underline2-ajkps {\r\n    top: 38%;\r\n    background: linear-gradient(90deg, white 50%, transparent 0) repeat-x;\r\n    background-size: 0.2em 2px;\r\n    background-position: -3em 1.15em;\r\n}\r\n\r\n.underline2-ajkps:hover {\r\n    background-position: 0 1.15em;\r\n}\r\n\r\n.underline3-ajkps {\r\n    top: 66%;\r\n    background: \r\n        linear-gradient(-45deg, transparent 40%, white 0, white 60%, transparent 0) 0 1em,\r\n        linear-gradient(45deg, transparent 40%, white 0, white 60%, transparent 0) 0.1em 1em;\r\n    background-repeat: repeat-x;\r\n    background-size: 0.15em 0.1em;\r\n    background-position: -3em 1.15em;\r\n}\r\n.underline3-ajkps:hover {\r\n    background: linear-gradient(-45deg, transparent 40%, deeppink 0, deeppink 60%, transparent 0) 0 1em,\r\n        linear-gradient(45deg, transparent 40%, deeppink 0, deeppink 60%, transparent 0) 0.1em 1em;\r\n    background-repeat: repeat-x;\r\n    background-size: 0.15em 0.1em;\r\n    background-position: 0 1.15em;\r\n}\r\n\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-mask-image.md",
    "content": "## mask-image 实现图片变幻\r\n\r\nmask-image 实现图片变幻。\r\n\r\n主要借助了 mask-image，一张图片上应用 `mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);`，透明的部分则会凸显出另外一张图。\r\n\r\n再利用动画，让 `mask-image: linear-gradient` 的角度旋转起来。\r\n\r\n详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';\r\n\r\n$img1: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';\r\n\r\n$count: 360;\r\n\r\ndiv {\r\n    position: absolute;\r\n    top:0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    \r\n}\r\n\r\n.a {\r\n    background: url($img1);\r\n    background-size: 100% auto;\r\n}\r\n\r\n.b {\r\n    background: url($img2);\r\n    background-size: 100% auto;\r\n    mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);\r\n    mask-image-position: 50% 50%;\r\n    animation: move 10s infinite;\r\n}\r\n\r\n@keyframes move {\r\n    \r\n    @for $i from 0 through $count {\r\n        #{$i / $count * 100}% {\r\n            mask-image: linear-gradient($i / $count * 360deg, rgba(0, 0, 0, 1) 40%, transparent 60%);\r\n        }        \r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-mask-text-show.md",
    "content": "## mask-image 实现文字的渐现\r\n\r\n使用 `mask` 实现文字的渐现效果。\r\n\r\n### 关键点\r\n\r\n使用 mask 最重要结论就是：**添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明**。\r\n\r\n详细的可以看看这篇文章：[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)\r\n\r\nHTML：\r\n\r\n```html\r\n
Hello Mask
\r\n
Hello Mask
\r\n```\r\n\r\nSCSS：\r\n```scss\r\np {\r\n    margin: auto;\r\n    font-family: \"Reggae One\", cursive;\r\n    font-size: 48px;\r\n    color: #fff;\r\n    mask: radial-gradient(\r\n        circle at 0 50%,\r\n        #000,\r\n        transparent 10%,\r\n        transparent 0\r\n    );\r\n    mask-size: 100%;\r\n    animation: scale 5s infinite;\r\n}\r\n.radial {\r\n    mask: radial-gradient(\r\n        circle at 50% 0,\r\n        #000,\r\n        transparent 20%,\r\n        transparent 0\r\n    );\r\n    mask-size: 100% 100%;\r\n    animation: scale2 5s infinite;\r\n}\r\n@keyframes scale {\r\n    50%,\r\n    100% {\r\n        mask-size: 2000%;\r\n    }\r\n}\r\n@keyframes scale2 {\r\n    50%,\r\n    100% {\r\n        mask-size: 100% 2000%;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-mask-transition.md",
    "content": "## mask-image 实现图片转场变换\n\nmask-image 实现图片转场变换。\n\n详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)\n\nHTML：\n\n```html\n
\n```\n\nSCSS：\n```scss\nhtml, body {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n\ndiv {\n    margin: auto;\n    position: relative;\n    width: 30vw;\n    height: 70vh;\n    background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2128480768,3645204276&fm=26&gp=0.jpg) no-repeat;\n    background-size: cover;\n    \n    &::before {\n        position: absolute;\n        content: \"\";\n        top: 0;left: 0; right: 0;bottom: 0;\n        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1877625006,2341162086&fm=26&gp=0.jpg) no-repeat;\n        background-size: cover;\n        z-index: 1;\n        animation: maskRotate 4s ease-in-out infinite;\n    }\n}\n\n@keyframes maskRotate {\n    @for $i from 0 through 50 { \n        #{$i}% {\n            mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});\n        }\n    }\n    100% {\n        mask: linear-gradient(45deg, #000， #000 100%);\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "background/bg-radial-btn-click-bubble.md",
    "content": "## 使用多重背景单标签实现气泡按钮点击效果\r\n\r\n使用多重背景单标签实现气泡按钮点击效果\r\n\r\n### 关键点\r\n\r\n+ 通过多重背景实现（radial-gradient），并用 animation 改变 background-position。\r\n\r\nHTML：\r\n\r\n```html\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$fuschia: #ff0081;\r\n$button-bg: $fuschia;\r\n$button-text-color: #fff;\r\n$baby-blue: #f8faff;\r\n\r\nbody{\r\n  font-size: 16px;\r\n  font-family: 'Helvetica', 'Arial', sans-serif;\r\n  text-align: center;\r\n  background-color: $baby-blue;\r\n}\r\n.bubbly-button{\r\n  font-family: 'Helvetica', 'Arial', sans-serif;\r\n  display: inline-block;\r\n  font-size: 1em;\r\n  padding: 1em 2em;\r\n  margin-top: 100px;\r\n  margin-bottom: 60px;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  background-color: $button-bg;\r\n  color: $button-text-color;\r\n  border-radius: 4px;\r\n  border: none;\r\n  cursor: pointer;\r\n  position: relative;\r\n  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;\r\n  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);\r\n  \r\n  &:focus {\r\n    outline: 0;\r\n  }\r\n  \r\n  &:before, &:after{\r\n    position: absolute;\r\n    content: '';\r\n    display: block;\r\n    width: 140%;\r\n    height: 100%;\r\n    left: -20%;\r\n    z-index: -1000;\r\n    transition: all ease-in-out 0.5s;\r\n    background-repeat: no-repeat;\r\n  }\r\n  \r\n  &:before{\r\n    display: none;\r\n    top: -75%;\r\n    background-image:  \r\n      radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle,  transparent 20%, $button-bg 20%, transparent 30%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%), \r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle,  transparent 10%, $button-bg 15%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%);\r\n  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;\r\n  //background-position: 0% 80%, -5% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 85% 30%;\r\n  }\r\n  \r\n  &:after{\r\n    display: none;\r\n    bottom: -75%;\r\n    background-image:  \r\n    radial-gradient(circle, $button-bg 20%, transparent 20%), \r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle,  transparent 10%, $button-bg 15%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%),\r\n    radial-gradient(circle, $button-bg 20%, transparent 20%);\r\n  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;\r\n  //background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;\r\n  }\r\n \r\n  &:active{\r\n    transform: scale(0.9);\r\n    background-color: darken($button-bg, 5%);\r\n    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);\r\n  }\r\n  \r\n  &.animate{\r\n    &:before{\r\n      display: block;\r\n      animation: topBubbles ease-in-out 0.75s forwards;\r\n    }\r\n    &:after{\r\n      display: block;\r\n      animation: bottomBubbles ease-in-out 0.75s forwards;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n@keyframes topBubbles {\r\n  0%{\r\n    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;\r\n  }\r\n    50% {\r\n      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}\r\n 100% {\r\n    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;\r\n  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;\r\n  }\r\n}\r\n\r\n@keyframes bottomBubbles {\r\n  0%{\r\n    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;\r\n  }\r\n  50% {\r\n    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}\r\n 100% {\r\n    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;\r\n  background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;\r\n  }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-radial-coupon.md",
    "content": "## 径向渐变实现优惠券波浪造型\r\n\r\n渐变实现优惠券波浪造型。\r\n\r\n### 关键点\r\n\r\n+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
50
\r\n
50
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.coupon {\r\n    position: relative;\r\n    width: 400px;\r\n    height: 160px;\r\n    margin: 50px auto;\r\n    background-image: \r\n        radial-gradient(circle at 1px 8px, transparent 6px, #f49714 6px, #f49714 0px),\r\n        radial-gradient(circle at 199px 8px, transparent 6px, #f49714 6px, #f49714 0px);\r\n    background-size: 200px 18px;\r\n    background-position: 0 0, 200px 0;\r\n    background-repeat-x: no-repeat;\r\n    \r\n    \r\n    font-size: 100px;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    line-height: 160px;\r\n    padding-left: 60px;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    \r\n    &::before {\r\n        position: absolute;\r\n        content: \"\";\r\n        left: 240px;\r\n        top: 0;\r\n        bottom : 0;\r\n        width: 0;\r\n        border-left: 1px dashed #fff;\r\n    }\r\n    \r\n    &::after {\r\n        position: absolute;\r\n        content: \"立即领取\";\r\n        font-size: 30px;\r\n        width: 70px;\r\n        top: 50%;\r\n        right: 2%;\r\n        transform: translate(-50%, -50%);\r\n        line-height: 40px;\r\n        letter-spacing: 5px;\r\n    }\r\n}\r\n\r\n.wave {\r\n    position: relative;\r\n    width: 400px;\r\n    height: 160px;\r\n    margin: 50px auto;\r\n    background: linear-gradient(90deg, #945700 0%, #f49714 100%);\r\n    filter: drop-shadow(-7px 4px 3px #333);\r\n    font-size: 100px;\r\n    color: #fff;\r\n    font-weight: bold;\r\n    line-height: 160px;\r\n    padding-left: 60px;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    border-radius: 5px;\r\n    text-shadow: -2px -2px 2px #333;\r\n    \r\n    &::before,\r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        // left: 0;\r\n        right: 0;\r\n        bottom :0;\r\n    }\r\n    \r\n    &::before {\r\n        width: 10px;\r\n        background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);\r\n        background-size: 20px 20px;\r\n        background-position: 0 15px;\r\n    }\r\n    \r\n    &::after {\r\n        width: 15px;\r\n        background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);\r\n        background-size: 20px 40px;\r\n        background-position: 0 15px;\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-radial-focus.md",
    "content": "## 径向渐变实现舞台灯光聚焦效果\r\n\r\n使用渐变实现舞台灯光聚焦效果。\r\n\r\n### 关键点\r\n\r\n+ 利用径向渐变生成一个从透明到黑色蒙板的占据整个屏幕的渐变\r\n+ 为了让中心聚焦处可移动动画，整个渐变的容器需要比屏幕更大\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';\r\n\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url($img);\r\n    background-repeat: no-repeat;\r\n    background-size: cover;\r\n    overflow: hidden;\r\n}\r\n\r\n.radial-circle {\r\n    position: absolute;\r\n    top: -100%;\r\n    left: -100%;\r\n    right: -100%;\r\n    bottom: -100%;\r\n    background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 3%, rgba(0, 0, 0, .7) 3.5%, rgba(0, 0, 0, .8) 100%);\r\n    animation: move 10s infinite alternate;\r\n}\r\n\r\n@keyframes move {\r\n    0% {\r\n        transform: translateX(-10%);\r\n    }\r\n    100% {\r\n        transform: translateX(10%);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-wave-border.md",
    "content": "## 渐变实现波浪边框\r\n\r\n渐变实现波浪边框。\r\n\r\n### 关键点\r\n\r\n+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    position: relative;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background: linear-gradient(180deg, #607d8b, #673ab7);\r\n    background-size: 100% 50px;\r\n    background-repeat: no-repeat;\r\n    \r\n    &::before {\r\n          content: \"\";\r\n          position: absolute;\r\n          left: 0;\r\n          top: 40px;\r\n          right: 0;\r\n          background-repeat: repeat-x;\r\n          height: 10px;\r\n          background-size: 20px 20px;\r\n          background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px, #fff 20px);\r\n    }\r\n    \r\n    &::after {\r\n          content: \"\";\r\n          position: absolute;\r\n          left: 0;\r\n          top: 35px;\r\n          right: 0;\r\n          background-repeat: repeat-x;\r\n          height: 15px;\r\n          background-size: 40px 20px;\r\n          background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/bg-wave-underline.md",
    "content": "## 渐变实现波浪下划线\r\n\r\n利用渐变实现波浪下划线。\r\n\r\n### 核心点\r\n\r\n+ 重点一在于如何将两段 `radial-gradient` 无缝衔接组成波浪\r\n\r\n+ 重点二在于动画行进过程如何首尾衔接\r\n\r\nHTML：\r\n\r\n```html\r\n
渐变实现波浪
\r\nHover Me\r\n```\r\n\r\nSCSS：\r\n```scss\r\np {\r\n    position: absolute;\r\n    top: 20%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(3);\r\n    font-size: 18px;\r\n    text-decoration: none;\r\n    padding: 10px;\r\n    cursor:pointer;\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: radial-gradient(circle at 10px -7px, transparent 8px, red 8px, red 9px, transparent 9px) repeat-x;\r\n        background-size: 20px 20px;\r\n        background-position: -10px calc(100% + 16px); \r\n        \r\n    }\r\n    \r\n    &:hover::before {\r\n        animation: moveTop 2s infinite alternate linear;\r\n    }\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: radial-gradient(circle at 10px 27px, transparent 8px, green 8px, green 9px, transparent 9px) repeat-x;\r\n        background-size: 20px 20px;\r\n        background-position: 0 calc(100% - 4px); \r\n    }\r\n    \r\n    &:hover::after {\r\n        animation: moveBottom 2s infinite alternate linear;\r\n    }\r\n}\r\n\r\n.flow-wave {\r\n    position: absolute;\r\n    top: 70%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(3);\r\n    font-size: 18px;\r\n    text-decoration: none;\r\n    \r\n    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,\r\n        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;\r\n    background-size: 20px 20px;\r\n    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);\r\n}\r\n\r\n.flow-wave {\r\n    padding: 5px 0;\r\n}\r\n.flow-wave:hover,\r\n.flow-wave:focus {\r\n    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,\r\n        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;\r\n    background-size: 20px 20px;\r\n    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);\r\n    animation: waveFlow 1s infinite linear;\r\n}\r\n\r\n@keyframes waveFlow {\r\n    from { background-position-x: -10px, 0; }\r\n    to { background-position-x: -30px, -20px; }\r\n}\r\n\r\n@keyframes moveTop {\r\n    100% {\r\n        bottom: -5px;\r\n    }\r\n}\r\n\r\n@keyframes moveBottom {\r\n    100% {\r\n        bottom: 5px;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "background/bg-wave.md",
    "content": "## 渐变实现波浪效果/波浪进度框\r\n\r\n使用渐变实现波浪效果/波浪进度框。\r\n\r\n### 关键点\r\n\r\n+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.wave {\r\n    width: 20vmax;\r\n    height: 20vmax;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    border: 1px solid #0092d4;\r\n    background: linear-gradient(0deg, #0092d4 0%, #6bcefb 50%, transparent 50%);\r\n    border-radius: 50%;\r\n    z-index: 1;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n}\r\n\r\n.wave::before,\r\n.wave::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    transform: scaleX(1.3);\r\n}\r\n\r\n.wave::after {\r\n    top: 50%;\r\n    left: 0;\r\n    right: 0;\r\n    background-repeat: repeat-x;\r\n    height: 10px;\r\n    background-size: 20px 20px;\r\n    background-image: radial-gradient(\r\n        circle at 10px 15px,\r\n        transparent 12px,\r\n        #fff 13px,\r\n        #fff 20px\r\n    );\r\n}\r\n\r\n.wave::before {\r\n    top: 50%;\r\n    left: 0;\r\n    right: 0;\r\n    background-repeat: repeat-x;\r\n    height: 15px;\r\n    background-size: 40px 20px;\r\n    background-image: radial-gradient(\r\n        circle at 10px 0px,\r\n        #fff 12px,\r\n        transparent 13px\r\n    );\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "background/css-property-variable-bg-change-animation.md",
    "content": "## 利用 CSS @property 探寻渐变的极限效果\n\n利用 CSS @property 探寻渐变的极限效果\n\n### 关键点\n\n利用了 CSS @property，不了解的可以猛击本文：[CSS @property，让不可能变可能](https://juejin.cn/post/6951201528543707150)\n\n### 线性渐变\n\nCSS：\n```CSS\nhtml, body {\n    width: 100%;\n    height: 100%;\n}\n\n@property --per {\n  syntax: '';\n  inherits: false;\n  initial-value: 100%;\n}\n\nbody {\n    background: repeating-linear-gradient(45deg, deeppink, #fc0, #000, red, green, gray var(--per));\n    animation: perChange 60s infinite linear;\n    cursor: pointer;\n\n    &:hover {\n        animation-play-state: paused;\n    }\n}\n\n@keyframes perChange {\n    5% {\n        --per: 1%;\n    }\n    10% {\n        --per: .1%;\n    }\n    30% {\n        --per: .01%;\n    }\n    50% {\n        --per: .001%;\n    }\n    70% {\n        --per: .0001%;\n    }\n    78% {\n        --per: .00001%;\n    }\n    90% {\n        --per: .000001%;\n    }\n    95%,\n    100% {\n        --per: .0000001%;\n    }\n}\n```\n\n效果如下（鼠标悬停，可以暂停动画）：\n\n\n\n### 径向渐变\n\nCSS：\n```CSS\nhtml, body {\n    width: 100%;\n    height: 100%;\n}\n\n@property --per {\n  syntax: '';\n  inherits: false;\n  initial-value: 100%;\n}\n\nbody {\n    background: repeating-radial-gradient(deeppink, #fc0, #000, red, green, gray var(--per));\n    animation: perChange 25s infinite linear;\n    cursor: pointer;\n\n    &:hover {\n        animation-play-state: paused;\n    }\n}\n\n@keyframes perChange {\n    5% {\n        --per: 1%;\n    }\n    10% {\n        --per: .1%;\n    }\n    30% {\n        --per: .01%;\n    }\n    50% {\n        --per: .001%;\n    }\n    70% {\n        --per: .0001%;\n    }\n    78% {\n        --per: .00001%;\n    }\n    90% {\n        --per: .000001%;\n    }\n    95%,\n    100% {\n        --per: .0000001%;\n    }\n}\n```\n\n效果如下（鼠标悬停，可以暂停动画）：\n\n\n\n### 角向渐变\n\nCSS：\n```CSS\nhtml, body {\n    width: 100%;\n    height: 100%;\n}\n\n@property --per {\n  syntax: '';\n  inherits: false;\n  initial-value: 100%;\n}\n\nbody {\n    background: repeating-conic-gradient(deeppink, #fc0, #000, red, green, gray var(--per));\n    animation: perChange 25s infinite linear;\n    cursor: pointer;\n\n    &:hover {\n        animation-play-state: paused;\n    }\n}\n\n@keyframes perChange {\n    5% {\n        --per: 1%;\n    }\n    10% {\n        --per: .1%;\n    }\n    30% {\n        --per: .01%;\n    }\n    50% {\n        --per: .001%;\n    }\n    70% {\n        --per: .0001%;\n    }\n    78% {\n        --per: .00001%;\n    }\n    90% {\n        --per: .000001%;\n    }\n    95%,\n    100% {\n        --per: .0000001%;\n    }\n}\n```\n\n效果如下（鼠标悬停，可以暂停动画）：\n\n"
  },
  {
    "path": "background/repeating-radial-background-artistic-bg.md",
    "content": "## 多重径向渐变实现美妙的艺术背景\n\n利用多重径向渐变实现美妙的艺术背景。\n\n### 关键点\n\n多重径向渐变的单位数量级要非常的小！\n\n关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)\n\nHTML：\n\n```\n
\n
\n
\n
\n
\n
\n```\n\nSCSS：\n```scss\nhtml,\nbody {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n\n@property --length {\n  syntax: '';\n  inherits: false;\n  initial-value: 0.0003px;\n}\n\ndiv {\n    width: 240px;\n    height: 240px;\n    margin: auto;\n}\n\ndiv:nth-child(1) {\n    background-image: repeating-radial-gradient(\n        circle at center center,\n        rgb(241, 43, 239),\n        rgb(239, 246, 244) 3px\n    );\n}\n\ndiv:nth-child(2) {\n    background-image: repeating-radial-gradient(\n        circle at 15% 30%,\n        rgb(4, 4, 0),\n        rgb(52, 72, 197),\n        rgb(115, 252, 224),\n        rgb(116, 71, 5),\n        rgb(223, 46, 169),\n        rgb(0, 160, 56),\n        rgb(234, 255, 0) 2px\n    );\n}\n\ndiv:nth-child(3) {\n    background-image: repeating-radial-gradient(\n        circle at center center,\n        rgb(81, 9, 72),\n        rgb(72, 90, 223),\n        rgb(80, 0, 34),\n        rgb(34, 134, 255),\n        rgb(65, 217, 176),\n        rgb(241, 15, 15),\n        rgb(148, 213, 118) 0.1px\n    );\n}\n\ndiv:nth-child(4) {\n    background-image: repeating-radial-gradient(\n        circle at center center,\n        rgb(38, 21, 217) 0px,\n        rgb(38, 21, 217) 2px,\n        rgba(8, 254, 5, 0.83) 2px,\n        rgba(8, 254, 5, 0.83) 3px\n    );\n    background-size: 69px 69px;\n}\n\ndiv:nth-child(5) {\n    background-image: repeating-radial-gradient(\n        ellipse at center center,\n        rgb(75, 154, 242),\n        rgb(64, 135, 228),\n        rgb(54, 117, 214),\n        rgb(43, 98, 200),\n        rgb(33, 79, 185),\n        rgb(22, 60, 171),\n        rgb(12, 42, 157),\n        rgb(1, 23, 143) 0.01px\n    );\n}\n\ndiv:nth-child(6) {\n    background-image: repeating-radial-gradient(\n        circle at 17% 32%,\n        rgb(4, 4, 0),\n        rgb(52, 72, 197),\n        rgb(115, 252, 224),\n        rgb(116, 71, 5),\n        rgb(223, 46, 169),\n        rgb(0, 160, 56),\n        rgb(234, 255, 0) var(--length)\n    );\n    transition: 4s --length;\n    cursor: pointer;\n    \n    &:hover {\n        --length: 4px;\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "blendmode/blend-color-set.md",
    "content": "## 使用 mix-blend-mode 实现图片任意颜色赋值技术\r\n\r\n使用 `mix-blend-mode` 实现图片任意颜色赋值技术。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n\r\n### 关键点\r\n\r\n详细分析请看：[两行 CSS 代码实现图片任意颜色赋色技术](https://www.cnblogs.com/coco1s/p/8080211.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
原图
\r\n
红色
\r\n
灰色
\r\n
渐变色
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png';\r\n\r\n.pic {\r\n    width: 200px;\r\n    height: 200px;\r\n    margin: 50px;\r\n    text-align: center;\r\n    font-size: 42px;\r\n    line-height: 420px;\r\n    float: left;\r\n    background-image: url($img);\r\n    background-size: cover;\r\n}\r\n\r\n.pic1 {\r\n    background-image: url($img), linear-gradient(#f00, #f00);\r\n    background-blend-mode: lighten;\r\n    background-size: cover;\r\n}\r\n\r\n.pic2 {\r\n    background-image: url($img), linear-gradient(#333, #333);\r\n    background-blend-mode: lighten;\r\n    background-size: cover;\r\n}\r\n\r\n.pic3 {\r\n    background-image: url($img), linear-gradient(#f00, #00f);\r\n    background-blend-mode: lighten;\r\n    background-size: cover;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-douyin-logo.md",
    "content": "## 使用 mix-blend-mode 实现抖音 LOGO\r\n\r\n使用 mix-blend-mode 实现抖音 LOGO。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### 关键点\r\n\r\n+ 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果\r\n+ 利用 `mix-blend-mode: lighten` 混合模式实现两个 J 形结构重叠部分为白色\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\n\r\n.g-container {\r\n    position: relative;\r\n    width: 200px;\r\n    margin: 100px auto;\r\n    filter: contrast(150%) brightness(110%);\r\n}\r\n\r\n.j {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 47px;\r\n    height: 218px;\r\n    z-index: 1;\r\n    background: #24f6f0;\r\n\r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 100px;\r\n        height: 100px;\r\n        border: 47px solid #24f6f0;\r\n        border-top: 47px solid transparent;\r\n        border-radius: 50%;\r\n        top: 121px;\r\n        left: -147px;\r\n        transform: rotate(45deg);\r\n    }\r\n    \r\n        &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 140px;\r\n        height: 140px;\r\n        border: 40px solid #24f6f0;\r\n        border-right: 40px solid transparent;\r\n        border-top: 40px solid transparent;\r\n        border-left: 40px solid transparent;\r\n        top: -110px;\r\n        right: -183px;\r\n        border-radius: 100%;\r\n        transform: rotate(45deg);\r\n        z-index: -10;\r\n    }\r\n}\r\n\r\n.j:last-child {\r\n    left: 10px;\r\n    top: 10px;\r\n    background: #fe2d52;\r\n    z-index: 100;\r\n    mix-blend-mode: lighten;\r\n    animation: moveLeft 10s infinite;\r\n    \r\n    &::before {\r\n        border: 47px solid #fe2d52;\r\n        border-top: 47px solid transparent;\r\n\r\n    }\r\n    &::after {\r\n        border: 40px solid #fe2d52;\r\n        border-right: 40px solid transparent;\r\n        border-top: 40px solid transparent;\r\n        border-left: 40px solid transparent;\r\n    }\r\n}\r\n\r\n@keyframes moveLeft {\r\n    0% {\r\n        transform: translate(200px);\r\n    }\r\n    50% {\r\n        transform: translate(0px);\r\n    }\r\n    100% {\r\n        transform: translate(0px);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-loading.md",
    "content": "## mix-blend-mode 实现 loading 效果\r\n\r\nmix-blend-mode 实现 loading 效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### 关键点\r\n\r\n这里使用了 `mix-blend-mode: screen` 滤色模式，这是一种提亮图像形混合模式。滤色的英文是 screen，也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相，相乘，然后再反相。简单记忆为\"让白更白，而黑不变\"。（不一定十分准确，如有错误还请指正）\r\n\r\n我们将几个 div 按照不同延时(animation-delay)小幅度旋转起来，来达到一种很显眼很魔性的效果，适合做 loading 图。\r\n\r\nHTML：\r\n\r\n```html\r\n\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n\tbackground:#291f34;\r\n\toverflow:hidden;\r\n}\r\n\r\n.loading {\r\n\tposition:absolute;\r\n\tleft:50%;\r\n\ttop:30vh;\r\n\tmargin-left:-20vh;\r\n\tdisplay:block;\r\n\twidth:40vh;\r\n\theight:40vh;\r\n\ttext-align:center;\r\n\tfilter:contrast(1.2);\r\n\t\r\n\tspan {\r\n  \t    mix-blend-mode:screen;\r\n\t\tdisplay:block;\r\n\t\tposition:absolute;\r\n\t\tborder-radius:50%;\r\n\t\tanimation:wave 3s infinite linear;\r\n\t}\r\n\t\r\n\tspan:nth-child(0) {\r\n\t\tleft:-11%;\r\n\t\tright:-2%;\r\n\t\ttop:-12%;\r\n\t\tbottom:-5%;\r\n\t\ttransform-origin:46% 53%;\r\n\t\tanimation-delay:0;\r\n\t\tbackground-color:hsl(0, 50%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(1) {\r\n\t\tleft:-4%;\r\n\t\tright:-4%;\r\n\t\ttop:-9%;\r\n\t\tbottom:-2%;\r\n\t\ttransform-origin:47% 50%;\r\n\t\tanimation-delay:-1s;\r\n\t\tbackground-color:hsl(50, 60%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(2) {\r\n\t\tleft:-11%;\r\n\t\tright:-4%;\r\n\t\ttop:-10%;\r\n\t\tbottom:-11%;\r\n\t\ttransform-origin:49% 53%;\r\n\t\tanimation-delay:-1.5s;\r\n\t\tbackground-color:hsl(100, 70%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(3) {\r\n\t\tleft:-7%;\r\n\t\tright:-9%;\r\n\t\ttop:-11%;\r\n\t\tbottom:-4%;\r\n\t\ttransform-origin:47% 52%;\r\n\t\tanimation-delay:-2s;\r\n\t\tbackground-color:hsl(150, 80%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(4) {\r\n\t\tleft:-8%;\r\n\t\tright:-3%;\r\n\t\ttop:-5%;\r\n\t\tbottom:-11%;\r\n\t\ttransform-origin:47% 52%;\r\n\t\tanimation-delay:-2.5s;\r\n\t\tbackground-color:hsl(200, 90%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(5) {\r\n\t\tleft:-10%;\r\n\t\tright:-8%;\r\n\t\ttop:-4%;\r\n\t\tbottom:-9%;\r\n\t\ttransform-origin:48% 51%;\r\n\t\tanimation-delay:-3s;\r\n\t\tbackground-color:hsl(250, 100%, 50%);\r\n\t}\r\n\t\r\n\tspan:nth-child(6) {\r\n\t\tleft:-9%;\r\n\t\tright:-11%;\r\n\t\ttop:-5%;\r\n\t\tbottom:-8%;\r\n\t\ttransform-origin:47% 50%;\r\n\t\tanimation-delay:-3.5s;\r\n\t\tbackground-color:hsl(300, 100%, 50%);\r\n\t}\r\n}\r\n\r\n@keyframes wave {\r\n\tfrom {\r\n\t\ttransform:rotateZ(0deg);\r\n\t}\r\n\tto {\r\n\t\ttransform:rotateZ(360deg);\r\n\t}\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-mix-img.md",
    "content": "## 图片的类抖音 LOGO 晕眩效果\r\n\r\n使用 background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### mix-blend-mode\r\n\r\n除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。\r\n\r\n+ 可以是背景图片与背景图片的混合，\r\n+ 也可以是背景图片和背景色的之间的混合。\r\n\r\n### 关键点\r\n\r\n本例是 `background-blend-mode` | `mix-blend-mode` 是配合使用。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.mix3d {\r\n    margin: 30px auto 0;\r\n    width: 400px;\r\n    height: 400px;\r\n    z-index: 2;\r\n    background: url('https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'), cyan;\r\n    background-blend-mode: lighten;\r\n    background-size: center;\r\n\r\n  &:after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 400px;\r\n    height: 400px;\r\n    z-index: 3;\r\n    background: url('https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'), red;\r\n    background-blend-mode: lighten;\r\n    margin-left: 10px;\r\n    background-size: center;\r\n    mix-blend-mode: darken;\r\n  }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-mix.md",
    "content": "## mix-blend-mode MIX\r\n\r\n使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。\r\n\r\n当然，也可以搭配 filter 中的 blur 和 contrast。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### mix-blend-mode\r\n\r\n除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。\r\n\r\n+ 可以是背景图片与背景图片的混合，\r\n+ 也可以是背景图片和背景色的之间的混合。\r\n\r\n利用混合模式，我们可以尽情发挥想象。\r\n\r\n### Demo MIX 1\r\n\r\nHTML：\r\n\r\n```pug\r\n.container\r\n    .top\r\n        - for (i = 0; i < 60; i++)\r\n            .top_ball\r\n                .ball\r\n    .left\r\n        - for (i = 0; i < 60; i++)\r\n            .top_ball\r\n                .ball\r\n    .right\r\n        - for (i = 0; i < 60; i++)\r\n            .top_ball\r\n                .ball\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 60;\r\n\r\n@function setBorderRadius() {\r\n    $pattern1: random(80) + 20;\r\n    $pattern2: 100 - $pattern1;\r\n    $pattern3: random(80) + 20;\r\n    $pattern4: 100 - $pattern3;\r\n    $pattern5: random(80) + 20;\r\n    $pattern6: 100 - $pattern5;\r\n    $pattern7: random(80) + 20;\r\n    $pattern8: 100 - $pattern7;\r\n    \r\n    @return (#{$pattern3 + 0%} #{$pattern4 + 0%} #{$pattern1 + 0%} #{$pattern2 +\r\n        0%} / #{$pattern5 + 0%} #{$pattern7 + 0%} #{$pattern8 + 0%} #{$pattern6 +\r\n        0%});\r\n}\r\n\r\nhtml, body {\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #000;\r\n}\r\n\r\n.container {\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    filter: blur(3px) contrast(500) hue-rotate(50deg);\r\n    animation: filterChange 10s infinite alternate;\r\n}\r\n\r\n.ball {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 50%;\r\n    height: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: #fff;\r\n    border-radius: setBorderRadius();\r\n    mix-blend-mode: screen;\r\n}\r\n\r\n.top,\r\n.left,\r\n.right{\r\n    position: absolute;\r\n    width: 20vmin;\r\n    height: 20vmin;\r\n    \r\n    @for $i from 1 through $count {\r\n        .top_ball:nth-child(#{$i}) {\r\n            $size: random(15) + 5vmin;\r\n            $opacity: random(100) / 100;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50;\r\n            transform: translate(-50%, -50%);\r\n            width: $size;\r\n            height: $size;\r\n            border-radius: setBorderRadius();\r\n            background: rgba(random(255), random(255), random(255), $opacity);\r\n        }\r\n    }\r\n}\r\n\r\n.top {\r\n    top: 10vh;\r\n    left: 50vw;\r\n    \r\n    @for $i from 1 through $count {\r\n        .top_ball:nth-child(#{$i}) {\r\n            animation: rotate random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;\r\n        }\r\n    }\r\n}\r\n\r\n.left {\r\n    top: 70vh;\r\n    left: 35vw;\r\n    \r\n    @for $i from 1 through $count {\r\n        .top_ball:nth-child(#{$i}) {\r\n            animation: rotateLeft random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;\r\n        }\r\n    }\r\n}\r\n\r\n.right {\r\n    top: 70vh;\r\n    left: 65vw;\r\n    \r\n    @for $i from 1 through $count {\r\n        .top_ball:nth-child(#{$i}) {\r\n            animation: rotateRight random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n@keyframes rotate {\r\n  0% {\r\n    transform: translate(-50%, -50%) rotate(-360deg);\r\n  }\r\n\r\n  100% {\r\n    transform: translate(calc(-50% - 15vw), calc(-50% + 60vh)) rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes rotateLeft {\r\n  0% {\r\n    transform: translate(-50%, -50%) rotate(-360deg);\r\n  }\r\n\r\n  100% {\r\n    transform: translate(calc(-50% + 30vw), -50%) rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes rotateRight {\r\n  0% {\r\n    transform: translate(-50%, -50%) rotate(-360deg);\r\n  }\r\n\r\n  100% {\r\n    transform: translate(calc(-50% - 15vw), calc(-50% - 60vh)) rotate(360deg);\r\n  }\r\n}\r\n\r\n@keyframes filterChange {\r\n    100% {\r\n        filter: blur(15px) contrast(10) hue-rotate(10deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n\r\n\r\n\r\n### Demo MIX2\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml,\r\nbody {\r\n    overflow: hidden;\r\n    // filter: blur(2px) contrast(3) hue-rotate(-20deg);\r\n}\r\n\r\nbody::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, #9c27b0, #ffc107, #fdf5cf, #F44336);\r\n    z-index: 20;\r\n    mix-blend-mode: color-burn;\r\n}\r\n\r\nbody::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -200%;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: -200%;\r\n    background: radial-gradient(circle at 35% 75%, #000, #fff, #333, #ccc, #666, #aaa);\r\n    background-size: 25% 25%;\r\n    animation: rotate 10s infinite linear;\r\n    z-index: 10;\r\n    mix-blend-mode: color-dodge;\r\n}\r\n\r\ndiv {\r\n    width: 200vw;\r\n    height: 200vh;\r\n    background: radial-gradient(circle at 50% 50%, #fff, #333, #ccc, #666, #aaa, #000);\r\n    background-size: 30% 25%;\r\n    animation: move 10s infinite linear alternate;\r\n}\r\n\r\n@keyframes move {\r\n    100% {\r\n        transform: translate(-100vw, 0);\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n\r\n\r\n### Demo MIX3\r\n\r\nHTML：\r\n\r\n```pug\r\n.container\r\n    -for(var i=0; i<8; i++)\r\n        .circle\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$n: 8;\r\n\r\n@function randomColor() {\r\n    @return rgba(random(255), random(255), random(255), 1);\r\n}\r\n\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #000;\r\n}\r\n\r\n.container {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 300px;\r\n    top: 80%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    // mix-blend-mode: color-dodge;\r\n    // background-blend-mode: color-dodge;\r\n}\r\n\r\n.circle {\r\n    position: absolute;\r\n    width: 120px;\r\n    height: 120px;\r\n    border-radius: 50%;\r\n    mix-blend-mode: color-dodge;\r\n    top: 0;\r\n    left: 0;\r\n    will-change: transform;\r\n    background: #fff;\r\n}\r\n\r\n@for $i from 1 through $n {\r\n    .circle:nth-child(#{$i}) {\r\n        background: radial-gradient(randomColor() 15%, randomColor() 30%, randomColor() 45%, randomColor() 60%, randomColor() 75%, randomColor() 90%, randomColor() 100%);\r\n        transform: rotate($i * 45deg) translate3d(0, 0, 0);\r\n        animation: move-#{$i} 15s infinite 2s ease-in-out;\r\n    }\r\n    \r\n    @keyframes move-#{$i} {\r\n        10% { transform: rotate($i * 45deg) translate3d(120px, 0, 0) rotateZ(90deg); }\r\n        20% { transform: rotate($i * 90deg) translate3d(50px, 0, 0) rotateY(90deg); }\r\n        30% { transform: rotate($i * 180deg) translate3d(125px, 0, 0) rotateY(180deg); }\r\n        40% { transform: rotate($i * 135deg) translate3d(50px, 0, 0) rotateX(180deg); }\r\n        50% { transform: rotate($i * 45deg) translate3d(100px, 0, 0) rotateX(180deg); }\r\n        60% { transform: rotate($i * 405deg) translate3d(10px, -20px, 0) rotateX(90deg) rotateY(180deg); }\r\n        70% { transform: rotate($i * -45deg) translate3d(120px, 50px, 0) rotateY(0deg); }\r\n        80% { transform: rotate($i * 90deg) translate3d(50px, 0, 0) rotateY(180deg); }\r\n        90% { transform: rotate($i * 45deg) translate3d(150px, -20px, 0) rotateX(180deg);}\r\n        100% { transform: rotate($i * 45deg) translate3d(0, 0, 0); }\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n\r\n"
  },
  {
    "path": "blendmode/blend-rotate.md",
    "content": "## mix-blend-mode 实现颜色叠加旋转动画\r\n\r\nmix-blend-mode 实现颜色叠加旋转动画。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### 关键点\r\n\r\n这里使用了 `mix-blend-mode: difference` 差值模式，通过查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不产生变化。\r\n\r\n通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。\r\n\r\n看看利用了这个混合模式，运用在一些多图层效果里，可以产生十分绚烂的混合效果：\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模版\r\n.container\r\n    -for (var x = 0; x < 6; x++)\r\n        .box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count : 6;\r\n$each: 360deg / $count;\r\n$distance: 100px;\r\n$boxshadow: 25px;\r\n\r\nbody {\r\n    background-color: #000;\r\n    overflow: hidden;\r\n}\r\n\r\n.container {\r\n    position: absolute;\r\n    width: 200px;\r\n    height: 200px;\r\n    transform: translate(-50%, -50%);\r\n    top: 50%;\r\n    left: 50%;\r\n}\r\n\r\n.box {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 50%;\r\n    border: 1px solid #fff;\r\n    background: rgb(0, 0, 0);\r\n    box-shadow: inset 0 $boxshadow 0 $boxshadow rgb(255, 255, 255);\r\n    mix-blend-mode: difference;\r\n}\r\n\r\n@for $i from 1 through $count {\r\n    $curRotate: $i * $each;\r\n    \r\n    .box:nth-child(#{$i}) {\r\n        transform: rotate($curRotate) translate(0, 50%);\r\n        animation: move#{$i} 10s linear infinite alternate;\r\n    }\r\n    \r\n    @keyframes move#{$i} {\r\n        100% {\r\n            transform: rotate(calc(1080deg + #{$curRotate})) translate($distance);\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-text-glitch.md",
    "content": "## 类抖音 LOGO 文字故障效果\r\n\r\n使用 mix-blend-mode 实现类抖音 LOGO 文字故障效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### 关键点\r\n\r\n+ 利用 `mix-blend-mode: lighten` 混合模式实现两段文字结构重叠部分为白色\r\n+ 利用元素位移完成错位移动动画，形成视觉上的冲击效果\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.text-magic {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(3);\r\n    width: 300px;\r\n    font-size: 36px;\r\n    font-family: Raleway, Verdana, Arial;\r\n    color: transparent;\r\n}\r\n.white {\r\n    position: absolute;\r\n    left: -10px;\r\n    width: 100%;\r\n    height: 1px;\r\n    background: #000;\r\n    z-index: 4;\r\n    animation: whiteMove 10s ease-out infinite;\r\n}\r\n\r\n.text-magic::before {\r\n    content: attr(data-word);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    height: 36px;\r\n    color: red;\r\n    overflow: hidden;\r\n    z-index: 2;\r\n    filter: contrast(200%);\r\n    text-shadow: 1px 0 0 red;\r\n    animation: move 0.95s infinite;\r\n}\r\n\r\n.text-magic::after {\r\n    content: attr(data-word);\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    height: 36px;\r\n    color: rgba(255, 255, 255, 0.8);\r\n    overflow: hidden;\r\n    z-index: 3;\r\n    color: cyan;\r\n    filter: contrast(200%);\r\n    text-shadow: -1px 0 0 cyan;\r\n    mix-blend-mode: lighten;\r\n    animation: move 1.1s infinite 0.2s;\r\n}\r\n\r\n@keyframes whiteMove {\r\n    9% {\r\n        top: 38px;\r\n    }\r\n    14% {\r\n        top: 8px;\r\n    }\r\n    18% {\r\n        top: 42px;\r\n    }\r\n    22% {\r\n        top: 1px;\r\n    }\r\n    32% {\r\n        top: 32px;\r\n    }\r\n    34% {\r\n        top: 12px;\r\n    }\r\n    40% {\r\n        top: 26px;\r\n    }\r\n    43% {\r\n        top: 7px;\r\n    }\r\n    99% {\r\n        top: 30px;\r\n    }\r\n}\r\n\r\n@keyframes move {\r\n    10% {\r\n        top: -0.4px;\r\n        left: -1.1px;\r\n    }\r\n    20% {\r\n        top: 0.4px;\r\n        left: -0.2px;\r\n    }\r\n    30% {\r\n        left: .5px;\r\n    }\r\n    40% {\r\n        top: -0.3px;\r\n        left: -0.7px;\r\n    }\r\n    50% {\r\n        left: 0.2px;\r\n    }\r\n    60% {\r\n        top: 1.8px;\r\n        left: -1.2px;\r\n    }\r\n    70% {\r\n        top: -1px;\r\n        left: 0.1px;\r\n    }\r\n    80% {\r\n        top: -0.4px;\r\n        left: -0.9px;\r\n    }\r\n    90% {\r\n        left: 1.2px;\r\n    }\r\n    100% {\r\n        left: -1.2px;\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-text-shine.md",
    "content": "## 使用 mix-blend-mode 实现光影文字效果\r\n\r\n使用 mix-blend-mode 实现光影文字效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### 关键点\r\n\r\n+ 利用混合模式 `mix-blend-mode: multiply` 生成渐变色的文字。\r\n+ 利用 `mix-blend-mode: color-dodge` 混合模式，给文字加上点缀，实现美妙的光影效果\r\n\r\n详细的可以看看这篇文章：[奇思妙想 CSS 文字动画 ](https://github.com/chokcoco/iCSS/issues/101)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
Magic Text
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n\r\n.g-container {\r\n    margin: auto;\r\n}\r\n\r\np {\r\n    position: relative;\r\n    font-size: 12vw;\r\n    line-height: 16vw;\r\n    // color: #9a9acc;\r\n    overflow: hidden;\r\n    -webkit-text-stroke: 3px #7272a5;\r\n\r\n    &::before {\r\n        content: \" \";\r\n        width: 100%;\r\n        height: 100%;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);\r\n        mix-blend-mode: multiply;\r\n    }\r\n\r\n    &::after {\r\n        content: \"\";\r\n        background: radial-gradient(circle, #fff, #000 50%);\r\n        background-size: 25% 25%;\r\n        position: absolute;\r\n        top: -100%;\r\n        left: -100%;\r\n        right: 0;\r\n        bottom: 0;\r\n        mix-blend-mode: color-dodge;\r\n        animation: mix 8s linear infinite;\r\n    }\r\n}\r\n\r\n@keyframes mix {\r\n    to {\r\n        transform: translate(50%, 50%);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "blendmode/blend-water-wave.md",
    "content": "## CSS WAVE MOVE(惊艳的水波效果)\r\n\r\n使用 mix-blend-mode 实现惊艳的水波效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\r\n\r\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\r\n\r\n### mix-blend-mode\r\n\r\n除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。\r\n\r\n+ 可以是背景图片与背景图片的混合，\r\n+ 也可以是背景图片和背景色的之间的混合。\r\n\r\n### 关键点\r\n\r\n本例是 `background-blend-mode`、`mix-blend-mode` 以及滤镜的配合使用。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$circles: ();\r\n$move: ();\r\n$n: 8;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n    @return ($min + random($max)) * $u;\r\n}\r\n\r\n@for $i from 0 through $n {\r\n    $start-x: randomNum(100, 1) * 1vw;\r\n    $start-y: randomNum(100, 1) * 1vh;\r\n\r\n    $end-x: randomNum(150, -50) * 1vw;\r\n    $end-y: randomNum(150, -50) * 1vh;\r\n\r\n    $circles: append(\r\n        $circles,\r\n        radial-gradient(\r\n                randomNum(75, 25) * 1vw,\r\n                #ddd 0%,\r\n                #666 10%,\r\n                #fff,\r\n                #000,\r\n                #999\r\n            )\r\n            $start-x $start-y,\r\n        comma\r\n    );\r\n\r\n    $move: append($move, $end-x $end-y, comma);\r\n}\r\n\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow:hidden;\r\n}\r\n\r\ndiv {\r\n    position: absolute;\r\n    top:0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom :0;\r\n    background: $circles;\r\n    animation: waveMove 15s infinite linear alternate;\r\n    background-blend-mode: difference;\r\n    filter: blur(2px) hue-rotate(0);\r\n\r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        left: 0;\r\n        background: #03a9f4;\r\n        mix-blend-mode: color-burn;\r\n    }\r\n}\r\n\r\n@keyframes waveMove {\r\n    100% {\r\n        background-position: $move;\r\n        filter: blur(5px) hue-rotate(30deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "blendmode/mix-multi-graidient-bg.md",
    "content": "## mix-blend-mode 叠加多重渐变背景\n\n使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。\n\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。\n\n混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。\n\n### mix-blend-mode\n\n除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。\n\n+ 可以是背景图片与背景图片的混合，\n+ 也可以是背景图片和背景色的之间的混合。\n\n利用混合模式，我们可以尽情发挥想象。\n\n### 多重渐变背景配合多重混合模式\n\n原理大致是这样：\n\n![bg5](https://user-images.githubusercontent.com/8554143/100539321-a3c11c80-3270-11eb-89ec-61aff7012be1.gif)\n\nHTML：\n\n```\n
\n
\n
\n
\n
\n
\n```\n\nSCSS：\n```scss\nhtml, body {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    padding-bottom: 100px;\n}\n\ndiv {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n}\n\ndiv:nth-child(1) {\n    background: linear-gradient(\n        238deg,\n        rgb(130, 255, 0) 0%,\n        rgb(0, 84, 166) 100%\n    );\n    animation: move 12s infinite linear;\n}\n\ndiv:nth-child(2) {\n    background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);\n    mix-blend-mode: overlay;\n    animation: move 6s infinite linear;\n}\n\ndiv:nth-child(3) {\n    background: linear-gradient(238deg, rgb(200, 255, 255) 48%, rgb(3, 0, 151) 100%);\n    mix-blend-mode: multiply;\n    animation: move 6s infinite linear;\n}\n\ndiv:nth-child(4) {\n    background: radial-gradient(\n        100% 85% at 0% 100%,\n        rgb(0, 0, 0) 0%,\n        rgb(0, 131, 255) 50%,\n        rgb(255, 0, 0) 100%\n    );\n    mix-blend-mode: difference;\n    animation: move 6s infinite linear;\n}\n\ndiv:nth-child(5) {\n    background: radial-gradient(\n        100% 225% at 0% 100%,\n        rgb(255, 0, 0) 0%,\n        rgb(66, 255, 0) 100%\n    );\n    mix-blend-mode: difference;\n    animation: move 6s infinite linear;\n}\n\ndiv:nth-child(6) {\n    background: radial-gradient(\n        100% 140% at 100% 0%,\n        rgb(0, 134, 62) 0%,\n        rgb(0, 239, 255) 50%,\n        rgb(0, 113, 186) 100%\n    );\n    mix-blend-mode: overlay;\n    animation: move 6s infinite linear;\n}\n\n@keyframes move {\n    0% {\n        filter: unset;\n    }\n    \n    100% {\n        filter: hue-rotate(360deg);\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "blendmode/mixblend-text-wave-effect.md",
    "content": "## 使用混合模式叠加实现文字波浪效果\n\n使用混合模式叠加实现文字波浪效果\n\n### 关键点\n\n传统的文字镂空展示背景更多的是使用 `background-clip`。\n\n但是本效果文字的背景是动画效果，无法使用 `background-clip` 进行穿透，这里通过混合模式 `mix-blend-mode` 的特性实现。\n\n\nHTML：\n```\n
\n    
TEXT WAVE
\n
\n```\n\nSCSS：\n```scss\nhtml, body {\n    width: 100%;\n    height: 100%;\n    display: flex;\n}\n\n.g-container {\n    margin: auto;\n}\n\np {\n    position: relative;\n    font-size: 120px;\n    font-weight: bold;\n    background: #fff;\n    color: #000;\n    overflow: hidden;\n    \n    &::before,\n    &::after {\n        content: \"\";\n        position: absolute;\n        top: -923px;\n        left: 50%;\n        width: 2000px;\n        height: 2000px;\n        border-radius: 45% 48% 43% 47%;\n        transform: translate(-50%, -50%);\n        background: rgba(3, 169, 244, .85);\n        animation: rotate 10s infinite linear;\n        z-index: 1;\n        mix-blend-mode: lighten;\n    }\n    \n    &::after {\n        border-radius: 43% 47% 44% 48%;\n        animation: rotate 10s infinite .5s linear;\n    }\n}\n\n@keyframes rotate {\n    0% {\n        transform: translate(-50%, -50%) rotate(0);\n    }\n    100% {\n        transform: translate(-50%, -50%) rotate(360deg);\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "border/border-chargin.md",
    "content": "## 活用 border-radius, 实现充电动画\r\n\r\n活用 border-radius, 实现充电动画\r\n\r\n关于本效果的详细信息，可以看看这篇文章：\r\n\r\n[巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75)\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n    
\r\n    
\r\n    
\r\n        
\r\n        
\r\n        
\r\n    
\r\n
\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.container {\r\n    position: relative;\r\n    width: 140px;\r\n    margin: auto;\r\n}\r\n\r\n.header {\r\n    position: absolute;\r\n    width: 26px;\r\n    height: 10px;\r\n    left: 50%;\r\n    top: 0;\r\n    transform: translate(-50%, -10px);\r\n    border-radius: 5px 5px 0 0;\r\n    background: rgba(255, 255, 255, .88);\r\n}\r\n\r\n.battery-copy {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    height: 220px;\r\n    width: 140px;\r\n    border-radius: 15px 15px 5px 5px;\r\n    overflow: hidden;\r\n}\r\n\r\n.battery {\r\n    position: relative;\r\n    height: 220px;\r\n    box-sizing: border-box;\r\n    border-radius: 15px 15px 5px 5px;\r\n    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);\r\n    background: #fff;\r\n    z-index: 1;\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        top: 80%;\r\n        background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);\r\n        border-radius: 0px 0px 5px 5px;\r\n        box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);\r\n        animation: charging 10s linear infinite;\r\n        filter: hue-rotate(90deg);\r\n    }\r\n}\r\n\r\n.g-wave {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 300px;\r\n    background: rgba(255, 255, 255, .8);\r\n    border-radius: 45% 47% 44% 42%;\r\n    bottom: 25px;\r\n    left: 50%;\r\n    transform: translate(-50%, 0);\r\n    z-index: 1;\r\n    animation: move 10s linear infinite;\r\n}\r\n\r\n.g-wave:nth-child(2) {\r\n    border-radius: 38% 46% 43% 47%;\r\n    transform: translate(-50%, 0) rotate(-135deg);\r\n}\r\n\r\n.g-wave:nth-child(3) {\r\n    border-radius: 42% 46% 37% 40%;\r\n    transform: translate(-50%, 0) rotate(135deg);\r\n}\r\n\r\n@keyframes charging {\r\n\t50% {\r\n        box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);\r\n    }\r\n    \r\n    95% {\r\n        top: 5%;\r\n        filter: hue-rotate(0deg);\r\n        border-radius: 0 0 5px 5px;\r\n        box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);\r\n    }\r\n    100% {\r\n        top: 0%;\r\n        filter: hue-rotate(0deg);\r\n        border-radius: 15px 15px 5px 5px;\r\n        box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);\r\n    }\r\n}\r\n\r\n@keyframes move {\r\n    100% {\r\n        transform: translate(-50%, -160px) rotate(720deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-image-animate.md",
    "content": "## 利用 border-image 实现动态边框\r\n\r\n利用 border-image 实现动态边框。\r\n\r\n利用 `border-image`，我们也可以实现一些有意思的边框动画。关于 `border-image`，有一篇非常好的讲解文章 -- [border-image 的正确用法](https://aotu.io/notes/2016/11/02/border-image/index.html)，本文不对基本定义做过多的讲解。\r\n\r\n如果我们有这样一张图：\r\n\r\n![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e1b8128cc4e497ba601f366a0b40b08~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n便可以利用 `border-image-slice` 及 `border-image-repeat` 的特性，得到类似的边框图案：\r\n\r\n```CSS\r\ndiv {\r\n  width: 200px;\r\n  height: 120px;\r\n  border: 24px solid;\r\n  border-image: url(image-url);\r\n  border-image-slice: 32;\r\n  border-image-repeat: round;\r\n}\r\n```\r\n在这个基础上，可以随便改变元素的高宽，如此便能扩展到任意大小的容器边框中：\r\n\r\n![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99c4a2f549be43b19db451cd302db99d~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n[CodePen Demo -- border-image Demo](https://codepen.io/Chokcoco/pen/oNzJeKd)\r\n\r\n接着，在这篇文章 -- [How to Animate a SVG with border-image](https://css-tricks.com/how-to-animate-a-svg-with-border-image/) 中，还讲解了一种利用 `border-image` 的边框动画，非常的酷炫。\r\n\r\n与上面例子不一样的是，我们只需要让我们的图案，动起来，就是我们需要这样一个背景图（掘金不支持 SVG 动图，[原图地址](https://skullctf.com/images/skull-border.svg)）：\r\n\r\n![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/552672644b4f459db0f2e8a4ea1ea209~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n那么，我们也就能得到运动的边框图，代码完全一样，但是，边框是运动的：\r\n\r\n![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce046136a20d436ba1ab8074b02d6372~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-line-animation.md",
    "content": "## 活用 border-radius, 单标签线条动画\r\n\r\n活用 border-radius, 单标签线条动画。\r\n\r\n### 关键点 \r\n\r\n这个效果，其实更多的还是因为 filter 的 blur 和 contrast 滤镜。\r\n\r\n然后通过旋转 `border-radius` 四个角值不同的 div 得到。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml,\r\nbody{\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n}\r\nbody {\r\n    background: #000;\r\n    filter: blur(5px) contrast(20);\r\n    \r\n    &::before {\r\n        position: absolute;\r\n        content: \"\";\r\n        background: #000;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 20vh;\r\n        z-index: 10;\r\n    }\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    width: 30vmin;\r\n    height: 30vmin;\r\n    margin: 30vh auto;\r\n    // border: 1vmin solid #fff; \r\n    border-radius: 46% 42% 47% 44%;\r\n    background: linear-gradient(#fff, #9c27b0);\r\n    transform: scale(15) translate(0, -13vh) rotate(0deg);\r\n    animation: rotate 10s infinite linear alternate;\r\n\r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 99%;\r\n        height: 99%;\r\n        background: #000;\r\n        border-radius: 46% 42% 47% 44%;\r\n        transform: translate(-50%, -50%);\r\n        left: 50%;\r\n        top: 50%;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    100% {\r\n        transform: scale(10) translate(0, -15vh) rotate(360deg);\r\n    }\r\n}\r\n\r\n@keyframes move {\r\n    50% {\r\n        left: 50%;\r\n        right: 49.95%;\r\n    }\r\n    100% {\r\n        left: 90%;\r\n        right: 9.7%;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-line-drop-animation.md",
    "content": "## 使用 border-radius 的变化模拟绳子下坠\r\n\r\n使用 border-radius 的变化模拟绳子下坠。\r\n\r\n### 关键点 \r\n\r\n很有意思的一个小动画，精髓在于使用 border-radius 的变化模拟绳子下坠的感觉。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n    
\r\n    
\r\n        
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    position: relative;\r\n    width: 400px;\r\n    height: 100vh;\r\n    margin: auto;\r\n    // display: flex;\r\n}\r\n\r\n.g-line {\r\n    position: absolute;\r\n    left: 200px;\r\n    width: 100px;\r\n    height: 100px;\r\n    border-radius: 0 0 0 120px;\r\n    border: 1px solid #000;\r\n    border-top: none;\r\n    // border-bottom: none;\r\n    border-right: none;\r\n    transform-origin: 0 0;\r\n    animation: lineMove 6s ease-in-out infinite;\r\n    transform: rotate(-90deg);\r\n    // transform: rotate(15deg);\r\n    // height: 290px;\r\n    // width: 50px;\r\n    // border-radius: 0 0 0 90%;\r\n}\r\n\r\n.g-man {\r\n    position: absolute;\r\n    top: 240px;\r\n    left: 170px;\r\n    width: 1px;\r\n    height: 40px;\r\n    background: #000;\r\n\r\n    opacity: 0;\r\n    animation: manShow 6s infinite ease-in-out;\r\n    \r\n    &:before {\r\n        position: absolute;\r\n        content: \"\";\r\n        top: -100%;\r\n        left: -12px;\r\n        width: 25px;\r\n        height: 40px;\r\n        border-radius: 100%;\r\n        border: 1px solid #333;\r\n        animation: headrotate 6s infinite ease-in-out;\r\n    }\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 110%;\r\n        transform: translate(-50%, 0) rotate(45deg);\r\n        transform-origin: center center;\r\n        width: 30px;\r\n        height: 30px;\r\n        border: 1px solid #333;\r\n        border-right: none;\r\n        border-bottom: none;\r\n        animation: footerShrink 6s infinite ease-in-out;\r\n    }\r\n}\r\n\r\n.g-hand {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-20%, 0);\r\n    width: 50px;\r\n    height: 1px;\r\n    background: #000;\r\n    animation: manhandmove 6s infinite ease-in-out;\r\n}\r\n\r\n.g-ground {\r\n    position: absolute;\r\n    width: 120px;\r\n    height: 1px;\r\n    margin-top: 300px;\r\n    margin-left: 100px;\r\n    // background: #000;\r\n    animation: groundShow 6s infinite;\r\n}\r\n\r\n@keyframes lineMove {\r\n    15% {\r\n        width: 80px;\r\n        height: 270px;\r\n    }\r\n    27% {\r\n        border-radius: 0 0 0 90%;\r\n    }\r\n    35% {\r\n        width: 0px;\r\n        height: 290px;\r\n        border-radius: 0 0 0 90%;\r\n        transform: rotate(20deg);\r\n    }\r\n    45% {\r\n        width: 0px;\r\n        height: 300px;\r\n        border-radius: 0 0 0 0px;\r\n        transform: rotate(-8deg);\r\n    }\r\n    53% {\r\n        width: 0px;\r\n        height: 300px;\r\n        border-radius: 0 0 0 0px;\r\n        transform: rotate(3deg);\r\n    }\r\n    60% {\r\n        width: 0px;\r\n        height: 300px;\r\n        border-radius: 0 0 0 0px;\r\n        transform: rotate(0deg);\r\n    }\r\n    85% {\r\n        width: 0px;\r\n        height: 25px;\r\n        border-radius: 0 0 0 0px;\r\n        transform: rotate(0deg);\r\n    }\r\n    100% {\r\n        width: 0px;\r\n        height: 0px;\r\n        border-radius: 0 0 0 0px;\r\n        transform: rotate(0deg);\r\n    }\r\n        \r\n} \r\n\r\n@keyframes groundShow {\r\n    29% {\r\n        background: opacity;\r\n    }\r\n    30% {\r\n        background: #000;\r\n    }\r\n    31.9% {\r\n        backgroun: #000;\r\n    }\r\n    32% {\r\n        background: opacity;\r\n    }\r\n    33.9% {\r\n        background: opacity;\r\n    }\r\n    34% {\r\n        background: #000;\r\n    }\r\n    60% {\r\n        background: #000;\r\n    }\r\n    61% {\r\n        background: opacity;\r\n    }\r\n}\r\n\r\n@keyframes manShow {\r\n    30% {\r\n        top: 240px;\r\n        opacity: 1;\r\n    }\r\n    60% {\r\n        top: 240px;\r\n    }\r\n    85% {\r\n        top: 0;\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        top: -10px;\r\n        opacity: 0;\r\n    }\r\n}\r\n\r\n@keyframes manhandmove{\r\n    55% {\r\n        transform: translate(-20%, 0) rotate(0deg);\r\n    }\r\n    60% {\r\n        transform: translate(-24%, 0) rotate(-30deg);\r\n    }\r\n    100% {\r\n        ransform: translate(-24%, 0) rotate(-30deg);\r\n    }\r\n}\r\n\r\n@keyframes headrotate {\r\n    55% {\r\n        transform: rotate(0);\r\n    }\r\n    60% {\r\n        transform: rotate(-25deg);\r\n    }\r\n    100% {\r\n        transform: rotate(-20deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-loading.md",
    "content": "## border-radius变换实现loading效果\r\n\r\nborder-radius变换实现loading效果。\r\n\r\n------ \r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    background: #000;\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    width: 35vmin;\r\n    height: 35vmin;\r\n    background: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);\r\n    opacity: .8;\r\n    margin: 25vh auto;\r\n    border-radius: 35%;\r\n    animation: rotateMain 8s linear infinite;\r\n}\r\n\r\ndiv::before {\r\n    position: absolute;\r\n    content: \"\";\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(180deg, #35a0f0 0%, #b233f0 100%);\r\n    opacity: .8;\r\n    box-shadow: 5px 5px 90px rgba(10, 102, 255, 0.5);\r\n    border-radius: 35%;\r\n    animation: rotateMain 8s linear 2s infinite;\r\n}\r\n\r\ndiv::after {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(60deg, #33580f 0%, #b7ee6d 100%);\r\n    opacity: .8;\r\n    box-shadow: 5px 5px 60px rgba(20, 102, 255, 0.3);\r\n    border-radius: 35%;\r\n    animation: rotateMain 8s linear 4s infinite;\r\n    z-index: -1;\r\n}\r\n\r\n@keyframes rotateMain {\r\n    50% {\r\n        transform: rotateZ(180deg);\r\n        border-radius: 50%;\r\n    }\r\n    100% {\r\n        transform: rotateZ(360deg);\r\n        border-radius: 35%;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-outline-symbol-add.md",
    "content": "## 活用 outline 巧妙实现加号符号\r\n\r\n活用 outline 巧妙实现加号符号。\r\n\r\n惊为天人的一个小技巧，也许算是 `outline` 的一个bug，当向内收缩 `outline` 时，神奇的事情发生了。\r\n\r\n关于本效果的详细信息，可以看看这篇文章：\r\n\r\n[你所不知道的 CSS 负值技巧与细节](https://github.com/chokcoco/iCSS/issues/68)\r\n\r\n> 更新于 2021/03/09，该效果于最新版本的 Chrome 已经被修复。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: #fc3;\r\n    box-sizing: border-box;\r\n    margin: auto;\r\n}\r\n\r\ndiv {\r\n    outline: 20px solid #000;\r\n    outline-offset: 10px;\r\n    animation: move 8s infinite linear;\r\n}\r\n\r\n@keyframes move {\r\n    50% {\r\n        outline-offset: -118px;\r\n    }\r\n    100% {\r\n        outline-offset: -118px;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-overflow-btn.md",
    "content": "## 巧用 overflow 及实现边框线条动画\r\n\r\n巧用 overflow 及实现边框线条动画。\r\n\r\n借助 overflow 是实现 CSS 效果非常常见的手段。\r\n\r\nHTML：\r\n\r\n```html\r\n
Hover Me
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    position: relative;\r\n    margin: auto;\r\n    width: 200px;\r\n    height: 100px;\r\n    line-height: 100px;\r\n    text-align: center;\r\n    overflow: hidden;\r\n    \r\n    &::after {\r\n        content: \"Hover Me\";\r\n        position: absolute;\r\n        top: 4px;\r\n        bottom: 4px;\r\n        right: 4px;\r\n        left: 4px;\r\n        line-height: 92px;\r\n        font-size: 24px;\r\n        background: #fff;\r\n        border: 2px solid yellowgreen;\r\n        cursor: pointer;\r\n        color: yellowgreen;\r\n    }\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0px;\r\n        bottom: 0px;\r\n        right: -20px;\r\n        left: 0px;\r\n        background: #fff;\r\n        transform: rotateZ(-90deg) translate(-100%, -100%);\r\n        transform-origin: top left;\r\n        transition: transform .3s;\r\n        transition-timing-function: linear;\r\n    }\r\n    \r\n    &:hover::before {\r\n        transform: rotateZ(0deg) translate(0%, -0%);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-typing.md",
    "content": "## border-color 变换实现文字输入效果\r\n\r\nborder-color 变换实现文字输入效果。\r\n\r\n### 关键点 \r\n\r\n+ 利用 border-right 实现光标闪烁\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```html\r\n
Pure CSS Typing animation.
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    background: black;\r\n    color: #fff;\r\n}\r\n\r\nh1 {\r\n    font: bold 200% Consolas, Monaco, monospace;\r\n    border-right: 0.1em solid;\r\n    width: 16.5em;\r\n    width: 26ch;\r\n    margin: 2em 1em;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    animation: typing 3s steps(26, end),\r\n        cursor-blink 0.3s step-end infinite alternate;\r\n}\r\n\r\n@keyframes typing {\r\n    from {\r\n        width: 0;\r\n    }\r\n}\r\n\r\n@keyframes cursor-blink {\r\n    50% {\r\n        border-color: transparent;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-wave-percent.md",
    "content": "## 活用 border-radius, 实现波浪百分比图\r\n\r\n活用 border-radius, 实现波浪百分比图。\r\n\r\n### 关键点 \r\n\r\n+ 利用 border-radius 生成椭圆\r\n+ 并不是利用旋转的椭圆本身生成波浪效果，而是利用它去切割背景，产生波浪的效果。\r\n\r\n详见：[纯 CSS 实现波浪效果！](https://www.cnblogs.com/coco1s/p/7197662.html)\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.container {\r\n    position: absolute;\r\n    width: 200px;\r\n    height: 200px;\r\n    padding: 5px;\r\n    border: 5px solid rgb(118, 218, 255);\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    border-radius: 50%;\r\n    overflow: hidden;\r\n}\r\n.wave {\r\n    position: relative;\r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: rgb(118, 218, 255);\r\n    border-radius: 50%;\r\n \r\n    &::before,\r\n    &::after{\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 400px;\r\n        height: 400px;\r\n        top: 0;\r\n        left: 50%;\r\n        background-color: rgba(255, 255, 255, .4);\r\n        border-radius: 45%;\r\n        transform: translate(-50%, -70%) rotate(0);\r\n        animation: rotate 6s linear infinite;\r\n        z-index: 10;\r\n    }\r\n    \r\n    &::after {\r\n        border-radius: 47%;\r\n        background-color: rgba(255, 255, 255, .9);\r\n        transform: translate(-50%, -70%) rotate(0);\r\n        animation: rotate 10s linear -5s infinite;\r\n        z-index: 20;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    50% {\r\n        transform: translate(-50%, -73%) rotate(180deg);\r\n    } 100% {\r\n        transform: translate(-50%, -70%) rotate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "border/border-wave.md",
    "content": "## 活用 border-radius, 实现波浪动画\r\n\r\n活用 border-radius, 实现波浪动画。\r\n\r\n### 关键点 \r\n\r\n+ 利用 border-radius 生成椭圆\r\n+ 并不是利用旋转的椭圆本身生成波浪效果，而是利用它去切割背景，产生波浪的效果。\r\n\r\n详见：[纯 CSS 实现波浪效果！](https://www.cnblogs.com/coco1s/p/7197662.html)\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```html\r\n
Pure Css Wave
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    position: relative;\r\n    align-items: center;\r\n    min-height: 100vh;\r\n    background-color: rgb(118, 218, 255);\r\n    overflow: hidden;\r\n\r\n    &:before, &:after {\r\n        content: \"\";\r\n        position: absolute;\r\n        left: 50%;\r\n        min-width: 300vw;\r\n        min-height: 300vw;\r\n        background-color: #fff;\r\n        animation-name: rotate;\r\n        animation-iteration-count: infinite;\r\n        animation-timing-function: linear;\r\n    }\r\n\r\n    &:before {\r\n        bottom: 15vh;\r\n        border-radius: 45%;\r\n        animation-duration: 10s;\r\n    }\r\n\r\n    &:after {\r\n        bottom: 12vh;\r\n        opacity: .5;\r\n        border-radius: 47%;\r\n        animation-duration: 10s;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    0% {\r\n        transform: translate(-50%, 0) rotateZ(0deg);\r\n    }\r\n    50% {\r\n        transform: translate(-50%, -2%) rotateZ(180deg);\r\n    }\r\n    100% {\r\n        transform: translate(-50%, 0%) rotateZ(360deg);\r\n    }\r\n}\r\n\r\nh2 {\r\n    position: relative;\r\n    color: #333;\r\n    z-index: 10;\r\n    text-align: center;\r\n    height: 100vh;\r\n    line-height: 140vh;\r\n    font-size: 8vw;\r\n    text-shadow: 3px 3px 2px #999;\r\n}\r\n\r\n\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "clippath/clippath-border-image.md",
    "content": "## 使用 clip-path 和 border-image 实现圆角渐变边框\r\n\r\n使用 clip-path 和 border-image 实现圆角渐变边框。\r\n\r\n### border-image\r\n\r\n`border-image` 是 CSS 规范 [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds-3/#border-images) (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。\r\n\r\n[border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) \r\n\r\n### clip-path\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。\r\n\r\n[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)\r\n\r\n### 关键点\r\n\r\n\r\n因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过 `clip-path: inset()` 裁剪出带圆角的矩形元素。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n\r\n.border-image-clip-path {\r\n    width: 200px;\r\n    height: 100px;\r\n    margin: auto;\r\n    border: 10px solid;\r\n    border-image: linear-gradient(45deg, gold, deeppink) 1;\r\n    clip-path: inset(0px round 10px);\r\n    animation: huerotate 6s infinite linear;\r\n    filter: hue-rotate(360deg);\r\n}\r\n\r\n@keyframes huerotate {\r\n    0% {\r\n        filter: hue-rotate(0deg);\r\n    }\r\n    100% {\r\n        filter: hue-rorate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "clippath/clippath-border-line-radius.md",
    "content": "## clip-path 实现边框线条动画 2\r\n\r\nclip-path 实现边框线条动画。\r\n\r\n### clip-path\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。\r\n\r\n[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)\r\n\r\n### 关键点\r\n\r\n因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过动画 animation 将几个关键帧绘制出来即可。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
Hello
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    position: relative;\r\n    margin: auto;\r\n    width: 120px;\r\n    line-height: 64px;\r\n    text-align: center;\r\n    color: #fff;\r\n    font-size: 20px;\r\n    border: 2px solid gold;\r\n    border-radius: 10px;\r\n    background: gold;\r\n    transition: all .3s;\r\n    cursor: pointer;\r\n    \r\n    &:hover {\r\n        filter: contrast(1.1);\r\n    }\r\n    \r\n    &:active {\r\n        filter: contrast(0.9);\r\n    }\r\n    \r\n    &::before,\r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: -10px;\r\n        left: -10px;\r\n        right: -10px;\r\n        bottom: -10px;\r\n        border: 2px solid gold;\r\n        transition: all .5s;\r\n        animation: clippath 3s infinite linear;\r\n        border-radius: 10px;\r\n    }\r\n    \r\n    &::after {\r\n        animation: clippath 3s infinite -1.5s linear;\r\n    }\r\n}\r\n\r\n@keyframes clippath {\r\n    0%,\r\n    100% {\r\n        clip-path: inset(0 0 98% 0);\r\n    }\r\n    \r\n    25% {\r\n        clip-path: inset(0 98% 0 0);\r\n    }\r\n    50% {\r\n        clip-path: inset(98% 0 0 0);\r\n    }\r\n    75% {\r\n        clip-path: inset(0 0 0 98%);\r\n    }\r\n}\r\n\r\n.bg::before {\r\n    background: rgba(255, 215, 0, .5);\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "clippath/clippath-border-line.md",
    "content": "## clip-path 实现边框线条动画\r\n\r\nclip-path 实现边框线条动画。\r\n\r\n### clip-path\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。\r\n\r\n[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)\r\n\r\n### 关键点\r\n\r\n因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过动画 animation 将几个关键帧绘制出来即可。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
Hello
\r\n
示意图
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    position: relative;\r\n    margin: auto;\r\n    width: 160px;\r\n    line-height: 160px;\r\n    text-align: center;\r\n    font-size: 24px;\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        border: 2px solid gold;\r\n        transition: all .5s;\r\n        animation: clippath 3s infinite linear;\r\n    }\r\n}\r\n\r\n@keyframes clippath {\r\n    0%,\r\n    100% {\r\n        clip-path: inset(0 0 95% 0);\r\n    }\r\n    \r\n    25% {\r\n        clip-path: inset(0 95% 0 0);\r\n    }\r\n    50% {\r\n        clip-path: inset(95% 0 0 0);\r\n    }\r\n    75% {\r\n        clip-path: inset(0 0 0 95%);\r\n    }\r\n}\r\n\r\n.bg::before {\r\n    background: rgba(255, 215, 0, .5);\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "clippath/clippath-img-glitch.md",
    "content": "## clip-path 实现图片的故障艺术风格动画\r\n\r\nclip-path 实现图片的故障艺术风格动画。\r\n\r\n### clip-path\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。\r\n\r\n[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)\r\n\r\n### 关键点\r\n\r\n+ 使用元素的伪元素复制两份图片副本，再使用 clip-path 对图片进行裁剪并且添加位移、变形、滤镜等等。\r\n+ 动画部分代码太多了，有一半使用了 SASS 的循环函数随机生成\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img: \"xxx\";\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n    @return ($min + random($max)) * $u;\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    width: 658px;\r\n    height: 370px;\r\n    margin: auto;\r\n    background: url($img) no-repeat;\r\n    animation: main-img-hide 20s infinite step-end;\r\n}\r\n\r\ndiv::before,\r\ndiv::after {\r\n    position: absolute;\r\n    width: 658px;\r\n    height: 370px;\r\n    top: 0;\r\n    left: 0;\r\n    background: inherit;\r\n}\r\n\r\ndiv::after {\r\n    content: \"\";\r\n    animation: glitch-one 20s infinite step-end;\r\n}\r\n\r\ndiv::before {\r\n    content: \"\";\r\n    animation: glitch-two 20s infinite 1s step-end;\r\n}\r\n\r\n@keyframes glitch-one {\r\n    @for $i from 20 to 30 {\r\n        #{$i / 2}% {\r\n            left: #{randomNum(200, -100)}px;\r\n            clip-path: inset(#{randomNum(150, 30)}px 0 #{randomNum(150, 30)}px);\r\n        }\r\n    }\r\n\r\n    15.5% {\r\n        clip-path: inset(10px 0 320px);\r\n        left: -20px;\r\n    }\r\n    16% {\r\n        clip-path: inset(10px 0 320px);\r\n        left: -10px;\r\n        opacity: 0;\r\n    }\r\n    45% {\r\n        opacity: 0.5;\r\n        left: -20px;\r\n        filter: hue-rotate(90deg) saturate(1.3);\r\n    }\r\n    45.5% {\r\n        left: 0px;\r\n        filter: invert(1);\r\n    }\r\n\r\n    46% {\r\n        clip-path: inset(150px 0 160px);\r\n        left: 15%;\r\n    }\r\n    46.5% {\r\n        clip-path: inset(20px 0 200px);\r\n        left: -10%;\r\n        transform: scale(1.1);\r\n    }\r\n    47% {\r\n        clip-path: inset(240px 0 20px);\r\n        left: -11%;\r\n        transform: scale(1.2);\r\n    }\r\n    47.5% {\r\n        clip-path: inset(20 0 20px);\r\n        left: 13%;\r\n        transform: scale(1.3);\r\n        filter: invert(0);\r\n    }\r\n    48% {\r\n        clip-path: inset(120 0 120px);\r\n        left: 15%;\r\n        transform: scale(1.1);\r\n    }\r\n    48.5% {\r\n        clip-path: inset(260px 0 10px);\r\n        left: -11%;\r\n        transform: scale(1.2);\r\n        filter: none;\r\n    }\r\n    49% {\r\n        clip-path: inset(5px 0 350px);\r\n        left: 11%;\r\n        transform: scale(1.3);\r\n    }\r\n    49.5% {\r\n        clip-path: inset(105px 0 210px);\r\n        left: 0%;\r\n        transform: scale(1.1);\r\n    }\r\n    50% {\r\n        clip-path: inset(175px 0 160px);\r\n        left: -11%;\r\n    }\r\n    50.5% {\r\n        clip-path: inset(95px 0 230px);\r\n        left: -14%;\r\n        transform: scale(1.2);\r\n    }\r\n    51% {\r\n        clip-path: inset(235px 0 12px);\r\n        left: -14%;\r\n    }\r\n    51.5% {\r\n        clip-path: inset(350px 0 7px);\r\n        left: -14%;\r\n    }\r\n    52% {\r\n        clip-path: inset(320px 0 27px);\r\n        left: -12%;\r\n        transform: scale(1.1);\r\n    }\r\n    52.5% {\r\n        clip-path: inset(190px 0 127px);\r\n        left: -11%;\r\n        transform: scale(1.3);\r\n        filter: hue-rotate(90deg) saturate(1.3);\r\n    }\r\n    54% {\r\n        clip-path: inset(20px 0 20px);\r\n        left: 12%;\r\n        transform: scale(1.1);\r\n        filter: none;\r\n    }\r\n    54% {\r\n        background-image: none;\r\n    }\r\n}\r\n\r\n@keyframes glitch-two {\r\n    @for $i from 40 to 50 {\r\n        #{$i / 2}% {\r\n            left: #{randomNum(200, -100)}px;\r\n            clip-path: inset(#{randomNum(180)}px 0 #{randomNum(180)}px);\r\n        }\r\n    }\r\n\r\n    25.5% {\r\n        clip-path: inset(10px 0 320px);\r\n        left: -20px;\r\n    }\r\n    26% {\r\n        clip-path: inset(10px 0 320px);\r\n        left: -10px;\r\n        opacity: 0;\r\n    }\r\n    45% {\r\n        opacity: 0.3;\r\n        left: -20px;\r\n        filter: hue-rotate(45deg) saturate(1.1);\r\n    }\r\n    45.5% {\r\n        left: 0px;\r\n        filter: invert(1.2);\r\n    }\r\n\r\n    46% {\r\n        clip-path: inset(50px 0 260px);\r\n        left: -12%;\r\n    }\r\n    46.5% {\r\n        clip-path: inset(120px 0 100px);\r\n        left: 8%;\r\n        transform: scale(1.2);\r\n    }\r\n    47% {\r\n        clip-path: inset(40px 0 300px);\r\n        left: 8%;\r\n        transform: scale(1.3);\r\n    }\r\n    47.5% {\r\n        clip-path: inset(220 0 70px);\r\n        left: -9%;\r\n        transform: scale(1.1);\r\n        filter: invert(1.1);\r\n    }\r\n    48% {\r\n        clip-path: inset(240px 0 120px);\r\n        left: 11%;\r\n        transform: scale(1.2);\r\n    }\r\n    48.5% {\r\n        clip-path: inset(0px 0 310px);\r\n        left: -12%;\r\n        transform: scale(1.2);\r\n        filter: none;\r\n    }\r\n    49% {\r\n        clip-path: inset(255px 0 50px);\r\n        left: 11%;\r\n        transform: scale(1.3);\r\n    }\r\n    49.5% {\r\n        clip-path: inset(10px 0 240px);\r\n        left: 6%;\r\n        transform: scale(1.1);\r\n    }\r\n    50% {\r\n        clip-path: inset(275px 0 90px);\r\n        left: -12%;\r\n    }\r\n    50.5% {\r\n        clip-path: inset(195px 0 90px);\r\n        left: 14%;\r\n        transform: scale(1.4);\r\n    }\r\n    51% {\r\n        clip-path: inset(35px 0 282px);\r\n        left: -14%;\r\n    }\r\n    51.5% {\r\n        clip-path: inset(350px 0 7px);\r\n        left: 14%;\r\n    }\r\n    52% {\r\n        clip-path: inset(20px 0 270px);\r\n        left: -12%;\r\n        transform: scale(1.1);\r\n    }\r\n    52.5% {\r\n        clip-path: inset(90px 0 227px);\r\n        left: -11%;\r\n        transform: scale(1.3);\r\n        filter: hue-rotate(150deg) saturate(1.3);\r\n    }\r\n    54% {\r\n        clip-path: inset(220px 0 100px);\r\n        left: 12%;\r\n        transform: scale(1.1);\r\n        filter: none;\r\n    }\r\n    54% {\r\n        background-image: none;\r\n    }\r\n}\r\n\r\n@keyframes main-img-hide {\r\n    5% {\r\n        filter: invert(1);\r\n    }\r\n    5.2% {\r\n        filter: none;\r\n    }\r\n    10% {\r\n        opacity: 0.5;\r\n        filter: grayscale(1);\r\n    }\r\n    11% {\r\n        filter: none;\r\n        opacity: 1;\r\n    }\r\n    45% {\r\n        opacity: 0.5;\r\n        filter: grayscale(1);\r\n    }\r\n    46% {\r\n        filter: none;\r\n        opacity: 1;\r\n    }\r\n    53.5% {\r\n        opacity: 0.5;\r\n        filter: grayscale(1);\r\n    }\r\n    54% {\r\n        filter: none;\r\n        opacity: 1;\r\n    }\r\n    54.5% {\r\n        opacity: 0.5;\r\n        filter: hue-rotate(30deg);\r\n    }\r\n    55% {\r\n        filter: none;\r\n    }\r\n    55.5% {\r\n        background-image: none;\r\n        filter: none;\r\n        opacity: 1;\r\n    }\r\n    56% {\r\n        background-image: url($img);\r\n        opacity: 0.5;\r\n    }\r\n    56.5% {\r\n        background-image: none;\r\n    }\r\n    57% {\r\n        background-image: url($img);\r\n        opacity: 0.8;\r\n    }\r\n    57.5% {\r\n        opacity: 0.3;\r\n    }\r\n    58% {\r\n        background-image: none;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "clippath/clippath-word-crack.md",
    "content": "## clip-path 实现文字断裂效果\r\n\r\nclip-path 实现文字断裂效果。\r\n\r\n### clip-path\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。\r\n\r\n[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)\r\n\r\n### 关键点\r\n\r\n核心思想是：使用元素的伪元素复制两份文本，再使用 clip-path 将元素本身、元素的两个伪元素分为3部分，分别对这3部分进行控制。\r\n\r\n因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以分别控制 3 个部分进行动画。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    Text Crack\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody, html\r\n{\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    background-color: #000;\r\n    overflow: hidden;\r\n    font-family: sans-serif;\r\n}\r\n\r\nh1 {\r\n    position: relative;\r\n    margin: auto;\r\n    font-size: calc(20px + 5vw);\r\n    font-weight: bold;\r\n    color: #fff;\r\n    letter-spacing: 0.02em;\r\n    text-transform: uppercase;\r\n    text-shadow: 0 0 10px blue;\r\n    user-select: none;\r\n    white-space: nowrap;\r\n    filter: blur(0.007em);\r\n    animation: shake 2.5s linear forwards;\r\n}\r\n\r\nh1 span {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    transform: translate(-50%, -50%);\r\n    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);\r\n}\r\n\r\nh1::before,\r\nh1::after {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n}\r\n\r\nh1::before {\r\n    animation: crack1 2.5s linear forwards;\r\n    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);\r\n}\r\n\r\nh1::after {\r\n    animation: crack2 2.5s linear forwards;\r\n    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);\r\n}\r\n\r\n@keyframes shake {\r\n    5%,\r\n    15%,\r\n    25%,\r\n    35%,\r\n    55%,\r\n    65%,\r\n    75%,\r\n    95% {\r\n        filter: blur(0.018em);\r\n        transform: translateY(0.018em) rotate(0deg);\r\n    }\r\n\r\n    10%,\r\n    30%,\r\n    40%,\r\n    50%,\r\n    70%,\r\n    80%,\r\n    90% {\r\n        filter: blur(0.01em);\r\n        transform: translateY(-0.018em) rotate(0deg);\r\n    }\r\n\r\n    20%,\r\n    60% {\r\n        filter: blur(0.03em);\r\n        transform: translate(-0.018em, 0.018em) rotate(0deg);\r\n    }\r\n\r\n    45%,\r\n    85% {\r\n        filter: blur(0.03em);\r\n        transform: translate(0.018em, -0.018em) rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        filter: blur(0.007em);\r\n        transform: translate(0) rotate(-0.5deg);\r\n    }\r\n}\r\n\r\n@keyframes crack1 {\r\n    0%,\r\n    95% {\r\n        transform: translate(-50%, -50%);\r\n    }\r\n\r\n    100% {\r\n        transform: translate(-51%, -48%);\r\n    }\r\n}\r\n\r\n@keyframes crack2 {\r\n    0%,\r\n    95% {\r\n        transform: translate(-50%, -50%);\r\n    }\r\n\r\n    100% {\r\n        transform: translate(-49%, -53%);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "cssdoodle/bg-artist-clippath.md",
    "content": "## CSS-Doodle clip-path & drop-shadow 实现图案艺术\n\nCSS-Doodle clip-path & drop-shadow 实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\n\n具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)\n\nHTML：\n\n```HTML\n
\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      clip-path: @shape(\n        split: 100;\n        r: cos(@r(3, 10)t);\n      );\n    }\n\n    filter: drop-shadow(-1px 0px 5px hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    ));\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      clip-path: @shape(\n        split: 200;\n        r: cos(10t);\n      );\n    }\n\n    filter: drop-shadow(-1px 0px 5px hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    ));\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      clip-path: @shape(\n        split: 240;\n        scale: .34;\n        origin: 0 -1.6;\n        degree: 180;\n        s: sqrt.abs.cos(t) / (sin(t) + 1.6);\n        r: 2 + (s - 2) * sin(t);\n      );\n    }\n\n    filter: drop-shadow(-1px 0px 5px hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    ));\n  \n\n  \n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 120deg));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      clip-path: @shape(\n        split: 300;\n        scale: .7;\n        r: cos.cos.cos.cos.cos(7t) ^ cos(7t);\n      );\n    }\n\n    filter: drop-shadow(2px 0px 10px hsla(\n      calc(calc(100 - @index()) * 2.55), \n      calc(@index() * 1%), \n      50%,\n      calc(@index() / 100)\n    ));\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 90deg));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      @shape: bicorn;\n    }\n\n    filter: drop-shadow(2px 0px 5px hsla(\n      calc(calc(100 - @index()) * 2.55), \n      calc(@index() * 1%), \n      50%,\n      calc(@index() / 100)\n    ));\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 90deg));\n\n    :after {\n      content: '';\n      background: var(--doodle-bg);\n      @size: 100%;\n      @shape: bud @r(5, 10);\n    }\n\n    filter: drop-shadow(0px 0px @r(1, 10)px hsla(\n      calc(calc(10 - @index()) * 2.55), \n      calc(@index() * 1%), \n      50%,\n      calc(@index() / 100)\n    ));\n  \n  
\n    CSS Art with\n    \n      <css-doodle />\n    \n  
\n
\n```\n\nSCSS：\n```scss\n:root {\n  --body-bg: #0a0c27;\n  --doodle-bg: #000;\n  --col: 6;\n  --gap: 2px;\n  --width: 95vw;\n  --size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n  background: var(--body-bg);\n}\n\nbody {\n  display: flex;\n  align-items: center;\n}\n\nmain {\n  display: grid;\n  width: var(--width);\n  margin: auto;\n  background: var(--body-bg); \n  padding: calc(50vw - var(--width) / 2) 0;\n  grid-template-columns: repeat(var(--col), 1fr);\n  grid-gap: var(--gap);\n  position: relative;\n  padding-bottom: 5em;\n}\n\np {\n  position: absolute;\n  bottom: 2em;\n  margin: 0;\n  width: 100%;\n  text-align: center;\n  font-family: cursive;\n  font-size: .9em;\n  line-height: 1;\n  color: rgba(74, 78, 113, .5);\n}\np a {\n  text-decoration: none;\n  color: rgba(128, 53, 101, .8);\n  background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;\n  background-size: 2px 1px;\n}\np a:hover {\n  color: rgba(128, 53, 101, 1);\n}\n\ncss-doodle {\n  overflow: hidden;\n  width: var(--size);\n  height: var(--size);\n  background: var(--doodle-bg);\n}\n```\n\n效果如下（点击下图可以刷新效果）：\n\n"
  },
  {
    "path": "cssdoodle/bg-artist-pattern-2.md",
    "content": "## CSS-Doodle 利用不同图形线条实现图案艺术 2\n\nCSS-Doodle 利用不同图形线条实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\n\n具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)\n\nHTML：\n\n```HTML\n
\n  \n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 60deg));\n\n    background: rgba(0, 0, 0, calc((@index * 0.01)));\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.01)));\n    }\n  \n\n  \n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 60deg));\n\n    background: #000;\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.01)));\n    }\n  \n\n  \n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 60deg));\n\n    background: rgba(255, 255, 255, calc((@index * 0.01)));\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.01)));\n    }\n  \n\n  \n    :doodle {\n      @grid: 1x100 / 100vmin;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 45deg));\n\n    background: rgba(0, 0, 0, calc((@index * 0.01)));\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.01)));\n    }\n  \n\n  \n    :doodle {\n      @grid: 1x100 / 100vmin;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 89deg));\n\n    background: rgba(0, 0, 0, calc((@index * 0.01)));\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.01)));\n    }\n  \n\n  \n    :doodle {\n      @grid: 1x100 / 100vmin;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * 44.6deg));\n\n    background: rgba(0, 0, 0, calc((@index * 0.008)));\n    @even {\n      background: rgba(255, 255, 255, calc((@index * 0.005)));\n    }\n  \n  
\n    CSS Art with\n    \n      <css-doodle />\n    \n  
\n
\n```\n\nSCSS：\n```scss\n:root {\n  --body-bg: #0a0c27;\n  --doodle-bg: #000;\n  --col: 6;\n  --gap: 2px;\n  --width: 95vw;\n  --size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n  background: var(--body-bg);\n}\n\nbody {\n  display: flex;\n  align-items: center;\n}\n\nmain {\n  display: grid;\n  width: var(--width);\n  margin: auto;\n  background: var(--body-bg); \n  padding: calc(50vw - var(--width) / 2) 0;\n  grid-template-columns: repeat(var(--col), 1fr);\n  grid-gap: var(--gap);\n  position: relative;\n  padding-bottom: 5em;\n}\n\np {\n  position: absolute;\n  bottom: 2em;\n  margin: 0;\n  width: 100%;\n  text-align: center;\n  font-family: cursive;\n  font-size: .9em;\n  line-height: 1;\n  color: rgba(74, 78, 113, .5);\n}\np a {\n  text-decoration: none;\n  color: rgba(128, 53, 101, .8);\n  background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;\n  background-size: 2px 1px;\n}\np a:hover {\n  color: rgba(128, 53, 101, 1);\n}\n\ncss-doodle {\n  overflow: hidden;\n  width: var(--size);\n  height: var(--size);\n  background: var(--doodle-bg);\n}\n```\n\n效果如下（点击下图可以刷新效果）：\n\n"
  },
  {
    "path": "cssdoodle/bg-artist-pattern.md",
    "content": "## CSS-Doodle 利用不同图形线条实现图案艺术\n\nCSS-Doodle 利用不同图形线条实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\n\n具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)\n\nHTML：\n\n```HTML\n
\n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    border-top: 2px solid hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n      --borderWidth: @r(1,4)px;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    :after {\n      content: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';\n      overflow: hidden;\n      color: transparent;\n      text-decoration-line: underline;\n      text-decoration-style: wavy;\n      text-decoration-color: hsla(\n        calc(calc(100 - @index()) * 2.55), \n        80%, \n        65%,\n        calc(@index() / 100)\n      );\n      @size: 100%;\n    }\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n      --borderWidth: @r(1,4)px;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    border-top: var(--borderWidth) dashed hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n    border-bottom: var(--borderWidth) dashed hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    border-top: 5px dashed hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n    border-radius: 50%;\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n      --borderWidth: @r(2,4)px;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    border-top: var(--borderWidth) dashed hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n    border-radius: @r(10%, 50%);\n  \n\n  \n    :doodle {\n      --rotate: @r(0, 360)deg;\n      --borderWidth: @r(2,4)px;\n    }\n    @place-cell: center;\n    @size: calc(100% - @calc(@index() - 1) * 1%);\n    transform: rotate(calc(@index() * var(--rotate)));\n    \n    border:  var(--borderWidth) solid hsla(\n      calc(calc(100 - @index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n    border-top: var(--borderWidth) dashed hsla(\n      calc(calc(@index()) * 2.55), \n      50%, \n      50%,\n      calc(@index() / 100)\n    );\n    border-bottom: var(--borderWidth) dashed hsla(\n      calc(calc(@index()) * 2.55), \n      80%, \n      65%,\n      calc(@index() / 100)\n    );\n    border-radius: @r(10%, 50%);\n  \n  
\n    CSS Art with\n    \n      <css-doodle />\n    \n  
\n
\n```\n\nSCSS：\n```scss\n:root {\n  --body-bg: #0a0c27;\n  --doodle-bg: #000;\n  --col: 6;\n  --gap: 2px;\n  --width: 95vw;\n  --size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n  background: var(--body-bg);\n}\n\nbody {\n  display: flex;\n  align-items: center;\n}\n\nmain {\n  display: grid;\n  width: var(--width);\n  margin: auto;\n  background: var(--body-bg); \n  padding: calc(50vw - var(--width) / 2) 0;\n  grid-template-columns: repeat(var(--col), 1fr);\n  grid-gap: var(--gap);\n  position: relative;\n  padding-bottom: 5em;\n}\n\np {\n  position: absolute;\n  bottom: 2em;\n  margin: 0;\n  width: 100%;\n  text-align: center;\n  font-family: cursive;\n  font-size: .9em;\n  line-height: 1;\n  color: rgba(74, 78, 113, .5);\n}\np a {\n  text-decoration: none;\n  color: rgba(128, 53, 101, .8);\n  background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;\n  background-size: 2px 1px;\n}\np a:hover {\n  color: rgba(128, 53, 101, 1);\n}\n\ncss-doodle {\n  overflow: hidden;\n  width: var(--size);\n  height: var(--size);\n  background: var(--doodle-bg);\n}\n```\n\n效果如下（点击下图可以刷新效果）：\n\n"
  },
  {
    "path": "cssdoodle/bg-mask-composite.md",
    "content": "## CSS-Doodle background + mask 实现万花筒效果\n\nCSS-Doodle background + mask 实现万花筒效果\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\n\nHTML：\n\n```HTML\n\n\n\n  :doodle {\n    @grid: 2 x 5;\n\n  }\n  \n  width: 40vmin;\n  height: 40vmin;\n  \n  --colorMain: rgb(@r(255), @r(255), @r(255));\n  --colorSub: rgb(@r(255), @r(255), @r(255));\n\n  position: relative;\n  box-sizing: border-box;\n  margin: 1vmin;\n  border-radius: 50%;\n  border:2px solid #666;\n  box-shadow: 1px 1px 4px 2px #222;\n  // background: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));\n  background: var(--colorMain);\n  overflow: hidden;\n    \n  :after {\n    --angle: calc(360deg / @index);\n    --start: @r(8, 30)px;\n    --end: @r(24, 80)px;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub), var(--colorMain));\n    mask: @m(@index, (\n      repeating-linear-gradient(calc(var(--angle) * @n), #fff 0, #fff var(--start), transparent var(--start), transparent var(--end))\n    ));\n    -webkit-mask-composite: xor;\n  }\n\n\n```\n\nSCSS：\n```scss\nhtml, body {\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background-color: #333;\n}\n```\n\n效果如下（点击下图可以刷新效果）：\n\n"
  },
  {
    "path": "cssdoodle/bg-mask-mix.md",
    "content": "## CSS-Doodle background + mask 实现条纹艺术背景\n\nCSS-Doodle background + mask 实现条纹艺术背景\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\n\nHTML：\n\n```HTML\n\n\n\n\t:doodle {\n\t\t@grid: 3 x 1;\n\t}\n\n\twidth: 40vmin;\n\theight: 80vmin;\n\n\t--colorMain: rgb(@r(255), @r(255), @r(255));\n\t--colorSub: rgb(@r(255), @r(255), @r(255));\n\t--colorThird: rgb(@r(255), @r(255), @r(255));\n\n\tposition: relative;\n\tbox-sizing: border-box;\n\tmargin: 1vmin;\n\tborder-radius: 5vmin;\n\tborder:2px solid #666;\n\tbox-shadow: 1px 1px 4px 2px #222;\n\tbackground: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));\n\toverflow: hidden;\n\n\t@nth(2) {\n\t\tbackground: linear-gradient(var(--colorMain), var(--colorSub));\n\t}\n\t\n\t@nth(3) {\n\t\tbackground: unset;\n\t}\n\n\t:before {\n\t\t--size: @r(2, 15)px;\n\t\t--maskSize: @r(10, 75)px;\n\t\t--percentage: @r(10, 30)%;\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub));\n\t\tmask: \n\t\t\tlinear-gradient(135deg, #fff var(--size), transparent 0),\n\t\t\tlinear-gradient(-135deg, #fff var(--size), transparent 0),\n\t\t\tlinear-gradient(45deg, #fff var(--size), transparent 0),\n\t\t\tlinear-gradient(-45deg, #fff var(--size), transparent 0),\n\t\t\tlinear-gradient(135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(-135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(-45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(-135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),\n\t\t\tlinear-gradient(-45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0);\n\t\tmask-size: var(--maskSize) var(--maskSize);\n\t\tmask-position: 50% 50%;\n\t\t-webkit-mask-composite: xor;\n\t}\n\n```\n\nSCSS：\n```scss\nhtml, body {\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background-color: #333;\n}\n```\n\n效果如下（点击下图可以刷新效果）：\n\n"
  },
  {
    "path": "cssdoodle/fish-seaweed.md",
    "content": "## CSS-Doodle fish 🐟 & seaweed 🍀\r\n\r\nCSS-Doodle fish 🐟 & seaweed 🍀\r\n\r\n### CSS-doodle\r\n\r\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\r\n\r\nHTML：\r\n\r\n```HTML\r\n\r\n\r\n\r\n    :doodle { @grid: 1x35 / 100vw 100vh; } \r\n    \r\n    :container { \r\n        background: linear-gradient(to top, rgba(0, 0, 0, .1) 0%, #aaf9ff 70%, transparent 100%); \r\n        margin: 0 auto;\r\n        background-repeat: no-repeat; \r\n        max-width: 740px;\r\n        overflow: hidden;\r\n        transform-style: preserve-3d;\r\n        perspective: 15px;\r\n        animation: move 15s infinite linear alternate;\r\n    } \r\n    \r\n    @nth(2n) {\r\n        --hslh: @pick(90, 100);\r\n        --hsls: @pick(80%, 85%, 90%);\r\n        --color: hsla(var(--hslh), var(--hsls), 50%, 0.9);\r\n        position: relative; \r\n        width: 1vw;\r\n        height: 2vw;\r\n        border-radius: 50%;\r\n        background: var(--color);\r\n        top: @r(20, 70)vh;\r\n        transform: scale(@r(0.5, 1.3));\r\n        --n: @p(-1, 1, 1.2, -1.2);\r\n        --c: var(--color);\r\n        box-shadow: @m100(\r\n            calc(@sin(@n() / 10) * 2.4vmin * @var(--n))\r\n            calc(@n() * 1vmin) 0\r\n            hsla(var(--hslh), var(--hsls), calc(50% - 1% * 0.2 * @n()), calc(0.9 - 0.011 * @n()))\r\n        );\r\n        transform: translateZ(@r(-5)px);\r\n        z-index: 10;\r\n    }\r\n    \r\n    @nth(4n + 1) {\r\n        position: relative;\r\n        width: 4.5vh;\r\n        height: 4vh;\r\n        --c: @pick(#bb2d00, #222, #6644a3);\r\n        background: var(--c);\r\n        top: @r(15, 90)vh;\r\n        @shape: @pick(fish, whale);\r\n        transform: translate3d(@r(-200, 200)%, @r(-200, 200)%, @r(-20)px) scale(@r(.8, 1.4)) rotate(calc(@pick(0deg, 180deg)));\r\n        z-index: @pick(5, 15);\r\n        opacity: .8;\r\n        animation: forward .8s infinite @r(0, 1.2)s alternate linear;\r\n    \r\n        ::before {\r\n            position: absolute;\r\n            content: \"\";\r\n            width: .5vh;\r\n            height: .5vh;\r\n            background: #fff;\r\n            border-radius: 50%;\r\n            left: 70%;\r\n            top: 45%;\r\n            z-index: 2;\r\n        }\r\n    }\r\n    \r\n    @nth(7, 27) {\r\n        width: .6vw;\r\n        height: .6vw;\r\n        border-radius: 50%;\r\n        background: rgba(255, 255, 255, .3);\r\n        top: @r(10, 50)%;\r\n        box-shadow:\r\n            0 -8vh .3vh 1.2px rgba(255, 255, 255, .4),\r\n            0 -18vh .3vh 1.6px rgba(255, 255, 255, .5),\r\n            0 -30vh .3vh 2px rgba(255, 255, 255, .6);\r\n        z-index: 1;\r\n        transform: translate(@r(-1000, 1000)%, 0);\r\n    }\r\n\r\n    @keyframes move {\r\n        100% {\r\n            perspective: 40px;\r\n        }\r\n    }\r\n    \r\n    @keyframes forward {\r\n        0% {\r\n            left: 0;\r\n        }\r\n        100% {\r\n            left: -3px;\r\n        }\r\n    }\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml, body {\r\n  margin: 0;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n效果如下（点击下图可以刷新效果）：\r\n\r\n"
  },
  {
    "path": "cssdoodle/spotlight.md",
    "content": "## CSS-Doodle spotlight🎆\r\n\r\nCSS-Doodle spotlight🎆\r\n\r\n### CSS-doodle\r\n\r\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\r\n\r\nHTML：\r\n\r\n```HTML\r\n\r\n\r\n\r\n    :doodle { \r\n        @grid: 1x26 / 100vw 100vh; \r\n        background: #000;\r\n    } \r\n    \r\n    :container { \r\n        max-width: 70vw;\r\n        margin: 0 auto;\r\n    } \r\n    \r\n\r\n    @even {\r\n        position: relative;\r\n        height: 70%;\r\n        top: 10%;\r\n        background: linear-gradient(to top, rgba(@r(50, 255), @r(255, 255), 255, 1), rgba(255, 255, 255, .1) 80%);\r\n        transform: perspective(@r(7, 35)vmin) rotateX(-@r(15, 45)deg) skewX(@r(-60, 60)deg);\r\n        transform-origin: center bottom;\r\n        box-shadow: 0 0 2vmin .1vmin rgba(255, 255, 255, .7);\r\n        opacity: 0;\r\n        animation: fadeIn 7s infinite calc(@index() * 0.03s);\r\n    }\r\n    \r\n    @keyframes fadeIn {\r\n        1% {\r\n            opacity: 1;\r\n        }\r\n        10% {\r\n            opacity: 1;\r\n            filter: hue-rotate(0);\r\n        }\r\n        50% {\r\n            opacity: 1;\r\n            transform: perspective(@r(10, 35)vmin) rotateX(-@r(15, 45)deg) skewX(0deg);\r\n            filter: hue-rotate(360deg);\r\n        }\r\n        50.1% {\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml, body {\r\n  margin: 0;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n```\r\n\r\n效果如下（点击下图可以刷新效果）：\r\n\r\n"
  },
  {
    "path": "cssdoodle/sunset.md",
    "content": "## 夏日城市夕阳图🌇\r\n\r\n夏日城市夕阳图🌇\r\n\r\n### CSS-doodle\r\n\r\n[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。\r\n\r\nHTML：\r\n\r\n```HTML\r\n\r\n\r\n\r\n    :doodle { @grid: 1x35 / 100vw 100vh; } \r\n    :container { \r\n        background: #ffcabb; \r\n        background: linear-gradient(to top, #ffcabb 50%, #de93b6 100%); \r\n        background-repeat: no-repeat; \r\n    } \r\n    \r\n    position: relative; \r\n    align-self: end;\r\n    height: @rand(10%, 75%);\r\n    background: linear-gradient(to\r\n    top, #725392 0%, #b764ac 100%);\r\n    margin-left: @rand(0.1, 1)vw;\r\n    z-index: 1;\r\n    transform: scaleX(@rand(.8, 1.9));\r\n    \r\n    ::before { \r\n        content: \"\"; \r\n        position: absolute; \r\n        bottom: 0; \r\n        left: @rand(-20, 12)px; \r\n        right: @rand(-20, 12)px; \r\n        top: @rand(15, 55)%; \r\n        background: linear-gradient(to\r\n        top, #352864 0%, #4d4280 100%); \r\n        z-index: 3; \r\n    } \r\n    \r\n    ::after { \r\n        content: \"\";\r\n        position: absolute;\r\n        width: .1vw;\r\n        height: .12vw;\r\n        top: @rand(15, 20)%;\r\n        left: @rand(10, 20)%;\r\n        z-index: 5;\r\n        box-shadow: \r\n            @rand(0.1, 2.1)vw @rand(0, 10)vh .5px rgba(246, 212, 0, .7),\r\n            @rand(0.1, 2.1)vw @rand(10, 15)vh .5px rgba(246, 212, 0, .6), \r\n            @rand(0.1, 2.1)vw @rand(15, 22)vh .5px rgba(246, 212, 0, .7), \r\n            @rand(0.1, 2.1)vw @rand(22, 30)vh .5px rgba(246, 212, 0, .6), \r\n            @rand(0.1, 2.1)vw @rand(30, 40)vh .5px rgba(246, 212, 0, .8);\r\n    }\r\n\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml, body {\r\n  margin: 0;\r\n  height: 100%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\nbody::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 10vmin;\r\n    right: 20vmin;\r\n    background: #fff;\r\n    width: 8vh;\r\n    height: 8vh;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 20px 2px rgba(253, 220, 189, 0.9);\r\n}\r\n```\r\n\r\n效果如下（点击下图可以刷新效果）：\r\n\r\n"
  },
  {
    "path": "filter/filter-ball-loading.md",
    "content": "## 小球穿梭放大loading动画\r\n\r\n小球穿梭放大loading动画。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: contrast()： 调整图像的对比度。\r\n\r\n但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
\r\n    
\r\n    
\r\n    
\r\n    
\r\n    
\r\n    
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 7;\r\n\r\nbody,\r\nhtml {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    filter: blur(4px) contrast(8);\r\n    background: #000;\r\n    display: flex;\r\n}\r\n\r\n.g-container {\r\n    margin: auto;\r\n    position: relative;\r\n    width: 10vmin;\r\n    height: 10vmin;\r\n}\r\n\r\n.g-ball,\r\n.g-first{\r\n    position: absolute;\r\n    top:0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: #fff;\r\n    border-radius: 50%;\r\n    transform: translate(-700%, 0);\r\n    opacity: 0;\r\n    // animation: move 3s infinite linear;\r\n}\r\n\r\n@for $i from 0 through $count { \r\n    .g-ball:nth-child(#{$i}) {\r\n        animation: move 3.5s infinite #{$i * 0.2 + 0.1}s linear;\r\n    }\r\n}\r\n\r\n.g-first {\r\n    animation: scaleMove 3.5s infinite linear;\r\n}\r\n\r\n@keyframes move {\r\n    25% {\r\n        opacity: 1;\r\n        transform: translate(-1vw, 0);\r\n    }\r\n    50% {\r\n        opacity: 1;\r\n        transform: translate(1vw, 0);\r\n    }\r\n    75%,\r\n    100% {\r\n        opacity: 0;\r\n        transform: translate(700%, 0);\r\n    }\r\n}\r\n\r\n\r\n@keyframes scaleMove {\r\n    25% {\r\n        opacity: 1;\r\n        transform: translate(-1vw, 0);\r\n    }\r\n    35% {\r\n        opacity: 1;\r\n        transform: scale(1);\r\n    }\r\n    70% {\r\n        opacity: 1;\r\n        transform: translate(1vw, 0) scale(2);\r\n    }\r\n    90%,\r\n    100% {\r\n        opacity: 0;\r\n        transform: translate(1vw, 0) scale(1);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-ball-through.md",
    "content": "## 小球穿梭效果\r\n\r\n小球穿梭效果。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: contrast()： 调整图像的对比度。\r\n\r\n但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    background: #000;\r\n    filter: blur(5px) contrast(10);\r\n    overflow: hidden;\r\n}\r\n\r\n.ball {\r\n    position: absolute;\r\n    left: 0; \r\n    top: 40vh;\r\n    height: 20vh;\r\n    width: 20vh;\r\n    border-radius: 50%;\r\n    background: #fff;\r\n    animation: move 10s infinite;\r\n    \r\n}\r\n\r\n.g-wall {\r\n    position: absolute;\r\n    left: 20%; \r\n    top: 30vh;\r\n    height: 40vh;\r\n    width: 15vh;\r\n    border-radius: 50%;\r\n    background: rgba(0, 0, 0, .5);\r\n}\r\n\r\n.g-wall:nth-child(2) {\r\n    left: 40%; \r\n    border-radius: 50%;\r\n}\r\n\r\n.g-wall:nth-child(3) {\r\n    left: 60%; \r\n    border-radius: 50%;\r\n}\r\n\r\n.g-wall:nth-child(4) {\r\n    left: 80%; \r\n    border-radius: 50%;\r\n}\r\n\r\n@keyframes move {\r\n    \r\n    20% {\r\n        transform: translate(20vw, 0);\r\n        background: #ddd;\r\n    }\r\n    \r\n    100% {\r\n        transform: translate(100vw, 0);\r\n        background: #ddd;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-blur-constrast.md",
    "content": "## 使用 filter:blur | filter:constrast 生成特殊融合效果\r\n\r\n使用 filter:blur | filter:constrast 生成特殊融合效果。\r\n\r\n### 关键点 \r\n\r\n本例子中两个单独的滤镜拿出来，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: contrast()： 调整图像的对比度。\r\n\r\n但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模版\r\n.container\r\n    .bg\r\n    - for(var i=0; i<1; i++)\r\n        .box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.container {\r\n    position: absolute;\r\n    width: 300px;\r\n    height: 300px;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    background: #fff;\r\n    border-radius: 50%;\r\n    filter: contrast(20);\r\n}\r\n\r\n.bg {\r\n    position: absolute;\r\n    width: 200px;\r\n    height: 200px;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    border-radius: 50%;\r\n    background-color: #000;\r\n    filter: contrast(20) blur(6px);\r\n    \r\n}\r\n\r\n.box {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 80px;\r\n    transform: translate(-50%, -50%) rotate(0);\r\n    background-color: blue;\r\n    border-radius: 50%;\r\n    width: 100px;\r\n    height: 100px;\r\n    filter: unset;\r\n    filter: contrast(20) blur(6px);\r\n    animation: turn 5s linear infinite;\r\n    transform-origin: -100% center;\r\n}\r\n\r\n@keyframes turn {\r\n    100% {\r\n        transform: translate(-50%, -50%) rotate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-fire-2.md",
    "content": "## 使用 filter:blur | filter:constrast 生成火焰效果2\r\n\r\n使用 filter:blur | filter:constrast 生成火焰效果。\r\n\r\n### 关键点 \r\n\r\n本 Demo 详细信息可阅读：\r\n\r\n[CSS 火焰？不在话下](https://github.com/chokcoco/iCSS/issues/62)\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模版\r\ndiv.g-candle\r\n    div.g-body\r\n    div.g-fire-box\r\n        div.g-fire\r\n            -for(var i=0; i<200; i++)\r\n                div.g-ball   \r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 200;\r\n\r\nhtml, body{\r\n    height: 100%;\r\n    background: #000;\r\n    overflow: hidden;\r\n    // filter: blur(1px) contrast(5);\r\n}\r\n\r\n.g-candle {\r\n    position: aboslute;\r\n    width: 400px;\r\n    margin: 0 auto;\r\n    height: 400px;\r\n}\r\n\r\n.g-body {\r\n    position: relative;\r\n    width: 100px;\r\n    height: 300px;\r\n    margin: 280px auto;\r\n    // border: 1px solid #fff;\r\n    background: linear-gradient(230deg, #ca9800, #573903, black 70%);\r\n    z-index: 1;\r\n    \r\n    &::before {\r\n        position: absolute;\r\n        content: \"\";\r\n        width: 100px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        // border: 1px solid #fff;\r\n        box-sizing: border-box;\r\n        top: -20px;\r\n        background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);\r\n    }\r\n    \r\n    &::after {\r\n        position: absolute;\r\n        content: \"\";\r\n        width: 4px;\r\n        height: 48px;\r\n        background: #fff;\r\n        left: 50%;\r\n        top: -22px;\r\n        transform: translate(-50%, -50%);\r\n        border-radius: 50% 50% 0 0;\r\n        background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 60%, #fff);\r\n        opacity: .7;\r\n        filter: blur(1px);\r\n    }\r\n}\r\n\r\n.g-fire-box {\r\n    position: absolute;\r\n    top: 97px;\r\n    left: 50%;\r\n    width: 80px;\r\n    height: 200px;\r\n    transform: translate(-50%, -50%);\r\n    filter: blur(2px) contrast(20);\r\n}\r\n\r\n.g-fire {\r\n    position: absolute;\r\n    top: 30px;\r\n    left: 50%;\r\n    border-radius: 45%;\r\n    box-sizing: border-box;\r\n    border: 120px solid #000;\r\n    border-bottom: 120px solid transparent;\r\n    transform: translate(-50%, 0) scaleX(.45);\r\n    background-color: #761b00;\r\n    // filter: blur(20px) contrast(30);\r\n\r\n}\r\n\r\n.g-ball {\r\n    position: absolute;\r\n    top: 60px;\r\n    transform: translate(0, 0);\r\n    background: #fa8763;\r\n    border-radius: 50%;\r\n    z-index: -1;\r\n    mix-blend-mode: screen;\r\n}\r\n\r\n@for $i from 0 to $count {\r\n    .g-ball:nth-child(#{$i}) {\r\n        $width: #{random(50)}px;\r\n        \r\n        width: $width;\r\n        height: $width;\r\n        left: calc(#{(random(70))}px - 55px);\r\n    }\r\n    \r\n    .g-ball:nth-child(#{$i}) {\r\n        animation: movetop 1s linear -#{random(3000)/1000}s infinite;\r\n    }\r\n}\r\n\r\n@keyframes movetop {\r\n    0% {\r\n        transform: translate(0, 0);\r\n    }\r\n    20% {\r\n        transform: translate(0, 0);\r\n    }\r\n    87.7% {\r\n        transform: translate(0, -170px);\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        transform: translate(0, -170px);\r\n        opacity: 0;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-fire.md",
    "content": "## 使用 filter:blur | filter:constrast 生成火焰效果\r\n\r\n使用 filter:blur | filter:constrast 生成火焰效果。\r\n\r\n### 关键点 \r\n\r\n本例子中两个单独的滤镜拿出来，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: contrast()： 调整图像的对比度。\r\n\r\n但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。\r\n\r\n----\r\n\r\n先来看看火焰的核心代码：\r\n\r\n```css\r\n.fire {\r\n    width: 0;\r\n    height: 0;\r\n    border-radius: 45%;\r\n    box-sizing: border-box;\r\n    border: 100px solid #000;\r\n    border-bottom: 100pxsolid transparent;\r\n    background-color: #b5932f;\r\n    transform: scaleX(.4);\r\n    filter: blur(20px) contrast(30);\r\n}\r\n```\r\n\r\n分解一下过程：\r\n\r\n![](https://user-images.githubusercontent.com/8554143/30368522-f746afba-98a3-11e7-93b8-92e2e2c1c622.png)\r\n\r\n接下来，我们只需要在火焰 .fire 这个 div 内部，用大量的黑色圆形，由下至上，无规律穿过火焰即可。由于滤镜的融合效果，火焰效果随之产生。\r\n\r\n这里为了方便理解，我把背景色切换成白色，火焰动画原理一看即懂：\r\n\r\n![](https://user-images.githubusercontent.com/8554143/30369622-bc2b3e6a-98a7-11e7-9422-170d6151c46c.gif)\r\n\r\n-----\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模版\r\n.g-container\r\n    .g-fire\r\n        - for (var j = 1; j <=40; j++)\r\n            .g-dot\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$douCount: 40;\r\n$animationTime: 2;\r\n$delayTime: 3;\r\n\r\n@function randomNum($max, $min: 0) {\r\n\t@return ($min + random($max));\r\n}\r\n\r\nbody {\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\n\r\n:root {\r\n    --fireWidth: 115px;\r\n    --fireHeight: 200px;\r\n    --dotSize: 24px;\r\n    --fireColor: #b5932f;\r\n    // --fireColor: #008eff;\r\n    // --fireColor: #ff9900;\r\n    \r\n}\r\n\r\n.g-container {\r\n    position: relative;\r\n    width: 384px;\r\n    height: 300px;\r\n    margin: 0 auto;\r\n    background-color: #000;\r\n}\r\n\r\n.g-fire {\r\n    position: absolute;\r\n    width: 0;\r\n    height: 0;\r\n    bottom: 100px;\r\n    left: 50%;\r\n    border-radius: 45%;\r\n    box-sizing: border-box;\r\n    border: 200px solid #000;\r\n    border-bottom: 200px solid transparent;\r\n    transform: translate(-50%, 0) scaleX(.4);\r\n    background-color: var(--fireColor);\r\n    filter: blur(20px) contrast(30);\r\n}\r\n\r\n.g-dot {\r\n    position: absolute;\r\n    bottom: -210px;\r\n    left: 0;\r\n    width: var(--dotSize);\r\n    height: var(--dotSize);\r\n    background: #000;\r\n    border-radius: 50%;\r\n}\r\n\r\n@for $i from 1 to $douCount + 1 {\r\n    .g-dot:nth-child(#{$i}) {\r\n        bottom: -#{randomNum(120, 240)}px;\r\n        left: #{randomNum(300, -160)}px;\r\n        animation: move #{randomNum($animationTime * 13, 7) / 10}s infinite #{randomNum($delayTime * 20) / 10}s linear;\r\n    }\r\n}\r\n\r\n@keyframes move {\r\n    100% {\r\n        transform: translate3d(0, -350px, 0);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-ghost.md",
    "content": "## 单标签纯CSS实现幽灵动画\r\n\r\n单标签纯CSS实现幽灵动画。\r\n\r\n### 关键点 \r\n\r\n\r\n+ filter: blur() | filter: contrast() 的配合使用\r\n+ 单标签的限制，所以多重渐变也发挥了很重要的作用\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    background: #000;\r\n    filter: blur(3px) contrast(10);\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    width: 80px;\r\n    height: 120px;\r\n    background: \r\n        radial-gradient(circle at 60px 40px, #000, #000 7px, transparent 7px),\r\n        radial-gradient(circle at 40px 40px, #000, #000 7px, transparent 7px),\r\n        radial-gradient(circle at 50px 50px, #fff, #fff);\r\n    background-size: 100% 100%; \r\n    background-repeat: no-repeat;\r\n    margin: auto;\r\n    border-radius: 40px 40px 60px 20px;\r\n    transform: skewX(-10deg);\r\n    animation: moveMain 2s infinite ease-out;\r\n}\r\n\r\ndiv::before,\r\ndiv::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    background: #fff;\r\n    border-radius: 50%;\r\n}\r\n\r\ndiv::before {\r\n    width: 20px;\r\n    height: 20px;\r\n    top: 50px;\r\n    left: -10px;\r\n    box-shadow: 0 0 0 1px #fff;\r\n    animation: move 2s infinite ease-in;\r\n}\r\n\r\ndiv::after {\r\n    width: 30px;\r\n    height: 25px;\r\n    top: 95px;\r\n    left: -10px;\r\n    box-shadow: 0 0 0 1px #fff;\r\n    animation: move2 2s infinite ease-in;\r\n}\r\n\r\n@keyframes move {\r\n    80%,\r\n    100% {\r\n        box-shadow: -60px 0 0 .5px rgba(255, 255, 255, .5);\r\n    }\r\n}\r\n\r\n@keyframes move2 {\r\n    80%,\r\n    100% {\r\n        box-shadow: -100px 0 0 .5px rgba(255, 255, 255, .2);\r\n    }\r\n}\r\n\r\n@keyframes moveMain {\r\n    42% {\r\n        transform: skewX(-10deg) translate(40px, 0);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-hue-rotate-color.md",
    "content": "## 使用 hue-rotate 实现渐变背景动画\r\n\r\n使用 hue-rotate 实现渐变背景动画。\r\n\r\n这种方法应该是实现渐变背景动画的比较好的方法。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    width: 300px;\r\n    height: 180px;\r\n    margin: auto;\r\n    background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);\r\n    animation: hueRotate 10s infinite alternate;\r\n}\r\n\r\n@keyframes hueRotate {\r\n    100% {\r\n        filter: hue-rotate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-mix.md",
    "content": "## 滤镜及混合模式混搭特效\r\n\r\n使用滤镜及混合模式混搭特效。\r\n\r\n本例子中用到了：\r\n\r\n+ filter: contrast()\r\n+ filter: brightness() \r\n+ filter: blur()\r\n+ background-blend-mode: multiply\r\n+ mix-blend-mode: saturation\r\n\r\n-------\r\n\r\nHTML：\r\n```html\r\n
\r\n    \r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.halftone {\r\n  position: absolute;\r\n  width: 20vw;\r\n  height: 20vw;\r\n  background: white;\r\n  top: 50%;\r\n  left: 50%;\r\n  filter: contrast(100000%);\r\n  transform: translate(-50%, -50%);\r\n  overflow: hidden; // 电脑性能好的，关掉这个属性\r\n}\r\n\r\n.halftone > img {\r\n  width: 100%;\r\n  height: 100%;\r\n  filter: brightness(0.5) blur(4px);\r\n  animation: 3s animation-filter infinite alternate;\r\n}\r\n\r\n.halftone::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -100%;\r\n  left: -100%;\r\n  right: -100%;\r\n  bottom: -100%;\r\n  background-blend-mode: multiply;\r\n  background: radial-gradient(8px 8px, cyan, white),\r\n        radial-gradient(8px 8px, magenta, white),\r\n        radial-gradient(8px 8px, yellow, white);\r\n  background-size: 8px 8px;\r\n  background-position: 0 -3px, -2px 0, 2px 0;\r\n  mix-blend-mode: saturation;\r\n  pointer-events: none;\r\n  transform: rotate(11.25deg);\r\n  transition: 1s ease-in-out transform;\r\n  z-index: 1;\r\n  animation: 3s animation-overlay infinite alternate;\r\n}\r\n\r\n@keyframes animation-overlay {\r\n  0% {\r\n    transform: rotate(450deg) scale(15);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(-90deg);\r\n  }\r\n}\r\n\r\n@keyframes animation-filter {\r\n  0% {\r\n    filter: brightness(0.5) blur(40px);\r\n  }\r\n\r\n  100% {\r\n    filter: brightness(0.5) blur(4px);\r\n  }\r\n}\r\n\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "filter/filter-polygon-shadow.md",
    "content": "## 使用 drop-shadow 配合 clip-path 生成规则阴影\r\n\r\n使用 drop-shadow 配合 clip-path 生成规则阴影。\r\n\r\n### 关键点 \r\n\r\n使用 clip-path 可以很好的使用 SVG 的一些属性，绘制各种图形。绘制出来的图形如果希望带阴影，`box-shadow` 肯定是不行的，这个时候，`drop-shadow()` 则非常好用。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
领取红包
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.btn-wrap {\r\n    margin: auto;\r\n    filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5));\r\n}\r\n\r\n\r\n.btn{\r\n    content: \"\";\r\n    width: 200px;\r\n    height: 64px;\r\n    line-height: 64px;\r\n    text-align: center;\r\n    background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5bf);\r\n    color: #be9451;\r\n    font-size: 24px;\r\n    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);\r\n    // box-shadow: inset 0px 0px 1px 1px #fff;\r\n}\r\n\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/filter-shadow.md",
    "content": "## 使用 filter:blur 生成彩色阴影\r\n\r\n通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成的阴影通常只能是单色或者同色系的。\r\n\r\n但是通过巧妙的利用 filter: blur 模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。\r\n\r\n### 关键点\r\n\r\n原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。\r\n\r\n嗯，最重要的就是这一句 `filter: blur(10px) brightness(80%) opacity(.8)`。\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n    
bulr shadow
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505822443&di=941986df9c6514d5d43eaba4aa938347&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.qqtouxiang8.net%2Fuploads%2Fallimg%2Fc150313%2F142623130563050-922006.jpg';\r\n\r\n@import url(https://fonts.googleapis.com/css?family=Righteous);\r\n    \r\n.container {\r\n    width: 200px;\r\n    margin: 20px auto;\r\n}\r\n\r\n.avator {\r\n    position: relative;\r\n    width: 200px;\r\n    height: 200px;\r\n    border-radius: 50%;\r\n    background: url($img) no-repeat center center;\r\n    background-size: 100% 100%;\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 10%;\r\n        left: 0%;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: inherit;\r\n        background-size: 100% 100%;\r\n        border-radius: 50%;\r\n        transform: scale(.95);\r\n        filter: blur(10px) brightness(80%) opacity(.8);\r\n        z-index: -1;\r\n    }\r\n}\r\n\r\np {\r\n    margin-top: 30px;\r\n    text-align: center;\r\n    font-size: 28px;\r\n    font-family: Righteous;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "filter/filter-single-div-water-drop.md",
    "content": "## 单标签实现滴水效果\r\n\r\n单标签实现滴水效果。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: contrast()： 调整图像的对比度。\r\n\r\n但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。\r\n\r\n----\r\n\r\nHTML：\r\n\r\n```HTML\r\n
MAGICCSS
\r\n```\r\n\r\nSCSS：\r\n```scss\r\ndiv {\r\n    position: relative;\r\n    width: 640px;\r\n    height: 106px;\r\n    color: #fff;\r\n    font-size: 124px;\r\n    text-align: center;\r\n    margin: 100px auto;\r\n    border-bottom: 10px solid #fff;\r\n    transform: skewY(5deg);\r\n    \r\n    &::before,\r\n    &::after {\r\n        position: absolute;\r\n        content: \"\";\r\n        bottom : -20px;\r\n        left: 0;\r\n        width: 10px;\r\n        height: 20px;\r\n        border-radius: 50%;\r\n        background: #fff;\r\n        transform: translate(0, 0);\r\n        animation: move 7.5s ease-in-out infinite;\r\n    }\r\n    \r\n    &::after {\r\n        animation: move 7.5s ease-in-out 1s infinite;\r\n    }\r\n}\r\n\r\n@keyframes move {\r\n    80% {        \r\n        bottom : -30px;\r\n        transform: translate(623px, 0);\r\n    } 93% {\r\n        transform: translate(623px, 3px);\r\n        opacity: 1;\r\n    }100% {\r\n        transform: translate(623px, 150px);\r\n        opacity: 0;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "filter/use-filter-blur-enhance-text-3d-effect.md",
    "content": "## 利用 filter:blur 增强文字的 3D 效果\n\n利用 filter:blur 增强文字的 3D 效果\n\n### 关键点\n\n1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 `:nth-child` 和 `:nth-last-child` 高效编写 CSS 代码\n2. 每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 `animation-delay` 让一半的动画延迟一半进行\n3. 可以再配合 `text-shadow` 让文字更立体点\n\n\nHTML：\n```\n
\n    C\n    S\n    S\n    3\n    D\n    E\n    F\n    F\n    E\n    C\n    T\n
\n```\n\nSCSS：\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');\n\n$count: 12;\n\nbody, html {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    font-family: 'Lobster', cursive;\n    perspective: 160vmin;\n    overflow: hidden;\n}\n\np {\n    margin: auto;\n    font-size: 24vmin;\n    white-space: nowrap;\n    transform-style: preserve-3d;\n    animation: rotate 10s infinite ease-in-out;\n    \n    span {\n        text-shadow: \n            1px 1px 0 rgba(0, 0, 0, .9),\n            2px 2px 0 rgba(0, 0, 0, .7),\n            3px 3px 0 rgba(0, 0, 0, .5),\n            4px 4px 0 rgba(0, 0, 0, .3),\n            5px 5px 0 rgba(0, 0, 0, .1);\n        \n        &:nth-child(-n+5) { \n            animation-delay: -5s; \n        }\n    }\n}\n\n@for $i from 1 to 7 {\n    span:nth-child(#{$i}), \n\tspan:nth-last-child(#{$i}) {\n        animation: filterBlur-#{$i} 10s infinite ease-in-out;\n\t}\n    @keyframes filterBlur-#{$i} {\n        0% {\n            filter: blur(0px) contrast(5);\n        }\n        50% {\n            filter: blur(#{7 - $i}px) contrast(1);\n        }\n        100% {\n            filter: blur(0px) contrast(5);\n        }\n    }\n}\n@keyframes rotate {\n    0% {\n        transform: rotateY(-45deg);\n    }\n    50% {\n        transform: rotateY(45deg);\n    }\n    100% {\n        transform: rotateY(-45deg);\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "generate-content.js",
    "content": "const fs = require('fs');\nconst path = require(\"path\");\nconst filePath = path.resolve(__dirname, './');\n\nconst ONLINE_URL = 'https://csscoco.com/inspiration/#/.';\nconst FILE_NAME = './_sidebar.md';\nconst FILE_NAME_README = './README.md';\nconst FILE_NAME_HASHMAP = './hashmap.js';\nconst FILE_NAME_ARR = [];\nconst HASHMAP = {};\nconst regExp = /([^\\u4E00-\\u9FA50-9a-zA-Z_])/g;\n\nconst contentName = {\n  'layout': '布局（Layout）',\n  'shadow': '阴影(box-shadow、drop-shadow)',\n  'pesudo': '伪类/伪元素',\n  'filter': '滤镜(fliter)',\n  'border': '边框',\n  'background': '背景/渐变(linear-gradient/radial-gradient/conic-gradient)',\n  'blendmode': '混合模式（mix-blend-mode/background-blend-mode)',\n  '3d': '3D',\n  'animation': '动画/过渡(transition/animation)',\n  'clippath': 'clip-path',\n  'text': '文本类',\n  'others': '综合',\n  'cssdoodle': 'CSS-Doodle',\n  'svg': 'svg',\n}\n\nasync function readFile(filePath) {\n  await initWrite();\n\n  Object.keys(contentName).forEach(async item => {\n    const curPath = path.resolve(filePath, item);\n    const newContent = `\\n## ${contentName[item]} \\n\\n`;\n    writeFile(FILE_NAME, newContent);\n    writeFile(FILE_NAME_README, newContent);\n\n    const files =  fs.readdirSync(curPath)\n\n    files.forEach(async name => {\n      const contentData = fs.readFileSync(`${curPath}/${name}`,'utf-8');\n      const title = contentData.split('\\n')[0].split('## ')[1].replace(/[\\r\\n]/g,\"\");\n      const appendContent = `+ [${title}](./${item}/${name}) \\n`;\n      const appendContentReadme = `+ [${title}](${ONLINE_URL}/${item}/${name}) \\n`;\n      const id = name.split('.')[0];\n\n      FILE_NAME_ARR.push({\n        id,\n        name: title.replace(regExp, '')\n      });\n      HASHMAP[id] = true;\n\n      writeFile(FILE_NAME, appendContent);\n      writeFile(FILE_NAME_README, appendContentReadme);\n    });\n\n    console.log('HASHMAP', HASHMAP);\n\n    writeFileHashMap();\n  });\n}\n\nasync function writeFile(name, data) {\n  fs.appendFileSync(name, data,  function(err) {\n    if (err) {\n        return console.error(err);\n    }\n\n    console.log(\"数据写入成功！\");\n });\n}\n\nasync function initWrite() {\n  const initData = `# CSS-Inspiration \\n\\n + [引言](./init.md) \\n\\n`;\n  const initDataReadme = `![logo2.png](./images/logo2.png)\\n\\n这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\\n\\n## 在线预览\\n\\n[Online Pages](${ONLINE_URL}/init/)\\n`;\n\n  fs.writeFileSync(FILE_NAME, initData, function(err) {\n\n    if (err) {\n        return console.error(err);\n    }\n\n    console.log(\"初始化数据写入成功！\");\n  });\n\n  fs.writeFileSync(FILE_NAME_README, initDataReadme, function(err) {\n\n    if (err) {\n        return console.error(err);\n    }\n\n    console.log(\"初始化数据写入成功！\");\n  });\n}\n\nasync function writeFileHashMap() {\n  const data = `module.exports = ${JSON.stringify(HASHMAP)}`;\n\n  fs.writeFileSync(FILE_NAME_HASHMAP, data, function(err) {\n\n    if (err) {\n        return console.error(err);\n    }\n\n    console.log(\"HASHMAP写入成功！\");\n  });\n}\n\nreadFile(filePath);\n"
  },
  {
    "path": "hashmap.js",
    "content": "module.exports = {\"best-way-to-center-element\":true,\"double-wing-layout\":true,\"grid-clip-path-gta5-poster\":true,\"holy-grail-layout-flex\":true,\"holy-grail-layout\":true,\"masonry-layout-colum\":true,\"masonry-layout-flex\":true,\"masonry-layout-grid\":true,\"multi-column-contour\":true,\"multi-row-or-column\":true,\"single-column-isometric\":true,\"use-margin-auto-to-simulate-align-self\":true,\"use-margin-auto-to-simulate-space-between\":true,\"circle-loading\":true,\"inscribed-angle\":true,\"neon-effect-3d-text\":true,\"neon-shadow-light\":true,\"opacity-wrap\":true,\"projection-long-shadow\":true,\"projection-one-sided-shadow\":true,\"projection-solid-shadow\":true,\"projection-word-solid-shadow-ii\":true,\"projection-word-solid-shadow\":true,\"relief-style-btn\":true,\"shadow-ani-ii\":true,\"shadow-ani\":true,\"single-div-douyin-logo\":true,\"single-div-fork\":true,\"single-div-ie-logo\":true,\"pesudo-animation-control-hover\":true,\"pesudo-animation-control-target\":true,\"pesudo-animation-control\":true,\"pesudo-boundary-judge\":true,\"pesudo-bubble\":true,\"pesudo-focus-checked\":true,\"pesudo-focus-target\":true,\"pesudo-focus-within-placeholder-shown\":true,\"pesudo-focus-within\":true,\"pesudo-juejin\":true,\"pesudo-loading-content\":true,\"pesudo-loading-line\":true,\"pesudo-not-2\":true,\"pesudo-not\":true,\"filter-ball-loading\":true,\"filter-ball-through\":true,\"filter-blur-constrast\":true,\"filter-fire-2\":true,\"filter-fire\":true,\"filter-ghost\":true,\"filter-hue-rotate-color\":true,\"filter-mix\":true,\"filter-polygon-shadow\":true,\"filter-shadow\":true,\"filter-single-div-water-drop\":true,\"use-filter-blur-enhance-text-3d-effect\":true,\"border-chargin\":true,\"border-image-animate\":true,\"border-line-animation\":true,\"border-line-drop-animation\":true,\"border-loading\":true,\"border-outline-symbol-add\":true,\"border-overflow-btn\":true,\"border-typing\":true,\"border-wave-percent\":true,\"border-wave\":true,\"background-css-property-tv-noise\":true,\"bg-attachment-frosted-glass\":true,\"bg-attachment-scroll-shadow\":true,\"bg-clip-text-shine\":true,\"bg-conic-border-effect\":true,\"bg-conic-border-light-effect\":true,\"bg-conic-circle-loading\":true,\"bg-conic-gradient-animation\":true,\"bg-conic-gradient-repeating-pattern\":true,\"bg-linear-arrow\":true,\"bg-linear-border-effect\":true,\"bg-linear-gradient-maze\":true,\"bg-linear-inscribed\":true,\"bg-linear-progress-bar\":true,\"bg-linear-scroll-indicator\":true,\"bg-linear-stripe\":true,\"bg-linear-underline\":true,\"bg-mask-image\":true,\"bg-mask-text-show\":true,\"bg-mask-transition\":true,\"bg-radial-btn-click-bubble\":true,\"bg-radial-coupon\":true,\"bg-radial-focus\":true,\"bg-wave-border\":true,\"bg-wave-underline\":true,\"bg-wave\":true,\"css-property-variable-bg-change-animation\":true,\"repeating-radial-background-artistic-bg\":true,\"blend-color-set\":true,\"blend-douyin-logo\":true,\"blend-loading\":true,\"blend-mix-img\":true,\"blend-mix\":true,\"blend-rotate\":true,\"blend-text-glitch\":true,\"blend-text-shine\":true,\"blend-water-wave\":true,\"mix-multi-graidient-bg\":true,\"mixblend-text-wave-effect\":true,\"3d-ball\":true,\"3d-count-number\":true,\"3d-css-galaxy-shuttle\":true,\"3d-cuber-progress-bar\":true,\"3d-cuber-roll-404\":true,\"3d-glowing-rotate-text\":true,\"3d-infinite-maze\":true,\"3d-line\":true,\"3d-maze\":true,\"3d-rope-swing\":true,\"3d-spiral-number\":true,\"3d-text-debut\":true,\"parallax-3d-1\":true,\"parallax-3d-2\":true,\"parallax-3d-translate\":true,\"animation-button-border\":true,\"animation-curve\":true,\"animation-delay-control-text-effect\":true,\"animation-delay-wavy\":true,\"animation-direction\":true,\"animation-play-state\":true,\"animation-rotate\":true,\"clippath-border-image\":true,\"clippath-border-line-radius\":true,\"clippath-border-line\":true,\"clippath-img-glitch\":true,\"clippath-word-crack\":true,\"text-underline-wave\":true,\"1px-line\":true,\"border-inset-text\":true,\"css-resize-switch-picture\":true,\"digital-char-rain-animation\":true,\"others-chrome-tab\":true,\"others-equiangular-spiral\":true,\"others-huawei-charging\":true,\"others-night\":true,\"others-pie\":true,\"pointer-follow-2\":true,\"pointer-follow-3\":true,\"pointer-follow\":true,\"reflect-artist\":true,\"reflect-btn-effect\":true,\"reflect-text-effect\":true,\"word-break-move\":true,\"word-break\":true,\"word-glitch\":true,\"bg-artist-clippath\":true,\"bg-artist-pattern-2\":true,\"bg-artist-pattern\":true,\"bg-mask-composite\":true,\"bg-mask-mix\":true,\"fish-seaweed\":true,\"spotlight\":true,\"sunset\":true,\"alipay-ar-scan\":true,\"svg-arc-word\":true,\"svg-btn-hover\":true,\"svg-dropshadow-line-neon-effect\":true,\"svg-feTurbulence-harmony-logo\":true,\"svg-feturbulence-btn-glitch\":true,\"svg-feturbulence-clouds\":true,\"svg-line-text-2\":true,\"svg-line-text\":true}"
  },
  {
    "path": "index.html",
    "content": "\n\n\n\n    \n    cssinspirationguide - csc inspiration guide online\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n\n\n\n    
\n    \n    \n    \n    \n    \n    \n    \n    \n    \n    \n\n\n"
  },
  {
    "path": "init.md",
    "content": "\r\n\r\n![logo](https://github.com/chokcoco/CSS-Inspiration/raw/master/logo2.png)\r\n\r\n希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\r\n\r\n本文档使用 `docsify + gittalk + codepen + mysql` 搭建。\r\n\r\n## Contact Me\r\n\r\n欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入 CSS 灵感的各种群聊：\r\n\r\n+ 作者的微信公众号 - `iCSS前端趣闻`，想 Get 到最有意思的 CSS 资讯，千万不要错过 😄\r\n\r\n![gzh](./assets/images/gzh_sssmall.png)\r\n\r\n+ QQ 群：418766876 联系我，[一键加群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a) \r\n\r\n![qun](./assets/images/qqqun.png)\r\n\r\n+ 微信群：微信群已经满 200，无法扫码加入，需要手动拉人加入，可以加我微信 `coco1s`，备注 css，我拉你进群\r\n\r\n## License\r\n\r\nMIT"
  },
  {
    "path": "layout/best-way-to-center-element.md",
    "content": "## 实现水平垂直居中最便捷的方法\r\n\r\n实现水平垂直居中最便捷的方法\r\n\r\n### 难点\r\n\r\n核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。\r\n\r\n原因如下，在 `dispaly: flex`  下：\r\n\r\n+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.\r\n\r\n> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)\r\n\r\n简单翻译一下，大意是在  **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去\r\n\r\n这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。\r\n\r\n \r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    \r\n    display: flex;\r\n    // display: grid;\r\n    // display: inline-flex;\r\n    // display: inline-grid;\r\n\r\n}\r\n\r\n.g-box {\r\n    width: 40vmin;\r\n    height: 40vmin;\r\n    background: #000;\r\n    margin: auto;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/double-wing-layout.md",
    "content": "## 双飞翼布局\r\n\r\n最常见的双飞翼布局实现方法。\r\n\r\n### 需求\r\n\r\n双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。\r\n\r\n### 关键点\r\n\r\n+ 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度\r\n+ 双飞翼布局的关键点父元素不需要设置 padding\r\n+ 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    div.g-middle \r\n        div.g-middle-inner middle-inner \r\n    div.g-left left\r\n    div.g-right right\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    position: relative;\r\n    height: 100vh;\r\n    min-width: 400px;\r\n    \r\n    & > div {\r\n        height: 100vh;\r\n        float: left;\r\n        text-align: center;\r\n        color: #fff;\r\n        line-height: 100vh;\r\n        font-size: 3vw;\r\n    }\r\n}\r\n\r\n.g-middle {\r\n    position: relative;\r\n    width: 100%;\r\n    background: #cc6630;\r\n    \r\n    .g-middle-inner {\r\n        margin: 0 200px;\r\n    }\r\n}\r\n\r\n.g-left {\r\n    position: relative;\r\n    width: 200px;\r\n    background: #ffcc00;\r\n    margin-left: -100%;\r\n}\r\n\r\n.g-right {\r\n    position: relative;\r\n    width: 200px;\r\n    background: pink;\r\n    margin-left: -200px;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/grid-clip-path-gta5-poster.md",
    "content": "## grid 布局配合 clip-path 实现 GTA5 封面\n\n利用 grid 布局配合 clip-path 实现 GTA5 封面。\n\n### 关键点\n\n+ grid 实现不规则的网格布局\n+ clip-path 控制每个格子的形状\n\n关于本效果的详细描述，你可以查看这篇文章：[新时代创意布局不完全指南](https://github.com/chokcoco/iCSS/issues/70)\n\nHTML：\n\n```\n
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n  
\n    \"\"\n  
\n
  \n\n```\n\nSCSS：\n```scss\n*{\n  box-sizing: border-box;\n}\nbody{\n  padding:0; \n  margin: 0;\n  background: #23232a;\n}\nimg{\n  width:100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: 40% 0;\n}\n\n.parent{\n  padding: .8rem;\n  background: black;\n  height: 95vh;\n  min-height: 500px;\n  width: 100%;\n  max-width: 600px;\n  margin: auto;\n  margin-top: 2.5vh;\n  border: 1px solid #c9b473;\n  overflow: hidden;\n  display: grid;\n\n  grid-template-columns: 1fr .7fr .3fr 1fr;\n  grid-template-rows: 20% 40% 20% 20%;\n  grid-template-areas: 'one two two three'\n    'four five five five'\n    'six five five five'\n    'six seven eight eight';\n}\n\n\n// For clipping I used mozilla's inspect element. \n.child{\n\n  &:nth-child(1),\n  &:nth-child(2),\n  &:nth-child(3){\n    img{\n      width:120%;\n      height: 120%;\n    }\n  }\n  &:first-child{\n    grid-area: one;\n    clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%);\n  }\n  &:nth-child(2){\n    grid-area: two;\n    clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%);\n  }\n  &:nth-child(3){\n    grid-area: three;\n    clip-path:polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%);\n  }\n  &:nth-child(4){\n    grid-area: four;\n    clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%);\n\n    img{\n      width: 135%;\n      height: 135%;\n    }\n  }\n  &:nth-child(5){\n    grid-area: five;\n    clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 100%, 53% 63.21%, 3.23% 73.02%, 14.30% 44.04%);\n  }\n  &:nth-child(6){\n    grid-area: six;\n    clip-path:  polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%);\n  }\n  &:nth-child(7){\n    grid-area: seven;\n    clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.30% 100.85%);\n  }\n  &:nth-child(8){\n    grid-area: eight;\n    clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%);\n  }\n  &:nth-child(9){\n    grid-row-start: 3;\n    grid-row-end: 4;\n    grid-column-start: 2;\n    grid-column-end: 4; \n\n    clip-path:polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%);\n\n    img{\n      object-position: 30% 50%;\n      height: 135%;\n    }\n  }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "layout/holy-grail-layout-flex.md",
    "content": "## flex 实现圣杯布局\r\n\r\n使用 flex 实现的圣杯布局。\r\n\r\n### 需求\r\n\r\n圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。\r\n\r\n### 关键点\r\n\r\n+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置\r\n+ 圣杯布局的关键点父元素需要设置 padding\r\n+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    div.g-middle middle\r\n    div.g-left left\r\n    div.g-right right\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    position: relative;\r\n    height: 100vh;\r\n    min-width: 400px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    \r\n    & > div {\r\n        height: 100vh;\r\n        text-align: center;\r\n        color: #fff;\r\n        line-height: 100vh;\r\n        font-size: 3vw;\r\n    }\r\n}\r\n\r\n.g-middle {\r\n    order: 2;\r\n    flex: auto 1 0 ;\r\n    background: #cc6630;\r\n}\r\n\r\n.g-left {\r\n    order: 1;\r\n    flex: 200px 0 0;\r\n    background: #ffcc00;\r\n}\r\n\r\n.g-right {\r\n    order: 3;\r\n    flex: 200px 0 0;\r\n    background: pink;\r\n}\r\n\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/holy-grail-layout.md",
    "content": "## 圣杯布局\r\n\r\n最常见的圣杯布局实现方法。\r\n\r\n### 需求\r\n\r\n圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。\r\n\r\n### 关键点\r\n\r\n+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置\r\n+ 圣杯布局的关键点父元素需要设置 padding\r\n+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    div.g-middle middle\r\n    div.g-left left\r\n    div.g-right right\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    // overflow: hidden;\r\n    position: relative;\r\n    height: 100vh;\r\n    padding: 0 200px;\r\n    min-width: 400px;\r\n    \r\n    & > div {\r\n        height: 100vh;\r\n        float: left;\r\n        text-align: center;\r\n        color: #fff;\r\n        line-height: 100vh;\r\n        font-size: 3vw;\r\n    }\r\n}\r\n\r\n.g-middle {\r\n    position: relative;\r\n    width: 100%;\r\n    background: #cc6630;\r\n}\r\n\r\n.g-left {\r\n    position: relative;\r\n    width: 200px;\r\n    background: #ffcc00;\r\n    margin-left: -100%;\r\n    left: -200px;\r\n}\r\n\r\n.g-right {\r\n    position: relative;\r\n    width: 200px;\r\n    background: pink;\r\n    margin-left: -200px;\r\n    right: -200px;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/masonry-layout-colum.md",
    "content": "## CSS实现瀑布流布局（column-count）\r\n\r\n本例使用 CSS column 实现瀑布流布局\r\n\r\n关键点，\r\n\r\n+ column-count: 元素内容将被划分的最佳列数\r\n+ break-inside: 避免在元素内部插入分页符\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    -for(var j = 0; j<32; j++)\r\n        div.g-item\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 32;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomColor() {\r\n    @return rgb(randomNum(255), randomNum(255), randomNum(255));\r\n}\r\n\r\n.g-container {\r\n    column-count: 4;\r\n    column-gap: .5vw;\r\n    padding-top: .5vw;\r\n}\r\n\r\n.g-item {\r\n    position: relative;\r\n    width: 24vw;\r\n    margin-bottom: 1vw;\r\n    break-inside: avoid;\r\n}\r\n\r\n@for $i from 1 to $count+1 {\r\n    .g-item:nth-child(#{$i}) {\r\n        height: #{randomNum(300, 50)}px;\r\n        background: randomColor();\r\n\r\n        &::after {\r\n            content: \"#{$i}\";\r\n            position: absolute;\r\n            color: #fff;\r\n            font-size: 2vw;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/masonry-layout-flex.md",
    "content": "## CSS 实现瀑布流布局（display: flex）\r\n\r\n本例使用 CSS flex 实现瀑布流布局\r\n\r\n关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    -for(var i = 0; i<4; i++)\r\n        div.g-queue\r\n            -for(var j = 0; j<8; j++)\r\n                div.g-item\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$lineCount: 4;\r\n$count: 8;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomColor() {\r\n    @return rgb(randomNum(255), randomNum(255), randomNum(255));\r\n}\r\n\r\n.g-container {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n}\r\n\r\n.g-queue {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-basis: 24%;\r\n\r\n}\r\n\r\n.g-item {\r\n    position: relative;\r\n    width: 100%;\r\n    margin: 2.5% 0;\r\n}\r\n\r\n@for $i from 1 to $lineCount+1 {\r\n    .g-queue:nth-child(#{$i}) {\r\n        @for $j from 1 to $count+1 {\r\n            .g-item:nth-child(#{$j}) {\r\n                height: #{randomNum(300, 50)}px;\r\n                background: randomColor();\r\n\r\n                &::after {\r\n                    content: \"#{$j}\";\r\n                    position: absolute;\r\n                    color: #fff;\r\n                    font-size: 24px;\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    transform: translate(-50%, -50%);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/masonry-layout-grid.md",
    "content": "## CSS实现瀑布流布局（display: grid）\r\n\r\n本例使用 CSS grid 实现瀑布流布局\r\n\r\n关键点，\r\n\r\n+ 使用 `grid-template-columns`、`grid-template-rows` 分割行列\r\n+ 使用 `grid-row` 控制每个 item 的所占格子的大小\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n    -for(var i = 0; i<8; i++)\r\n            div.g-item\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 8;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n    @return ($min + random($max)) * $u;\r\n}\r\n\r\n@function randomColor() {\r\n    @return rgb(randomNum(255), randomNum(255), randomNum(255));\r\n}\r\n\r\n.g-container {\r\n    height: 100vh;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    grid-template-rows: repeat(8, 1fr);\r\n}\r\n\r\n@for $i from 1 to $count+1 {\r\n    .g-item:nth-child(#{$i}) {\r\n        position: relative;\r\n        background: randomColor();\r\n        margin: 0.5vw;\r\n\r\n        &::after {\r\n            content: \"#{$i}\";\r\n            position: absolute;\r\n            color: #fff;\r\n            font-size: 2vw;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n    }\r\n}\r\n\r\n.g-item {\r\n    &:nth-child(1) {\r\n        grid-column: 1;\r\n        grid-row: 1 / 3;\r\n    }\r\n    &:nth-child(2) {\r\n        grid-column: 2;\r\n        grid-row: 1 / 4;\r\n    }\r\n    &:nth-child(3) {\r\n        grid-column: 3;\r\n        grid-row: 1 / 5;\r\n    }\r\n    &:nth-child(4) {\r\n        grid-column: 4;\r\n        grid-row: 1 / 6;\r\n    }\r\n    &:nth-child(5) {\r\n        grid-column: 1;\r\n        grid-row: 3 / 9;\r\n    }\r\n    &:nth-child(6) {\r\n        grid-column: 2;\r\n        grid-row: 4 / 9;\r\n    }\r\n    &:nth-child(7) {\r\n        grid-column: 3;\r\n        grid-row: 5 / 9;\r\n    }\r\n    &:nth-child(8) {\r\n        grid-column: 4;\r\n        grid-row: 6 / 9;\r\n    }\r\n}\r\n\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/multi-column-contour.md",
    "content": "## 6种实现多列等高的方法\r\n\r\n多种实现多列等高的方法\r\n\r\n### 需求\r\n\r\n多列等高，要求左右两列高度自适应且一样，分别设置不同背景色\r\n\r\n### 实现\r\n\r\n1. `padding + margin + overflow` 实现多列等高效果，兼容性好\r\n2.  border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动\r\n3. 父元素线性渐变背景色实现多列等高（同理各种颜色障眼法）\r\n4. display：flex实现多列等高\r\n5. display：grid实现多列等高\r\n6. display:table-cell 实现多列等高\r\n\r\n \r\nHTML：\r\n\r\n```html\r\n
\r\n    
\r\n        
\r\n            content
\r\n        
\r\n        
\r\n            content
\r\n            content
\r\n            content
\r\n            content
\r\n        
\r\n    
\r\n
\r\n```\r\n\r\n\r\nSCSS：\r\n```scss\r\nh2 {\r\n    text-align: center;\r\n    line-height: 60px;\r\n    font-size: 20px;\r\n    background: #00bcd4;\r\n    color: #fff;\r\n}\r\n\r\n.g-container {\r\n    width: 1000px;\r\n    margin: 0 auto;\r\n    line-height: 2;\r\n    color: #fff;\r\n    \r\n    & > div {\r\n        margin-bottom: 50px;\r\n    }\r\n}\r\n\r\n\r\n\r\n.g-padmar {\r\n    position: relative;\r\n    overflow: hidden;\r\n\r\n    .g-left {\r\n        float: left;\r\n        width: 200px;\r\n        background: #4caf50;\r\n        padding-bottom:9999px;\r\n\t    margin-bottom:-9999px;\r\n    }\r\n    \r\n    .g-right {\r\n        float: left;\r\n        width: 800px;\r\n        background: #99afe0;\r\n        padding-bottom: 9999px;\r\n        margin-bottom: -9999px;\r\n    }\r\n}\r\n\r\n.g-border {\r\n    position: relative;\r\n    width: 800px;\r\n    border-left: 200px solid #4caf50;\r\n    background: #99afe0;\r\n    \r\n    &::after {\r\n        content: \".\";\r\n        display:block;\r\n        height: 0;\r\n        clear: both;\r\n    }\r\n    \r\n    .g-right {\r\n        width: 800px;\r\n    }\r\n    \r\n    .g-left {\r\n        float: left;\r\n        width: 200px;\r\n        margin-left: -200px;\r\n    }\r\n}\r\n\r\n.g-lineargradient {\r\n    background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0);\r\n    overflow: hidden;\r\n    \r\n    .g-left {\r\n        float: left;\r\n        width: 200px;\r\n    }\r\n    \r\n    .g-right {\r\n        float: left;\r\n        width: 800px;\r\n    }\r\n}\r\n\r\n.g-flex {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    align-items: stretch;\r\n    \r\n    .g-left {\r\n        flex: 200px 0 0 ;\r\n        background: #4caf50;\r\n    }\r\n    \r\n    .g-right {\r\n        flex: auto 1 0;\r\n        background: #99afe0;\r\n    } \r\n}\r\n\r\n.g-grid {\r\n    display: grid;\r\n    // align-items: stretch; 默认值\r\n    grid-template-columns: 200px auto;\r\n    \r\n    .g-left {\r\n        background: #4caf50;\r\n    }\r\n    \r\n    .g-right {\r\n        background: #99afe0;\r\n    } \r\n}\r\n\r\n.g-table {\r\n    overflow:hidden;\r\n\tdisplay:table;\r\n    \r\n    .g-left {\r\n        width: 200px;\r\n        display: table-cell;\r\n        background: #4caf50;\r\n    }\r\n    \r\n    .g-right {\r\n        width: 800px;\r\n        display: table-cell;\r\n        background: #99afe0;\r\n    } \r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "layout/multi-row-or-column.md",
    "content": "## 多方案实现跨行或跨列布局\r\n\r\n多方案实现多方案实现跨行或跨列布局\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\ndiv.g-container\r\n\r\n    h2 float 实现\r\n    div.g-float\r\n        - for(var i=0; i<3; i++)\r\n            div.g-item #{i}\r\n            \r\n    h2 flex 实现\r\n    div.g-flex\r\n        - for(var i=0; i<3; i++)\r\n            div.g-item #{i}\r\n            \r\n    h2 grid 实现\r\n    div.g-grid\r\n        - for(var i=0; i<3; i++)\r\n            div.g-item #{i}\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-container {\r\n    margin: 20px auto;\r\n    width: 400px;\r\n}\r\n\r\n.g-item {\r\n    width: 190px;\r\n    height: 190px;\r\n    box-sizing: border-box;\r\n    border: 1px solid #666;\r\n    border-radius: 10px;\r\n    line-height: 190px;\r\n    font-size: 32px;\r\n    text-align: center;\r\n    cursor:pointer;\r\n    margin: 5px;\r\n    transition: .1s all;\r\n}\r\n\r\n.g-float {\r\n    overflow: hidden;\r\n    \r\n    .g-item {\r\n        float: left;\r\n    }\r\n    \r\n    .g-item:first-child {\r\n        height: 390px;\r\n    }\r\n\r\n    .g-item:first-child:hover {\r\n        height: 190px;\r\n        width: 390px;\r\n    }\r\n}\r\n\r\nh2 {\r\n    font-size: 28px;\r\n    text-align: center;\r\n    margin: 30px auto\r\n}\r\n\r\n\r\n.g-flex {\r\n    width: 400px;\r\n    height: 400px;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    flex-direction: column;\r\n    \r\n    .g-item:first-child {\r\n        height: 390px;\r\n    }\r\n}\r\n\r\n.g-flex:hover {\r\n    flex-direction: row;\r\n\r\n    .g-item:first-child {\r\n        height: 190px;\r\n        width: 390px;\r\n    }\r\n}\r\n\r\n.g-grid {\r\n    width: 400px;\r\n    height: 400px;\r\n    overflow: hidden;\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 50%);\r\n    grid-template-rows: repeat(2, 50%);\r\n    \r\n    .g-item {\r\n        width: unset;\r\n        height: unset;\r\n    }\r\n    \r\n    .g-item:first-child {\r\n        grid-row: 1 / 3;\r\n        grid-column: 1 / 2;\r\n    }\r\n}\r\n\r\n.g-grid:hover {\r\n    .g-item:first-child {\r\n        grid-row: 1 / 2;\r\n        grid-column: 1 / 3;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/single-column-isometric.md",
    "content": "## 多种方案实现单列等宽，其他多列自适应均匀布局\r\n\r\n多种方案实现单列等宽，其他多列自适应均匀布局\r\n\r\n### 需求\r\n\r\n共4列，首列宽度固定为200px，其余3列均分剩余宽度，每列间距10px\r\n\r\n### 实现\r\n\r\n+ `display: grid` 实现\r\n+ `display: flex` 实现\r\n+ `position: aboslute + float` 实现\r\n+ `position: aboslute + float +非calc实现`\r\n\r\n### 难点\r\n\r\n对于不使用 flex、grid 以及 css3 特性 calc 而言，实现多列自适应均匀分布只能是百分比。\r\n\r\n百分比均分后间距的均分，这里参考了 bootstrap 的实现方式。\r\n \r\nHTML：\r\n\r\n```pug\r\n// pug 模板引擎\r\n\r\ndiv.g-grid\r\n    - for(var i=0; i<4; i++)   \r\n        div.g-item #{i}\r\n        \r\ndiv.g-flex\r\n    - for(var i=0; i<4; i++)   \r\n        div.g-item #{i}\r\n        \r\ndiv.g-position\r\n    - for(var i=0; i<4; i++)   \r\n        div.g-item #{i}\r\n\r\ndiv.g-justify  \r\n    div.g-left 0\r\n    div.g-col\r\n        div.g-row\r\n            - for(var i=1; i<4; i++) \r\n                div.g-item-box\r\n                    div.g-item #{i}\r\n```\r\n\r\nSCSS：\r\n```scss\r\nh2 {\r\n    font-size: 28px;\r\n    text-align: center;\r\n    color: #fff;\r\n    background: #009688;\r\n    line-height: 2;\r\n}\r\n\r\n.g-left,\r\n.g-item {\r\n    background: #3f51b5;\r\n    line-height: 200px;\r\n    color: #fff;\r\n    text-align: center;\r\n    font-size: 24px;\r\n}\r\n\r\n.g-grid {\r\n    height: 200px;\r\n    background: #ff9800;\r\n    display: grid;\r\n    grid-template-columns: 200px repeat(3, 1fr);\r\n    grid-column-gap: 10px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.g-flex {\r\n    height: 200px;\r\n    background: #ff9800;\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    justify-content: space-between;\r\n    margin-bottom: 20px;\r\n\r\n    .g-item {\r\n        flex: 0 1 calc((100% - 200px - 30px) / 3);\r\n    }\r\n    \r\n    .g-item:first-child {\r\n        flex: 0 1 200px;\r\n    }\r\n}\r\n\r\n.g-position {\r\n    position: relative;\r\n    height: 200px;\r\n    background: #ff9800;\r\n    margin-bottom: 20px;\r\n\r\n    .g-item {\r\n        float: left;\r\n        width: calc((100% - 200px - 30px) / 3);\r\n        margin-left: 10px;\r\n    }\r\n    \r\n    .g-item:nth-child(2) {\r\n        float: left;\r\n        width: calc((100% - 200px - 30px) / 3);\r\n        margin-left: 210px;\r\n    }\r\n    \r\n    .g-item:first-child {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 200px;\r\n        height: 200px;\r\n        float: unset;\r\n        margin-left: unset;\r\n    }\r\n}\r\n\r\n.g-justify {\r\n    position: relative;\r\n    height: 200px;\r\n    background: #ff9800;\r\n    margin-bottom: 20px;\r\n\r\n    .g-col,\r\n    .g-row,\r\n    .g-item-box {\r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .g-left {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 200px;\r\n        height: 200px;\r\n    }\r\n    \r\n    .g-row {\r\n        margin-right: -5px;\r\n        margin-left: -5px;\r\n    }\r\n    \r\n    .g-col {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 210px;\r\n        right: 0;\r\n        height: 200px;\r\n        overflow: hidden;\r\n        \r\n        &:before,\r\n        &:after {\r\n          display: table;\r\n          content: \" \";\r\n        }\r\n        \r\n        &:after {\r\n          clear: both;\r\n        }\r\n        \r\n        .g-item-box {\r\n            position: relative;\r\n            float: left;\r\n            width: 33.33%;\r\n            padding-left: 5px;\r\n            padding-right: 5px;\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/use-margin-auto-to-simulate-align-self.md",
    "content": "## 使用 margin auto 实现 flex 下的 align-self: flex-end\r\n\r\n使用 margin auto 实现 flex 下的 align-self: flex-end\r\n\r\n### 难点\r\n\r\n核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。\r\n\r\n在 `dispaly: flex`  下：\r\n\r\n+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.\r\n\r\n> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)\r\n\r\n简单翻译一下，大意是在  **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去\r\n\r\n这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。\r\n\r\n \r\nHTML：\r\n\r\n```HTML\r\n
    \r\n    
  • liA
    • \r\n    
  • liB
    • \r\n    
  • liC
    • \r\n    
  • liD
    • \r\n    
  • liE
    • \r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-flex {\r\n    height: 200px;\r\n    box-sizing: border-box;\r\n    background: #037d65;\r\n    \r\n    display: flex;\r\n    // display: flex-inline;\r\n    // justify-content: space-around;\r\n}\r\n\r\nli {\r\n    // align-self: center;\r\n    width: 100px;\r\n    text-align: center;\r\n    font-size: 18px;\r\n    color: #fff;\r\n    \r\n    margin: auto;\r\n    margin-bottom: 0;\r\n    margin-top: auto;\r\n}\r\n\r\nli:nth-child(1) {\r\n    height: 100px;\r\n    background: #336699;\r\n}\r\n\r\nli:nth-child(2) {\r\n    height: 120px;\r\n    background: #669933;\r\n}\r\n\r\nli:nth-child(3) {\r\n    height: 140px;\r\n    background: #996633;\r\n}\r\n\r\nli:nth-child(4) {\r\n    height: 160px;\r\n    background: #229955;\r\n}\r\n\r\nli:nth-child(5) {\r\n    height: 180px;\r\n    background: #199652;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "layout/use-margin-auto-to-simulate-space-between.md",
    "content": "## 使用 margin auto 实现 flex 下的 justify-content: space-between\r\n\r\n使用 margin auto 实现 flex 下的 justify-content: space-between\r\n\r\n### 难点\r\n\r\n核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。\r\n\r\n在 `dispaly: flex`  下：\r\n\r\n+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.\r\n\r\n> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)\r\n\r\n简单翻译一下，大意是在  **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去\r\n\r\n这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。\r\n\r\n \r\nHTML：\r\n\r\n```HTML\r\n
    \r\n    
  • liA
    • \r\n    
  • liB
    • \r\n    
  • liC
    • \r\n    
  • liD
    • \r\n    
  • liE
    • \r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-flex {\r\n    height: 100px;\r\n    margin-bottom: 100px;\r\n    box-sizing: border-box;\r\n    background: #037d65;\r\n    \r\n    display: flex;\r\n    // justify-content: space-between;\r\n}\r\n\r\nli {\r\n    width: 100px;\r\n    line-height: 100px;\r\n    text-align: center;\r\n    font-size: 18px;\r\n    color: #fff;\r\n    \r\n    margin: auto;\r\n}\r\n\r\nli:first-child {\r\n    margin-left: 0;\r\n}\r\n\r\nli:last-child {\r\n    margin-right: 0;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/1px-line.md",
    "content": "## retina屏下的1px线的实现\r\n\r\nretina屏下的1px线的实现，适用于 dpr：2 的情况。\r\n\r\n+ 法一：使用渐变实现，使用两种颜色填充 1px 宽内容\r\n+ 法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放\r\n+ 法三：base64 编码实现\r\n+ 法四：base64 编码嵌入SVG实现\r\n\r\nHTML：\r\n\r\n```html\r\n\r\n    \r\n    \r\n    \r\n    retina屏下的1px线的实现\r\n\r\n\r\n\r\n    
正常使用1px border效果（本DEMO请在移动端环境下查看）
\r\n    
法一：使用渐变实现，使用两种颜色填充 1px 宽内容 
\r\n    
法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放
\r\n    
法三：base64 编码实现
\r\n    
法四：base64 编码嵌入SVG实现
\r\n\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    // overflow: hidden;\r\n}\r\n\r\ndiv {\r\n    width: 100vw;\r\n    height: 80px;\r\n    margin: 30px auto;\r\n    background-color: rgba(0, 0, 0, 0.1);\r\n    text-align: center;\r\n    padding-top: 20px;\r\n    font-size: 16px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n/*border-top:1px*/\r\n.border_normal,\r\n.border_gradient,\r\n.border_scale,\r\n.border_boxshadow,\r\n.border_base64,\r\n.border_svg{\r\n    border-top: 1px solid #999;\r\n}\r\n\r\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\r\n    .border_gradient {\r\n        background-image: linear-gradient(to top, transparent 50%, #999 50%);\r\n        background-size: 100% 1px;\r\n        background-repeat: no-repeat;\r\n        background-position: top center;\r\n        border-top: 0 none;\r\n        padding-top: 1px;\r\n    }\r\n    \r\n    .border_scale {\r\n        position: relative;\r\n        padding-top: 1px;\r\n        border-top: 0 none;\r\n    }\r\n    .border_scale:before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 200%;\r\n        border-top: 1px solid #999;\r\n        transform: scale(0.5);\r\n        transform-origin: 0 0;\r\n        box-sizing: border-box;\r\n    }\r\n    .border_base64 {\r\n        padding-top: 1px;\r\n        border-top: 0 none;\r\n        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);\r\n        background-position: 0 0;\r\n        background-repeat: repeat-x;\r\n        background-size: 1px 1px;\r\n    }\r\n    \r\n    .border_svg {\r\n\t\tborder-top: 0 none;\r\n\t\tbackground-image:url(\"data:image/svg+xml;utf8,\");\t\r\n\t \tbackground-position:0 0;\r\n\t \tbackground-repeat:no-repeat;\r\n    }\r\n\r\n}\r\n```\r\n\r\n效果如下，demo效果需要在移动端环境下观看（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "others/border-inset-text.md",
    "content": "## fieldset 与 legend 实现边框嵌套文字\r\n\r\n利用 `
` 与 `` 实现边框嵌套文字效果\r\n\r\n[生僻标签 fieldset 与 legend 的妙用](https://github.com/chokcoco/iCSS/issues/93)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n\t
One
\r\n\t
Two
\r\n\t
Three
\r\n
\r\n
\r\n\t
One
\r\n\t
Two
\r\n\t
Three
\r\n\t
Four
\r\n\t
Five
\r\n
\r\n
\r\n\t
One
\r\n\t
Two
\r\n\t
Three
\r\n\t
Four
\r\n\t
Five
\r\n\t
Six
\r\n
\r\n
\r\n\t
One
\r\n\t
Two
\r\n\t
Three
\r\n\t
Four
\r\n\t
Five
\r\n\t
Six
\r\n\t
Seven
\r\n\t
Eight
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml, body {\r\n  margin: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n}\r\nbody > div {\r\n\tposition: relative;\r\n\twidth: 120px;\r\n\theight: 120px;\r\n\tmargin: auto;\r\n}\r\nfieldset{\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tmargin-left: -100px;\r\n\tmargin-top: -5px;\r\n\twidth: 120px; \r\n\theight: 120px; \r\n\tborder-top: 10px solid #000; \r\n\tbox-sizing: border-box;\r\n}\r\nlegend{\r\n\tfont-family: 'Averia Serif Libre';\r\n\tfont-size: 24px;\r\n\tline-height: 10px;\r\n\tfont-weight: bold;\r\n\tmargin: auto; \r\n\tpadding: 2px 10px; \r\n\tbox-sizing: border-box;\r\n} \r\n.g-triangle {\r\n\tfieldset {\r\n\t\ttransform-origin: center 36%;\r\n\t}\r\n\tfieldset:nth-of-type(1) {\r\n\t\ttransform: rotate(120deg)\r\n\t}\r\n\tfieldset:nth-of-type(2){\r\n\t\ttransform: rotate(240deg)\r\n\t}\r\n\tfieldset:nth-of-type(3){\r\n\t\ttransform: rotate(360deg)\r\n\t}\r\n}\r\n.g-pentagon {\r\n\tfieldset {\r\n\t\tborder-top-color: deeppink;\r\n\t\ttransform-origin: center 71%;\r\n\t\t\r\n\t\tlegend {\r\n\t\t\tcolor: deeppink;\r\n\t\t}\r\n\t}\r\n\tfieldset:nth-of-type(1) {\r\n\t\ttransform: rotate(72deg)\r\n\t}\r\n\tfieldset:nth-of-type(2){\r\n\t\ttransform: rotate(144deg)\r\n\t}\r\n\tfieldset:nth-of-type(3){\r\n\t\ttransform: rotate(216deg)\r\n\t}\r\n\tfieldset:nth-of-type(4){\r\n\t\ttransform: rotate(288deg)\r\n\t}\r\n}\r\n.g-hexagon {\r\n\tfieldset {\r\n\t\tborder-top-color: #673AB7;\r\n\t\ttransform-origin: center 89%;\r\n\t\t\r\n\t\tlegend {\r\n\t\t\tcolor: #673AB7;\r\n\t\t}\r\n\t}\r\n\t@for $i from 1 through 6 { \r\n    fieldset:nth-of-type(#{$i}) {\r\n\t\t\ttransform: rotate(#{360 / 6 * $i}deg);\r\n\t\t}\r\n\t}\r\n}\r\n.g-octagon {\r\n\tfieldset {\r\n\t\tborder-top-color: #ff5722;\r\n\t\ttransform-origin: center 123%;\r\n\t\t\r\n\t\tlegend {\r\n\t\t\tcolor: #ff5722;\r\n\t\t}\r\n\t}\r\n\t@for $i from 1 through 8 { \r\n    fieldset:nth-of-type(#{$i}) {\r\n\t\t\ttransform: rotate(#{360 / 8 * $i}deg);\r\n\t\t}\r\n\t}\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/css-resize-switch-picture.md",
    "content": "## 利用 resize 实现图片切换预览功能\n\n利用 resize 实现图片切换预览功能 。\n\n### 关键点\n\n+ CSS `resize` 属性允许你控制一个元素的可调整大小性\n+ 配合 `resize` 实现子元素的动态宽度\n\nHTML：\n\n```\n
\n    
\n        
\n    
\n
\n```\n\nSCSS：\n```scss\nhtml {\n    background: #ddd;\n    height: 100%;\n    width: 100%;\n}\n.picA {\n    background-image: url(https://z3.ax1x.com/2021/08/17/fhJdpQ.png);\n    background-size: cover;\n    width: 650px;\n    height: 340px;\n    border: 5px solid #f0e5ab;\n    border-radius: 3px;\n    box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);\n    padding: 0;\n    margin: 1rem auto;\n    position: relative;\n    overflow: hidden;\n}\n.picB {\n    background-image: url(https://z3.ax1x.com/2021/08/17/fhJUfg.png);\n    background-size: cover;\n    height: 340px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    min-width: 0;\n    max-width: 650px;\n    box-sizing: border-box;\n}\n.picB:before {\n    content: \"↔\";\n    position: absolute;\n    background: rgba(0, 0, 0, 0.5);\n    font-size: 16px;\n    color: white;\n    top: 0;\n    right: 0;\n    height: 100%;\n    line-height: 340px;\n}\n.resizeElement {\n    resize: horizontal;\n    overflow: scroll;\n    opacity: 0;\n    position: relative;\n    top: 50%;\n    left: 0px;\n    height: 15px;\n    max-width: 650px;\n    min-width: 15px;\n    width: 0;\n    cursor: move;\n    transform: scaleY(35);\n    transform-origin: center center;\n    animation: delta 5s normal ease-in-out 1s;\n}\n@keyframes delta {\n    30% {\n        width: 0;\n    }\n    60% {\n        width: 350px;\n    }\n    100% {\n        width: 0;\n    }\n}\n```\n\n效果如下：\n\n"
  },
  {
    "path": "others/digital-char-rain-animation.md",
    "content": "## 暗黑字符雨动画\n\n纯 CSS 实现的暗黑字符雨动画。\n\n### 关键点\n\n+ 文字的竖排\n+ 使用 CSS 实现随机字符串的选取\n+ 使用 CSS 实现打字效果\n+ 增加光影与透明度变化\n\n详细信息，可以看看我的这篇文章：\n\n[【Web动画】科技感十足的暗黑字符雨动画](https://juejin.cn/post/6991657194282450951)\n\nHTML（这里使用了 Pug 模板引擎）：\n\n```pug\n// pug模板\n.g-container\n    -for(var i=0; i<50; i++)\n        p\n```\n\nSCSS：\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap');\n$str: 'ぁぃぅぇぉかきくけこんさしすせそた◁▣▤▥▦▧♂♀♥☻►◄▧▨♦ちつってとゐなにぬねのはひふへほゑまみむめもゃゅょゎをァィゥヴェォカヵキクケヶコサシスセソタチツッテトヰンナニヌネノハヒフヘホヱマミムメモャュョヮヲㄅㄉㄓㄚㄞㄢㄦㄆㄊㄍㄐㄔㄗㄧㄛㄟㄣㄇㄋㄎㄑㄕㄘㄨㄜㄠㄤㄈㄏㄒㄖㄙㄩㄝㄡㄥabcdefghigklmnopqrstuvwxyz123456789%@#$<>^&*_+';\n$length: str-length($str);\n$n: 50;\n$animationTime: 4;\n$perColumnNums: 25;\n\n@function randomChar() {\n    $r: random($length);\n    @return str-slice($str, $r, $r);\n}\n\n@function randomChars($number) {\n    $value: '';\n\n    @if $number > 0 {\n        @for $i from 1 through $number {\n            $value: $value + randomChar();\n        }\n    }\n    @return $value;\n}\n\nbody, p {\n    margin: 0;\n    padding: 0;\n}\n\nbody, html {\n    width: 100%;\n    height: 100%;\n    background: #000;\n    display: flex;\n    overflow: hidden;\n}\n\n.g-container {\n    width: 100vw;\n    display: flex;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n    flex-direction: row;\n    font-family: 'Inconsolata', monospace, sans-serif;\n}\n\np {\n    position: relative;\n    width: 5vh;\n    height: 100vh;\n    text-align: center;\n    font-size: 5vh;\n    word-break: break-all;\n    white-space: pre-wrap;\n    \n    &::before,\n    &::after {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 100%;\n        overflow: hidden;\n    }\n}\n\n@for $i from 0 through $n {\n    $content: randomChars($perColumnNums);\n    $contentNext: randomChars($perColumnNums);\n    $delay: random($n);\n    $randomAnimationTine: #{$animationTime + random(20) / 10 - 1}s;\n    \n    p:nth-child(#{$i})::before {\n        content: $content;\n        color: rgb(179, 255, 199);\n        text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;\n        animation: typing-#{$i} $randomAnimationTine steps(20, end) #{$delay * 0.1s * -1} infinite;\n        z-index: 1;\n    }\n\n    p:nth-child(#{$i})::after {\n        $alpha: random(40) / 100 + 0.6;\n        content: '';\n        background: linear-gradient(rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), rgba(0, 0, 0, $alpha), transparent 75%, transparent);\n        background-size: 100% 220%;\n        background-repeat: no-repeat;\n        animation: mask $randomAnimationTine infinite #{($delay - 2) * 0.1s * -1} linear;\n        z-index: 2;\n    }\n\n    @keyframes typing-#{$i} {\n        0% {\n            height: 0;\n        }\n        25% {\n            height: 100%;\n        }\n        100% {\n            height: 100%;\n            content: $contentNext;\n        }\n    }\n}\n\n@keyframes mask{\n    0% {\n        background-position: 0 220%;\n    } \n    30% {\n        background-position: 0 0%;\n    }\n    100% {\n        background-position: 0 0%;\n    }\n}\n```\n\n效果如下：\n\n\n"
  },
  {
    "path": "others/others-chrome-tab.md",
    "content": "## chrome Tab 分栏实现\r\n\r\nchrome Tab 分栏实现\r\n\r\n### 关键点\r\n\r\n有很多小细节\r\n\r\n+ 每个 tab active 状态下的边框实现，需要借助两个伪元素\r\n+ 正常状态、hover状态、active状态下的层级关系\r\n\r\n可以自己动手尝试下。\r\n\r\nHTML：\r\n\r\n```HTML\r\n
    \r\n    
  • \r\n        \"\"\r\n        The Jest Object\r\n        
    ﹢
    \r\n        
    \r\n    
    • \r\n    
  • \r\n        \"\"\r\n        ChromeTab分栏实现\r\n        
    ﹢
    \r\n        
    \r\n    
    • \r\n    
  • \r\n        \"\"\r\n        chokcoco（Coco）\r\n        
    ﹢
    \r\n        
    \r\n    
    • \r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.container {\r\n    background: #ddd;\r\n    height: 40px;\r\n    margin: 20px auto;\r\n    padding: 8px 8px 0;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    overflow: hidden;\r\n}\r\n\r\nli {\r\n    position: relative;\r\n    font-size: 12px;\r\n    border-radius: 10px 10px 0 0;\r\n    flex-basis: 240px;\r\n    display: flex;\r\n    align-items: center;\r\n    z-index: 1;\r\n    cursor: default;\r\n    transition: .3s all;\r\n    \r\n    img {\r\n        width: 16px;\r\n        height: 16px;\r\n        margin-left: 10px;\r\n        margin-right: 10px; \r\n    }\r\n    \r\n    .line {\r\n        display: none;\r\n        left: -1px;\r\n        top: 6px;\r\n        position: absolute;\r\n        width: 1px; \r\n        height: 20px;\r\n        background: #909090;\r\n    }\r\n    \r\n    .close {\r\n        right: 8px;\r\n        top: 8px;\r\n        position: absolute;\r\n        font-size: 18px;\r\n        transform: rotate(45deg);\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        font-weight: bold;\r\n        \r\n        &:hover {\r\n            background: #d0d0d0;\r\n        }\r\n    }\r\n}\r\n\r\nli.active {\r\n    background: #fff;\r\n    z-index: 2;\r\n    \r\n    &::before,\r\n    &::after {\r\n        border-top: 5px solid #fff;\r\n    }\r\n}\r\n\r\nli::before,\r\nli::after {\r\n    position: absolute;\r\n    content: \"\";\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    border: 5px solid transparent;\r\n    transition: .3s all;\r\n    //border-top: 5px solid #fff;\r\n}\r\n\r\nli::before {\r\n    bottom: -5px;\r\n    left: -15px;\r\n    transform: rotate(135deg)\r\n}\r\n\r\nli::after {\r\n    bottom: -5px;\r\n    right: -15px;\r\n    transform: rotate(205deg)\r\n}\r\n\r\nli + li:not(.active) .line {\r\n    display: block\r\n}\r\n\r\nli:hover:not(.active) {\r\n    background: #ededed;\r\n    \r\n    .line {\r\n        display: none!important;\r\n    }\r\n    \r\n    &::before,\r\n    &::after {\r\n       border-top: 5px solid #ededed; \r\n    }\r\n}\r\n\r\nli:hover + li {\r\n    .line {\r\n        display: none!important;\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/others-equiangular-spiral.md",
    "content": "## 等角螺线\r\n\r\n等角螺线。\r\n\r\n等角螺线，一个很有意思的几何图形。\r\n\r\n等角螺线的臂的距离以几何级数递增。 等角螺线是自我相似的；这即是说，等角螺线经放大后可与原图完全相同。 等角螺线的渐屈线和垂足曲线都是等角螺线。 从原点到等角螺线的任意点上的长度有限，但由那点出发沿等角螺线走到原点却需绕原点转无限次。\r\n\r\n### 关键点\r\n\r\n1. 借助了三角函数，而 CSS 本身是没有三角函数的，所以需要使用 SCSS 实现三角函数方法（Sin、Cos）\r\n2. SCSS 实现三角函数又借助了泰勒公式，具体可以看我的这篇文章：[在 CSS 中使用三角函数绘制曲线图形及展示动画](https://github.com/chokcoco/iCSS/issues/72)\r\n\r\nPug模板（HTML模板引擎）：\r\n\r\n```pug\r\n- for(var i=0; i<32; i++)\r\n    .box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n// scss 实现 sin、cos、tan\r\n$pi: 3.14159265359;\r\n$_precision: 10;\r\n\r\n@function pow($base, $exp) {\r\n    $value: $base;\r\n    @if $exp > 1 {\r\n        @for $i from 2 through $exp {\r\n            $value: $value * $base;\r\n        }\r\n    }\r\n    @if $exp < 1 {\r\n        @for $i from 0 through -$exp {\r\n            $value: $value / $base;\r\n        }\r\n    }\r\n    @return $value;\r\n}\r\n\r\n@function fact($num) {\r\n    $fact: 1;\r\n    @if $num > 0 {\r\n        @for $i from 1 through $num {\r\n            $fact: $fact * $i;\r\n        }\r\n    }\r\n    @return $fact;\r\n}\r\n\r\n@function _to_unitless_rad($angle) {\r\n    @if unit($angle) == \"deg\" {\r\n        $angle: $angle / 180deg * $pi;\r\n    }\r\n    @if unit($angle) == \"rad\" {\r\n        $angle: $angle / 1rad;\r\n    }\r\n    @return $angle;\r\n}\r\n\r\n@function sin($angle) {\r\n    $a: _to_unitless_rad($angle);\r\n    $sin: $a;\r\n    @for $n from 1 through $_precision {\r\n        $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));\r\n    }\r\n    @return $sin;\r\n}\r\n\r\n@function cos($angle) {\r\n    $a: _to_unitless_rad($angle);\r\n    $cos: 1;\r\n    @for $n from 1 through $_precision {\r\n        $cos: $cos + (pow(-1, $n) / fact(2 * $n)) * pow($a, 2 * $n);\r\n    }\r\n    @return $cos;\r\n}\r\n\r\n@function tan($angle) {\r\n    @return sin($angle) / cos($angle);\r\n}\r\n\r\n$squares: 32;\r\n$angle: $pi / ($squares - 1);\r\n$ratio: 1 / (sin($angle) + cos($angle));\r\n$size: 100;\r\n\r\ndiv {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    border: 2px black solid;\r\n    @for $i from 0 through $squares {\r\n        &:nth-child(#{$i}) {\r\n            $s: pow($ratio, $i) * $size;\r\n            width: #{$s}vmin;\r\n            height: #{$s}vmin;\r\n            transform: translate(-50%, -50%) rotate(#{$angle}rad);\r\n        }\r\n        $angle: $i * $pi / ($squares - 1);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n\r\n\r\n----\r\n\r\n当然，可以加上色彩：\r\n\r\n\r\n\r\n或者加上动画：\r\n\r\n"
  },
  {
    "path": "others/others-huawei-charging.md",
    "content": "## 华为充电动画\r\n\r\n华为充电动画\r\n\r\n本 Demo 详细信息可阅读：\r\n\r\n[巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75)\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
98.7%
\r\n    
\r\n        
\r\n        
    \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n            
  • \r\n        
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nhtml,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\n.g-number {\r\n    position: absolute;\r\n    width: 300px;\r\n    top: 27%;\r\n    text-align: center;\r\n    font-size: 32px;\r\n    z-index: 10;\r\n    color: #fff;\r\n}\r\n\r\n.g-container {\r\n    position: relative;\r\n    width: 300px;\r\n    height: 400px;\r\n    margin: auto;\r\n}\r\n\r\n.g-contrast {\r\n    filter: contrast(10) hue-rotate(0);\r\n    width: 300px;\r\n    height: 400px;\r\n    background-color: #000;\r\n    overflow: hidden;\r\n    animation: hueRotate 10s infinite linear;\r\n}\r\n\r\n.g-circle {\r\n    position: relative;\r\n    width: 300px;\r\n    height: 300px;\r\n    box-sizing: border-box;\r\n    filter: blur(8px);\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 40%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%) rotate(0);\r\n        width: 200px;\r\n        height: 200px;\r\n        background-color: #00ff6f;\r\n        border-radius: 42% 38% 62% 49% / 45%;\r\n        animation: rotate 10s infinite linear;\r\n    }\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 176px;\r\n        height: 176px;\r\n        top: 40%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        border-radius: 50%;\r\n        background-color: #000;\r\n        z-index: 10;\r\n    }\r\n}\r\n\r\n.g-bubbles {\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: 0;\r\n    width: 100px;\r\n    height: 40px;\r\n    transform: translate(-50%, 0);\r\n    border-radius: 100px 100px 0 0;\r\n    background-color: #00ff6f;\r\n    filter: blur(5px);\r\n}\r\n\r\nli {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    background: #00ff6f;\r\n}\r\n\r\n@for $i from 0 through 15 { \r\n    li:nth-child(#{$i}) {\r\n        $width: 15 + random(15) + px;\r\n        left: 15 + random(70) + px;\r\n        top: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: $width;\r\n        height: $width;\r\n        animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    50% {\r\n        border-radius: 45% / 42% 38% 58% 49%;\r\n    }\r\n    100% {\r\n        transform: translate(-50%, -50%) rotate(720deg);\r\n    }\r\n}\r\n\r\n@keyframes moveToTop {\r\n    90% {\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        opacity: .1;\r\n        transform: translate(-50%, -180px);\r\n    }\r\n}\r\n\r\n@keyframes hueRotate {\r\n    100% {\r\n        filter: contrast(15) hue-rotate(360deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/others-night.md",
    "content": "## 夜晚居室图\r\n\r\n夜晚居室图（不知道叫什么好）\r\n\r\n### 关键点\r\n\r\n1. 使用了渐变完成了墙面窗户和地板上窗户的倒影\r\n2. 使用了 transform 变换完成了视觉上的效果\r\n3. 使用了 shadow 实现了门缝透光效果\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
\r\n        
\r\n    
\r\n    
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$dark: #0d0d2d;\r\n$outside: #999;\r\n\r\nbody,\r\nhtml {\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #0d0d2d;\r\n}\r\n\r\n.container {\r\n    width: 400px;\r\n    height: 400px;\r\n    margin: 0 auto;\r\n    perspective: 180px;\r\n}\r\n\r\n.window {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 400px;\r\n    height: 200px;\r\n    transform: translate3d(250px, 110px, -190px) rotateY(110deg);\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: $outside;\r\n        z-index: 1;\r\n    }\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: \r\n            linear-gradient(0deg, transparent 12px, $dark 12px, $dark 15px),\r\n            linear-gradient(90deg, $dark 20px, transparent),\r\n            linear-gradient(90deg, $dark 20px, transparent),\r\n            linear-gradient(90deg, $dark 5px, transparent),\r\n            linear-gradient(90deg, $dark 5px, transparent);\r\n        background-size: 100% 15px, 20px 100%, 20px 100%, 5px 100%, 5px 100%;\r\n        background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;\r\n        background-position: 0 10px, 100px 0, 280px 0, 50px 0, 200px 0;\r\n        z-index: 3;\r\n    }\r\n    \r\n    .moon {\r\n        position: absolute;\r\n        width: 60px;\r\n        height: 100px;\r\n        top: 13px;\r\n        left: 3px;\r\n        background: #e6e6e6;\r\n        z-index: 2;\r\n        border-radius: 50%;\r\n        box-shadow: inset 16px 5px 8px #e6e6e6;\r\n        -webkit-transform: scale(0.6);\r\n        transform: scale(0.3);\r\n    }\r\n}\r\n\r\n.floor {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 400px;\r\n    height: 200px;\r\n    transform: translate3d(7px, 270px, -115px) rotateZ(-90deg) rotateY(100deg);\r\n    \r\n    &::before {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: $outside;\r\n        z-index: 1;\r\n    }\r\n    \r\n    &::after {\r\n        content: \"\";\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        background: \r\n            linear-gradient(0deg, transparent 12px, $dark 12px, $dark 15px),\r\n            linear-gradient(90deg, $dark 20px, transparent),\r\n            linear-gradient(90deg, $dark 20px, transparent),\r\n            linear-gradient(90deg, $dark 5px, transparent),\r\n            linear-gradient(90deg, $dark 5px, transparent);\r\n        background-size: 100% 15px, 20px 100%, 20px 100%, 5px 100%, 5px 100%;\r\n        background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;\r\n        background-position: 0 10px, 100px 0, 280px 0, 50px 0, 200px 0;\r\n        z-index: 2;\r\n    }\r\n}\r\n\r\n.door {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate3d(-50%, -50%, -290px);\r\n    width: 50px;\r\n    height: 100px;\r\n    border-radius: 100px 100px 0 0 ;\r\n    background: linear-gradient(45deg, transparent 65%, $outside);\r\n    box-shadow: inset -5px 5px 4px $outside;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/others-pie.md",
    "content": "## 纯CSS实现360°饼图\r\n\r\n纯CSS实现360°饼图\r\n\r\n### 关键点\r\n\r\n+ 核心在于超过 180° 时，使用一个半圆图辅助\r\n\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
\r\n        
\r\n    
\r\n    
\r\n        
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\nbody {\r\n    background: #000;\r\n}\r\n\r\n.container {\r\n    position: relative;\r\n    width: 200px;\r\n    height: 200px;\r\n    margin: 50px auto;\r\n}\r\n\r\n.left {\r\n    position: absolute;\r\n    left: 100px;\r\n    top: 0;\r\n    width: 100px;\r\n    height: 200px;\r\n    overflow: hidden;\r\n    \r\n    .left-pie {\r\n        position: relative;\r\n        left: -100px;\r\n        width: 200px;\r\n        height: 200px;\r\n        background: linear-gradient(90deg, transparent 50%, yellowgreen 50%);\r\n        border-radius: 50%;\r\n        transform-origin: 50% 50%;\r\n        transform: rotate(-180deg);\r\n        animation: rotate 4s infinite linear;\r\n    }\r\n}\r\n\r\n.right {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100px;\r\n    height: 200px;\r\n    overflow: hidden;\r\n    \r\n    .right-pie {\r\n        position: relative;\r\n        left: 0;\r\n        width: 200px;\r\n        height: 200px;\r\n        background: linear-gradient(90deg, yellowgreen 0%, yellowgreen 50%, transparent 50%);\r\n        border-radius: 50%;\r\n        transform-origin: 50% 50%;\r\n        transform: rotate(-180deg);\r\n        animation: rotate 4s infinite 2s linear;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    50% {\r\n        transform: rotate(0deg);\r\n    }\r\n    100% {\r\n        transform: rotate(0deg);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（右下角 rerun 可以重复播放动画）：\r\n\r\n"
  },
  {
    "path": "others/pointer-follow-2.md",
    "content": "## PURE CSS 实现鼠标跟随2\r\n\r\nPURE CSS 实现鼠标跟随2。\r\n\r\n### 关键点\r\n\r\n+ 障眼法，通过将屏幕铺满 div 进行控制鼠标跟随\r\n+ 通过 hover 以及 transtion 改变元素的透明度 \r\n\r\n详细信息，可以看看我的这篇文章：\r\n\r\n[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\n.bg hover me\r\n.container\r\n    - for(var i=0; i<500; i++)\r\n        .box\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 500;\r\n\r\n@function randomNum($max, $min: 0, $u: 1) {\r\n\t@return ($min + random($max)) * $u;\r\n}\r\n\r\n.bg {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    line-height: 100vh;\r\n    text-align: center;\r\n    font-size: 15vw;\r\n    -webkit-text-fill-color: transparent;\r\n    -webkit-text-stroke: 1px rgba(118, 218, 255, .8);\r\n    z-index: -1;\r\n}\r\n\r\n.container {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    z-index: 100;\r\n    \r\n    .box {\r\n        position: relative;\r\n        float: left;\r\n        width: 30px;\r\n        height: 30px;\r\n        margin: 4px;\r\n        // mix-blend-mode: multiply;    \r\n        \r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border-radius: 50%;  \r\n            transform: scale3d(0.1, 0.1, 1);\r\n            background-color: transparent;\r\n            transition: .5s transform ease-in,\r\n                        .5s background ease-in;\r\n        }\r\n    }\r\n    \r\n    .box:hover {\r\n        &::before {\r\n            transform: scale3d(1.8, 1.8, 1.8);\r\n            transition: 0s transform;\r\n        }\r\n    }\r\n}\r\n\r\n@for $i from 1 through $count {   \r\n    .box:nth-child(#{$i}):hover {\r\n        &::before {\r\n            background-color: rgba(randomNum(255), randomNum(255), randomNum(255), .8);\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n效果如下（在下图移动指针查看效果）：\r\n\r\n"
  },
  {
    "path": "others/pointer-follow-3.md",
    "content": "## PURE CSS 实现鼠标跟随3\r\n\r\nPURE CSS 实现鼠标跟随3。\r\n\r\n### 关键点\r\n\r\n+ 障眼法，通过将屏幕铺满 div 进行控制鼠标跟随\r\n+ 配合了滤镜 `blur` 以及 `contrast`\r\n\r\n详细信息，可以看看我的这篇文章：\r\n\r\n[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-container\r\n    -for(var i=0; i<100; i++)\r\n        div.position\r\n    .ball\r\n        -for(var j=0; j<10; j++)\r\n            .point\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 100;\r\n$points: 10;\r\n\r\n.g-container {\r\n    position: relative;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    // mix-blend-mode: screen;\r\n}\r\n\r\n.position {\r\n    position: absolute;\r\n    width: 10vw;\r\n    height: 10vh;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    // border: 1px solid #eee;\r\n}\r\n\r\n@for $i from 0 through $count {\r\n    $x: $i % 10;\r\n    $y: ($i - $x) / 10;\r\n\r\n    .position:nth-child(#{$i + 1}) {\r\n        top: #{$y * 10}vh;\r\n        left: #{$x * 10}vw;\r\n    }\r\n\r\n    .position:nth-child(#{$i + 1}):hover ~ .ball .point {\r\n        top: #{$y * 10 + 5}vh;\r\n        left: #{$x * 10 + 5}vw;\r\n        // transform: translate(-50%, -50%) scale(random(2) + 0.2);\r\n        //\r\n    }\r\n}\r\n\r\n.ball {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: -1;\r\n    filter: blur(5px) contrast(10) hue-rotate(50deg);\r\n    // background: #000;\r\n    background: linear-gradient(45deg, #000, #333, #666, #999, #ccc, #fff);\r\n\r\n    .point {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        mix-blend-mode: difference;\r\n    }\r\n\r\n    @for $j from 0 through $points {\r\n        .point:nth-child(#{$j}) {\r\n            width: 3vmax + 1vmax * $j;\r\n            height: 3vmax + + 1vmax * $j;\r\n            border: 0.9vmax solid #fff;\r\n            border-radius: 50%;\r\n            transition: 1s;\r\n            transition-delay: 8ms * $j;\r\n            transition-timing-function: cubic-bezier(0.27, 1.06, 0.82, 1.11);\r\n        }\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    100% {\r\n        transform: translate(-50%, -50%) rotate(90deg) scale(1.2);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（在下图移动指针查看效果）：\r\n\r\n"
  },
  {
    "path": "others/pointer-follow.md",
    "content": "## PURE CSS 实现鼠标跟随\r\n\r\nPURE CSS 实现鼠标跟随。\r\n\r\n### 关键点\r\n\r\n+ 其实也是障眼法，通过将屏幕铺满 div 进行控制。\r\n\r\n详细信息，可以看看我的这篇文章：\r\n\r\n[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-container\r\n    -for(var i=0; i<100; i++)\r\n        div.position\r\n    .ball\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 100;\r\n\r\n.g-container {\r\n    position: relative;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n}\r\n\r\n.position {\r\n    position: absolute;\r\n    width: 10vw;\r\n    height: 10vh;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    // border: 1px solid #eee;\r\n}\r\n\r\n@for $i from 0 through $count { \r\n    \r\n    $x: $i % 10;\r\n    $y: ($i - $x) / 10;\r\n    \r\n    .position:nth-child(#{$i + 1}) {\r\n        top: #{$y * 10}vh;\r\n        left: #{$x * 10}vw;\r\n    }\r\n    \r\n    .position:nth-child(#{$i + 1}):hover ~ .ball {\r\n        top: #{$y * 10 + 5}vh;\r\n        left: #{$x * 10 + 5}vw;\r\n        // transform: translate(-50%, -50%) scale(random(2) + 0.2);\r\n        // \r\n    }\r\n}\r\n\r\n.ball {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 10vmax;\r\n    height: 10vmax;\r\n    border-radius: 43%;\r\n    border: 2px solid #333;\r\n    transform: translate(-50%, -50%) rotate(0deg) scale(.8);\r\n    transition: .1s ease-in;\r\n    // transition-delay: .01s;\r\n    animation: rotate 3s infinite ease-in-out alternate;\r\n    z-index: -1;\r\n}\r\n\r\n@keyframes rotate {\r\n    100% {\r\n        transform: translate(-50%, -50%) rotate(90deg) scale(1.2);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（在下图移动指针查看效果）：\r\n\r\n"
  },
  {
    "path": "others/reflect-artist.md",
    "content": "## 利用 box-reflect 实现艺术图形\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect) 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。\r\n\r\n### 核心点\r\n\r\n利用了 `-webkit-box-reflect` 实现多层倒影的嵌套。\r\n\r\n详细信息可以看我的这篇文章：\r\n\r\n[巧用 -webkit-box-reflect 倒影实现各类动效](https://github.com/chokcoco/iCSS/issues/100)\r\n\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    
\r\n        
\r\n            
\r\n        
\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.g-wrap4 {\r\n    width: 50px;\r\n    height: 50px;\r\n    background: linear-gradient(45deg, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 50%, transparent 50%,  transparent 70%, #000 70%, #000 90%, transparent 0);\r\n}\r\n\r\n.radial {\r\n    .g-wrap4 {\r\n        width: 50px;\r\n        height: 50px;\r\n        background: radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%), radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);\r\n    }\r\n}\r\n\r\n.g-wrap4 {\r\n    -webkit-box-reflect: right 0px;\r\n}\r\n.g-wrap3 {\r\n    -webkit-box-reflect: below 0px;\r\n}\r\n.g-wrap2 {\r\n    -webkit-box-reflect: left 0px;\r\n}\r\n.g-wrap1 {\r\n    -webkit-box-reflect: above 0px;\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/reflect-btn-effect.md",
    "content": "## 利用 box-reflect 实现光影按钮\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect) 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。\r\n\r\n### 核心点\r\n\r\n利用了 `-webkit-box-reflect` 实现按钮的倒影效果，非常的有科技感。\r\n\r\n详细信息可以看我的这篇文章：\r\n\r\n[巧用 -webkit-box-reflect 倒影实现各类动效](https://github.com/chokcoco/iCSS/issues/100)\r\n\r\n\r\nHTML：\r\n\r\n```HTML\r\n
Neon
\r\n
Neon
\r\n
Neon
\r\n
Neon
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n:root {\r\n\t--color: #0ebeff;\r\n}\r\n\r\n@keyframes rotate {\r\n\t100% {\r\n\t\ttransform: translate(-50%, -50%) rotate(1turn);\r\n\t}\r\n}\r\n\r\n.btn {\r\n\tposition: relative;\r\n\tz-index: 0;\r\n\twidth: 160px;\r\n\theight: 80px;\r\n\tline-height: 80px;\r\n\tcolor: var(--color);\r\n\tfont-size: 24px;\r\n\tborder-radius: 10px;\r\n\ttext-align: center;\r\n\tmargin: auto;\r\n\toverflow: hidden;\r\n\tcursor: pointer;\r\n\ttransition: .3s;\r\n\t-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .4));\r\n\r\n\t&:hover {\r\n\t\tcolor: #fff;\r\n\t\tbox-shadow: 0 0 5px var(--color),\r\n\t\t\t0 0 25px var(--color);\r\n\t\t\r\n\t\t&::after,\r\n\t\t&::before {\r\n\t\t\ttransition: .3s;\r\n\t\t\tbackground: var(--color);\r\n\t\t}\r\n\t}\r\n\t\r\n\t&::before {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tz-index: -2;\r\n\t\tleft: 50%;\r\n\t\ttop: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\twidth: 150%;\r\n\t\theight: 300%;\r\n\t\tbackground-color: #000;\r\n\t\tbackground-repeat: no-repeat;\r\n\t\tbackground-size: 50% 50%;\r\n\t\tbackground-position: 0 0;\r\n\t\tbackground-image: conic-gradient(var(--color), var(--color));\r\n\t\tanimation: rotate 2s linear infinite;\r\n\t}\r\n\t\r\n\t&::after {\r\n\t\tcontent: '';\r\n\t\tposition: absolute;\r\n\t\tz-index: -1;\r\n\t\tleft: 2px;\r\n\t\ttop: 2px;\r\n\t\twidth: calc(100% - 4px);\r\n\t\theight: calc(100% - 4px);\r\n\t\tbackground: #000;\r\n\t\tborder-radius: 10px;\r\n\t}\r\n}\r\n\r\n.btn1 {\r\n\tfilter: hue-rotate(180deg);\r\n}\r\n\r\n.btn2 {\r\n\tfilter: hue-rotate(270deg);\r\n}\r\n\r\n.btn3 {\r\n\tfilter: hue-rotate(90deg);\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/reflect-text-effect.md",
    "content": "## 利用 box-reflect 实现 3D 照片墙倒影效果\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect) 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。\r\n\r\n### 核心点\r\n\r\n利用了 `-webkit-box-reflect` 实现 3D 照片墙的倒影效果，非常的有科技感。\r\n\r\n详细信息可以看我的这篇文章：\r\n\r\n[巧用 -webkit-box-reflect 倒影实现各类动效](https://github.com/chokcoco/iCSS/issues/100)\r\n\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n\t\r\n\t
\r\n\t\t\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n$imgCount : 8;\r\nhtml, body {\r\n\tbackground: #000;\r\n}\r\n\r\n.container{\r\n\tposition:relative;\r\n}\r\n\r\n.stage{\r\n\tposition:relative;\r\n\twidth: 800px;\r\n\theight: 240px;\r\n\tmargin: 20px auto;\r\n\tperspective:2000px;\r\n\ttransform-style: preserve-3d;\r\n\t-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .5));\r\n\t\r\n\t.control{\r\n\t\tposition:relative;\r\n\t\twidth:100%;\r\n\t\theight:100%;\r\n\t\ttransform-style: preserve-3d;\r\n\t\ttransform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);\r\n\t\tanimation:rotate 30s linear infinite;\r\n\t\t\r\n\t\t.imgWrap{\r\n\t\t\tposition:absolute;\r\n\t\t\twidth:400px;\r\n\t\t\theight:400px;\r\n\t\t\ttop:50%;\r\n\t\t\tleft:50%;\r\n\t\t\ttransform:translate(-50%, -50%);\r\n\t\t\ttransform-style: preserve-3d;\r\n\t\t\t\r\n\t\t\t.img{\r\n\t\t\t\tposition:absolute;\r\n\t\t\t\twidth:500px;\r\n\t\t\t\theight:400px;\r\n\t\t\t\tline-height:400px;\r\n\t\t\t\ttext-align:center;\r\n\t\t\t\tfont-size:120px;\r\n\t\t\t\ttop:0;\r\n\t\t\t\tleft:0;\r\n\t\t\t\ttransform-style: preserve-3d;\r\n\t\t\t\ttransform-origin: 50% 50% 0px;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\timg {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\theight: 100%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t}\r\n\r\n\t\t\t@for $i from 1 through $imgCount{\r\n\t\t\t\t.img#{$i}{\r\n\t\t\t\t\t// transform: rotateY(35 + ($i * 45deg)) translateZ(482.84px) ;\r\n\t\t\t\t\ttransform: rotateY(35 + ($i * 45deg)) translateZ(650px) ;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n@keyframes rotate{\r\n\t0%{\r\n\t\ttransform: translateZ(-2000px) rotateY(0deg);\r\n\t}\r\n\t50%{\r\n\t\ttransform: translateZ(-2000px) rotateY(-360deg);\r\n\t}\r\n\t100%{\r\n\t\ttransform: translateZ(-2000px) rotateY(-720deg);\r\n\t}\r\n}\r\n```\r\n\r\n效果如下：\r\n\r\n"
  },
  {
    "path": "others/word-break-move.md",
    "content": "## CSS文字分裂移动特效\r\n\r\nCSS文字分裂移动特效。\r\n\r\n### 关键点\r\n\r\n+ 使用多个容器，将文字进行了渐进分割\r\n+ 配合了滤镜 `blur` 以及 `contrast`\r\n\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-container\r\n    -for(var i=0; i<10; i++)\r\n        .g-view \r\n            .g-text MAGICSS \r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 10;\r\n\r\nhtml,\r\nbody {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    background: #000;\r\n}\r\n\r\n.g-container {\r\n    position: relative;\r\n    margin: 20vh auto;\r\n    width: 33vw;\r\n    height: 10vw;\r\n    filter: blur(0.2vw) contrast(20);\r\n}\r\n\r\n.g-view {\r\n    top: 0;\r\n    left: 0;\r\n    // transform: translate(-50%, -50%) rotate(0deg) scale(1);\r\n    position: absolute;\r\n    overflow: hidden;\r\n    font-size: 6vw;\r\n    height: 10vw;\r\n    background: #000;\r\n    mix-blend-mode: screen;\r\n}\r\n\r\n.g-text {\r\n    top: 0;\r\n    left: 0;\r\n    position: absolute;\r\n    width: 33vw;\r\n    color: #fff;\r\n    // text-align: center;\r\n}\r\n\r\n@for $i from 0 through $count {  \r\n    .g-view:nth-child(#{$i}) {\r\n        width: #{$i * 3}vw;\r\n        animation: rotate 2s ease-in-out #{$i * 80}ms forwards;\r\n        z-index: 10 - $i;\r\n        \r\n        $j: $i - 1;\r\n        \r\n        &::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: #{$j * 3}vw;\r\n            height: 10vw;\r\n            background: #000;\r\n            z-index: 1;\r\n        }\r\n    }    \r\n}\r\n\r\n@keyframes rotate {\r\n    0% {\r\n        transform: translate(0) rotate(0deg) scaleX(1) skewX(0) skewY(0);\r\n    }\r\n    50% {\r\n        transform: translate(40vw, 20vh) rotate(-180deg) scaleX(1.5) skewX(40deg) skewY(-20deg);\r\n    }\r\n    100% {\r\n        transform: translate(0vw) rotate(-360deg) scaleX(1) skewX(0) skewY(0);\r\n    }\r\n}\r\n\r\n\r\n@keyframes move {\r\n    100% {\r\n        transform: translate(0, 4vw);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（右下角 rerun 可以重复播放动画）：\r\n\r\n"
  },
  {
    "path": "others/word-break.md",
    "content": "## CSS文字分裂特效\r\n\r\nCSS文字分裂特效。\r\n\r\n### 关键点\r\n\r\n+ 使用多个容器，将文字进行了渐进分割\r\n+ 配合了滤镜 `blur` 以及 `contrast`\r\n\r\n\r\nHTML：\r\n\r\n```pug\r\n// pug模板\r\ndiv.g-container\r\n    -for(var i=0; i<11; i++)\r\n        .g-view \r\n            .g-text MAGICCSS \r\n```\r\n\r\nSCSS：\r\n```scss\r\n$count: 11;\r\n\r\nhtml,\r\nbody {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n}\r\n\r\n.g-container {\r\n    position: relative;\r\n    margin: 20vh auto;\r\n    width: 33vw;\r\n    height: 10vw;\r\n    filter: blur(0.2vw) contrast(8);\r\n}\r\n\r\n.g-view {\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) rotate(0deg) scale(1);\r\n    position: absolute;\r\n    overflow: hidden;\r\n    font-size: 6vw;\r\n    height: 10vw;\r\n}\r\n\r\n.g-text {\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    position: absolute;\r\n    width: 33vw;\r\n    text-align: center;\r\n}\r\n\r\n@for $i from 0 through $count {  \r\n    .g-view:nth-child(#{$i}) {\r\n        width: #{$i * 3}vw;\r\n        animation: rotate 1.5s ease-in #{$i * 140}ms;\r\n        z-index: 10 - $i;\r\n        \r\n        &::before {\r\n            $j: $i - 1;\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: #{$j * 3}vw;\r\n            height: 10vw;\r\n            background: #fff;\r\n            z-index: 1;\r\n        }\r\n    }    \r\n}\r\n\r\n@keyframes rotate {\r\n    0% {\r\n        transform: translate(-50%, -50%) rotate(0deg) scaleX(1);\r\n    }\r\n    50% {\r\n        transform: translate(-50%, -50%) rotate(180deg) scaleX(0.1);\r\n    }\r\n    100% {\r\n        transform: translate(-50%, -50%) rotate(360deg) scaleX(1);\r\n    }\r\n}\r\n```\r\n\r\n效果如下（右下角 rerun 可以重复播放动画）：\r\n\r\n"
  },
  {
    "path": "others/word-glitch.md",
    "content": "## CSS文字故障效果\r\n\r\nCSS文字故障效果。\r\n\r\n### 关键点\r\n\r\n+ 利用了伪元素生成了文字的两个副本\r\n+ 视觉效果由位移、遮罩、混合模式完成\r\n+ 配色借鉴了抖音 LOGO 的风格\r\n\r\n详细信息可以看我的这篇文章：\r\n\r\n[CSS 故障艺术](https://github.com/chokcoco/iCSS/issues/78)\r\n\r\n\r\nHTML：\r\n\r\n```HTML\r\n
\r\n    CSSTextMagic\r\n    
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.text-magic {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) scale(2.4);\r\n    width: 300px;\r\n    font-size: 36px;\r\n    font-family: Raleway, Verdana, Arial;\r\n    color: #fff;\r\n}\r\n.white {\r\n    position: absolute;\r\n    left: -10px;\r\n    width: 100%;\r\n    height: 3px;\r\n    background: #000;\r\n    z-index: 4;\r\n    animation: whiteMove 3s ease-out infinite;\r\n}\r\n\r\n.text-magic::before {\r\n    content: attr(data-word);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0.5px;\r\n    height: 0px;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    overflow: hidden;\r\n    z-index: 2;\r\n    animation: redShadow 1s ease-in infinite;\r\n    filter: contrast(200%);\r\n    text-shadow: 1px 0 0 red;\r\n}\r\n\r\n.text-magic::after {\r\n    content: attr(data-word);\r\n    position: absolute;\r\n    top: 0;\r\n    left: -3px;\r\n    height: 36px;\r\n    color: rgba(255, 255, 255, 0.8);\r\n    overflow: hidden;\r\n    z-index: 3;\r\n    background: rgba(0, 0, 0, 0.9);\r\n    animation: redHeight 1.5s ease-out infinite;\r\n    filter: contrast(200%);\r\n    text-shadow: -1px 0 0 cyan;\r\n    mix-blend-mode: darken;\r\n}\r\n\r\n@keyframes redShadow {\r\n    20% {\r\n        height: 32px;\r\n    }\r\n    60% {\r\n        height: 6px;\r\n    }\r\n    100% {\r\n        height: 42px;\r\n    }\r\n}\r\n\r\n@keyframes redHeight {\r\n    20% {\r\n        height: 42px;\r\n    }\r\n    35% {\r\n        height: 12px;\r\n    }\r\n    50% {\r\n        height: 40px;\r\n    }\r\n    60% {\r\n        height: 20px;\r\n    }\r\n    70% {\r\n        height: 34px;\r\n    }\r\n    80% {\r\n        height: 22px;\r\n    }\r\n    100% {\r\n        height: 0px;\r\n    }\r\n}\r\n\r\n@keyframes whiteMove {\r\n    8% {\r\n        top: 38px;\r\n    }\r\n    14% {\r\n        top: 8px;\r\n    }\r\n    20% {\r\n        top: 42px;\r\n    }\r\n    32% {\r\n        top: 2px;\r\n    }\r\n    99% {\r\n        top: 30px;\r\n    }\r\n}\r\n```\r\n\r\n效果如下（右下角 rerun 可以重复播放动画）：\r\n\r\n"
  },
  {
    "path": "pesudo/pesudo-animation-control-hover.md",
    "content": "## 伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:hover` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 使用 hover 伪类，在鼠标悬停在按钮上面时，控制动画样式的暂停\r\n+ 使用了 `~` 选择符对样式进行控制\r\n\r\n### 相关文章\r\n\r\n[纯 CSS 方式实现 CSS 动画的暂停与播放](https://github.com/chokcoco/iCSS/issues/12)\r\n\r\nHTML：\r\n\r\n```html\r\n
stop
\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.animation {\r\n    width: 100px;\r\n    height: 100px;\r\n    margin: 50px auto;\r\n    background: deeppink;\r\n    animation: move 2s linear infinite alternate;\r\n}\r\n\r\ninput {\r\n    display: none;\r\n}\r\n\r\n@keyframes move {\r\n    0% {\r\n        transform: translate(-100px, 0);\r\n    }\r\n    100% {\r\n        transform: translate(100px, 0);\r\n    }\r\n}\r\n\r\n.btn {\r\n    width: 50px;\r\n    margin: 10px auto;\r\n    text-align: center;\r\n    border:1px solid #ddd;\r\n    padding: 10px;\r\n    border-radius: 5px;\r\n    cursor:pointer;\r\n    \r\n    &:hover {\r\n        background: #ddd;\r\n        color: #333;\r\n    }\r\n    \r\n    &:active {\r\n        background: #aaa;\r\n    }\r\n}\r\n\r\n.stop:hover ~ .animation {\r\n    animation-play-state: paused;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "pesudo/pesudo-animation-control-target.md",
    "content": "## 伪元素 target 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:target` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 如何接收点击事件：本例子最重要的核心便是使用 `:target` 伪类接收点击事件\r\n+ 如何操作相关DOM：通过兄弟选择符 `~` 控制样式\r\n\r\n### 相关文章\r\n\r\n[纯CSS的导航栏Tab切换方案](http://www.cnblogs.com/coco1s/p/5955631.html)\r\n\r\nHTML：\r\n\r\n```html\r\n
\r\n
\r\n\r\n
\r\n    stop\r\n    play\r\n
\r\n\r\n
\r\n```\r\n\r\nSCSS：\r\n```scss\r\n.animation {\r\n    width: 100px;\r\n    height: 100px;\r\n    margin: 50px auto;\r\n    background: deeppink;\r\n    animation: move 2s linear infinite alternate;\r\n}\r\n\r\ninput {\r\n    display: none;\r\n}\r\n\r\n@keyframes move {\r\n    0% {\r\n        transform: translate(-100px, 0);\r\n    }\r\n    100% {\r\n        transform: translate(100px, 0);\r\n    }\r\n}\r\n\r\n.btn {\r\n    display: block;\r\n    width: 50px;\r\n    margin: 10px auto;\r\n    text-align: center;\r\n    border:1px solid #ddd;\r\n    padding: 10px;\r\n    border-radius: 5px;\r\n    cursor:pointer;\r\n    text-decoration: none;\r\n    \r\n    a {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    \r\n    &:hover {\r\n        background: #ddd;\r\n        color: #333;\r\n    }\r\n    \r\n    &:active {\r\n        background: #aaa;\r\n    }\r\n}\r\n\r\n#stop:target ~ .animation {\r\n    animation-play-state: paused;\r\n}\r\n\r\n#play:target ~ .animation {\r\n    animation-play-state: running;\r\n}\r\n```\r\n\r\n效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：\r\n\r\n"
  },
  {
    "path": "pesudo/pesudo-animation-control.md",
    "content": "## 伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:checked` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 使用 radio 标签的 `:checked` 伪类，加上 `