From 1095783bba6655780fecf8f6ea0a13f118bdbc85 Mon Sep 17 00:00:00 2001 From: cocoqiao <308695699@qq.com> Date: Sun, 19 Jan 2020 19:05:27 +0800 Subject: [PATCH] fix(all): update github page source --- .DS_Store | Bin 0 -> 8196 bytes .nojekyll | 0 3d/3d-parallax.md | 210 +++++----- 3d/3d-parallax2.md | 168 ++++---- 3d/3d-translate-parallax.md | 154 ++++---- README.md | 294 ++++++++------ _sidebar.md | 239 ++++++------ animation/animation-button-border.md | 288 +++++++------- animation/animation-curve.md | 108 +++--- assets/css/highlight.css | 192 +++++----- assets/css/index.css | 214 +++++------ assets/css/prism-line-numbers.css | 80 ++-- assets/js/gittalk.min.js | 19 + assets/js/highlight.js | 2 +- assets/js/index.js | 79 +++- assets/js/md5.js | 2 +- assets/js/prism-line-number.js | 324 ++++++++-------- background/bg-arrow.md | 94 ++--- background/bg-coupon.md | 216 +++++------ background/bg-focus.md | 106 +++--- background/bg-frosted-glass.md | 162 ++++---- background/bg-inscribed.md | 78 ++-- background/bg-stripe.md | 88 ++--- background/bg-underline.md | 180 ++++----- background/bg-wave-border.md | 108 +++--- background/bg-wave.md | 144 +++---- blendmode/blend-color-set.md | 120 +++--- blendmode/blend-douyin-logo.md | 224 +++++------ blendmode/blend-loading.md | 276 +++++++------- blendmode/blend-mix.md | 112 +++--- blendmode/blend-rotate.md | 152 ++++---- border/border-loading.md | 144 +++---- border/border-typing.md | 102 ++--- border/border-wave-percent.md | 156 ++++---- border/border-wave.md | 166 ++++---- filter/filter-blur-constrast.md | 154 ++++---- filter/filter-fire.md | 258 ++++++------- filter/filter-mix.md | 176 ++++----- filter/filter-shadow.md | 134 +++---- images/logo.png | Bin images/logo2.png | Bin index.html | 16 +- init.md | 36 +- layout/best-way-to-center-element.md | 54 +++ layout/colum-waterfalls-flow.md | 128 +++---- layout/double-wing-layout.md | 144 +++---- layout/flex-holy-grail-layout.md | 136 +++---- layout/flex-waterfalls-flow.md | 150 ++++---- layout/grid-waterfalls-flow.md | 190 +++++----- layout/holy-grail-layout.md | 142 +++---- layout/multi-column-contour.md | 344 ++++++++--------- layout/multi-row-or-column.md | 248 ++++++------ layout/single-column-isometric.md | 358 +++++++++--------- .../use-margin-auto-to-simulate-align-self.md | 87 +++++ ...e-margin-auto-to-simulate-space-between.md | 68 ++++ logo2.png | Bin others/1px-line.md | 206 +++++----- pesudo/pesudo-animation-control-hover.md | 140 +++---- pesudo/pesudo-animation-control-target.md | 178 ++++----- pesudo/pesudo-animation-control.md | 170 ++++----- pesudo/pesudo-boundary-judge.md | 151 ++++++++ pesudo/pesudo-bubble.md | 254 ++++++------- pesudo/pesudo-focus-checked.md | 266 ++++++------- pesudo/pesudo-focus-target.md | 272 ++++++------- .../pesudo-focus-within-placeholder-shown.md | 174 ++++----- pesudo/pesudo-focus-within.md | 194 +++++----- pesudo/pesudo-juejin.md | 256 ++++++------- pesudo/pesudo-loading-content.md | 54 +++ pesudo/pesudo-loading-line.md | 87 +++++ pesudo/pesudo-not.md | 196 +++++----- shadow/circle-loading.md | 156 ++++---- shadow/douyin-logo.md | 202 +++++----- shadow/ie-logo.md | 114 +++--- shadow/inscribed-angle.md | 236 ++++++------ shadow/long-shadow.md | 148 ++++---- shadow/neon-shadow-light.md | 192 +++++----- shadow/one-sided-shadow.md | 82 ++-- shadow/opacity-wrap.md | 72 ++-- shadow/shadow-ani-ii.md | 310 +++++++-------- shadow/shadow-ani.md | 216 +++++------ shadow/single-div-fork.md | 63 +++ shadow/solid-shadow.md | 236 ++++++------ shadow/word-solid-shadow-ii.md | 116 +++--- shadow/word-solid-shadow.md | 122 +++--- svg/svg-arc-word.md | 84 ++-- 85 files changed, 6730 insertions(+), 6041 deletions(-) create mode 100644 .DS_Store mode change 100644 => 100755 .nojekyll mode change 100644 => 100755 3d/3d-parallax.md mode change 100644 => 100755 3d/3d-parallax2.md mode change 100644 => 100755 3d/3d-translate-parallax.md mode change 100644 => 100755 README.md mode change 100644 => 100755 _sidebar.md mode change 100644 => 100755 animation/animation-button-border.md mode change 100644 => 100755 animation/animation-curve.md mode change 100644 => 100755 assets/css/highlight.css mode change 100644 => 100755 assets/css/index.css mode change 100644 => 100755 assets/css/prism-line-numbers.css create mode 100644 assets/js/gittalk.min.js mode change 100644 => 100755 assets/js/highlight.js mode change 100644 => 100755 assets/js/index.js mode change 100644 => 100755 assets/js/md5.js mode change 100644 => 100755 assets/js/prism-line-number.js mode change 100644 => 100755 background/bg-arrow.md mode change 100644 => 100755 background/bg-coupon.md mode change 100644 => 100755 background/bg-focus.md mode change 100644 => 100755 background/bg-frosted-glass.md mode change 100644 => 100755 background/bg-inscribed.md mode change 100644 => 100755 background/bg-stripe.md mode change 100644 => 100755 background/bg-underline.md mode change 100644 => 100755 background/bg-wave-border.md mode change 100644 => 100755 background/bg-wave.md mode change 100644 => 100755 blendmode/blend-color-set.md mode change 100644 => 100755 blendmode/blend-douyin-logo.md mode change 100644 => 100755 blendmode/blend-loading.md mode change 100644 => 100755 blendmode/blend-mix.md mode change 100644 => 100755 blendmode/blend-rotate.md mode change 100644 => 100755 border/border-loading.md mode change 100644 => 100755 border/border-typing.md mode change 100644 => 100755 border/border-wave-percent.md mode change 100644 => 100755 border/border-wave.md mode change 100644 => 100755 filter/filter-blur-constrast.md mode change 100644 => 100755 filter/filter-fire.md mode change 100644 => 100755 filter/filter-mix.md mode change 100644 => 100755 filter/filter-shadow.md mode change 100644 => 100755 images/logo.png mode change 100644 => 100755 images/logo2.png mode change 100644 => 100755 index.html mode change 100644 => 100755 init.md create mode 100755 layout/best-way-to-center-element.md mode change 100644 => 100755 layout/colum-waterfalls-flow.md mode change 100644 => 100755 layout/double-wing-layout.md mode change 100644 => 100755 layout/flex-holy-grail-layout.md mode change 100644 => 100755 layout/flex-waterfalls-flow.md mode change 100644 => 100755 layout/grid-waterfalls-flow.md mode change 100644 => 100755 layout/holy-grail-layout.md mode change 100644 => 100755 layout/multi-column-contour.md mode change 100644 => 100755 layout/multi-row-or-column.md mode change 100644 => 100755 layout/single-column-isometric.md create mode 100755 layout/use-margin-auto-to-simulate-align-self.md create mode 100755 layout/use-margin-auto-to-simulate-space-between.md mode change 100644 => 100755 logo2.png mode change 100644 => 100755 others/1px-line.md mode change 100644 => 100755 pesudo/pesudo-animation-control-hover.md mode change 100644 => 100755 pesudo/pesudo-animation-control-target.md mode change 100644 => 100755 pesudo/pesudo-animation-control.md create mode 100755 pesudo/pesudo-boundary-judge.md mode change 100644 => 100755 pesudo/pesudo-bubble.md mode change 100644 => 100755 pesudo/pesudo-focus-checked.md mode change 100644 => 100755 pesudo/pesudo-focus-target.md mode change 100644 => 100755 pesudo/pesudo-focus-within-placeholder-shown.md mode change 100644 => 100755 pesudo/pesudo-focus-within.md mode change 100644 => 100755 pesudo/pesudo-juejin.md create mode 100755 pesudo/pesudo-loading-content.md create mode 100755 pesudo/pesudo-loading-line.md mode change 100644 => 100755 pesudo/pesudo-not.md mode change 100644 => 100755 shadow/circle-loading.md mode change 100644 => 100755 shadow/douyin-logo.md mode change 100644 => 100755 shadow/ie-logo.md mode change 100644 => 100755 shadow/inscribed-angle.md mode change 100644 => 100755 shadow/long-shadow.md mode change 100644 => 100755 shadow/neon-shadow-light.md mode change 100644 => 100755 shadow/one-sided-shadow.md mode change 100644 => 100755 shadow/opacity-wrap.md mode change 100644 => 100755 shadow/shadow-ani-ii.md mode change 100644 => 100755 shadow/shadow-ani.md create mode 100755 shadow/single-div-fork.md mode change 100644 => 100755 shadow/solid-shadow.md mode change 100644 => 100755 shadow/word-solid-shadow-ii.md mode change 100644 => 100755 shadow/word-solid-shadow.md mode change 100644 => 100755 svg/svg-arc-word.md diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..648e952a33891ce48f78bff9ddeeedeaae0de51c GIT binary patch literal 8196 zcmeHMPfrs;6n_I%b}P!FU?I_@u`w|b4Mfm`F|HMAng1QE-&JJgkBrrBLUKuj-w z0FRn@HSsf;c-Bwg$@md8@#IP0{Aqy#2QNnAykzG0_Ragv?EKo<>1+Xj~!=|EhCrZx%~1$HYS&h9C=2o(q*X*$1O z#kO<5q)B4Bo`<;=V89^)+QfO+#7TjVd1Z)q=8?>Pd8O63s^1}eDpkWEPWt;lla|)h zp~G#KmA2AH({qK#e6^5x$#R_cqFHe@?j?^)+Mnb+Z1`SjDxj-Hr|TwXi5D;$Npj#* zOnG=eU_M{X^JV78vY&!#uq@lMi%!qR#^BIUUv_Y4aI-JFapg)s`j;+mZrWDn?7+3r z`K7h>jc1$BUrBj@=w}mjsOv`k8oh=PL3u?_kbJ05@T=q0r)Z~-v>!dz;dCB9(b?76 z-F-6C)7_iNoGLmeN?v)f5{a9=$wMCH!(}>Ki2}b+^~wROOegedQV7;*(K+6fIzjzM zTcOFdD&}-;1!Q-(B1)O;Z){;9rpfd+f2Qbk#N~*G;W&?jB;ai3VT`hmCUj|(EpQxh z1!W$qil%sqMls?p&h(5IMINir{MuaTm1sD|@;piSlE@Ujl{p)asOV`rKwr!ycm2DP zG3VZ?JLi<+Ku$RTId^_u`nE$R8E4eCbMClqwctG5fV(gSi?9wa;SIcl_wW(Ez&H3w z+DI=sL(Y>ya*bRkx5+&+K_P0#zcN6RKdfq z{UX*Cpl|^~xeOL@2|a-reb%%fULb4xVry^eVL#rFCY}uwFoN?P#u<;`XiMPl90|m- ze!Fd1(A8K|C_*AGcVR@c{|iBk83hiI0rVt}&=0$*% L!Bj?pzpB7*1R5b( literal 0 HcmV?d00001 diff --git a/.nojekyll b/.nojekyll old mode 100644 new mode 100755 diff --git a/3d/3d-parallax.md b/3d/3d-parallax.md old mode 100644 new mode 100755 index 2ecc564..3acb493 --- a/3d/3d-parallax.md +++ b/3d/3d-parallax.md @@ -1,106 +1,106 @@ -## 借助 translate3d\perspective 实现 3D 视差效果 - -借助 translate3d\perspective 实现 3D 视差效果。 - -视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 - -### 关键点 - -+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， - -+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样 - -+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。 - -详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html) - -HTML： - -```html -
-
-

Just hover around

-

translateZ 3D

-

3D视差

-
-
-``` - -SCSS： -```scss - -body{ - background: #edf2f4; - perspective: 1000px; - transform-style: preserve-3d; - display: flex; - height: 100vh; - font-family: "Playfair Display",georgia,serif; -} -.card{ - pointer-events: none; - transform: translateZ(0); - padding: 30px; - background: white; - border-radius: 5px; - width: 400px; - height: 200px; - margin: auto; - transform-style: preserve-3d; - backface-visibility: hidden; - display: flex; - box-shadow: 0 0 5px rgba(0,0,0,.1); - position: relative; - animation: move 10s infinite alternate; - - &:after{ - content:" "; - position: absolute; - width: 100%; - height: 10px; - border-radius: 50%; - left:0; - bottom:-50px; - box-shadow: 0 30px 20px rgba(0,0,0,.3); - - } - - .card-content{ - margin: auto; - text-align:center; - transform-style: preserve-3d; - line-height: 40px; - } - - h1{ - transform: translateZ(100px); - } - p{ - transform: translateZ(50px); - display: block; - - &.related{ - transform: translateZ(80px); - font-style: italic; - } - } - a{ - color:#69c6b8; - pointer-events: auto; - } -} - -@keyframes move { - 0% { - transform: rotateY(20deg) rotateZ(10deg); - } - 100% { - transform: rotateY(-60deg) rotateZ(-10deg); - } -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/3d/3d-parallax2.md b/3d/3d-parallax2.md old mode 100644 new mode 100755 index e4df213..521e8e8 --- a/3d/3d-parallax2.md +++ b/3d/3d-parallax2.md @@ -1,85 +1,85 @@ -## 借助 translate3d\perspective 实现 3D 视差效果 - -借助 translate3d\perspective 实现 3D 视差效果。 - -视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 - -### 关键点 - -+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， - -+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样 - -+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。 - -详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html) - -HTML： - -```pug -// pug模板 -div.g-container - - for(var i=0; i<10; i++) - div.g-section CSS Parallax -``` - -SCSS： -```scss -$length: 10; - -@function randomNum($max, $min: 0, $u: 1) { - @return ($min + random($max)) * $u; -} - -body { - background: #000; - font-family: "lato", lucida grande,lucida sans unicode,lucida,helvetica,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; -} - -.g-container { - width: 100vw; - height: 100vh; - overflow-x: hidden; - overflow: scroll; - transform-style: preserve-3d; - // perspective: 1px; - // mix-blend-mode: lighten; - filter: blur(5px) contrast(5px); - animation: perspectiveChange 10s infinite ease-in alternate; -} - -.g-section { - position: absolute; - top: 0; - left: 0; - width: 100vw; - text-align: center; - line-height: 100vh; - padding: 30vh 0; - font-size: 15vh; -} - -@for $i from 1 through $length { - .g-section:nth-child(#{$i}) { - transform: translate3d(-200px, 0, -#{$i}px) scale(#{$i * 0.1 + 1 }); - $hue : $i * 35deg; - color : hsla($hue, 100%, 60%, .8); - // text-shadow: 0px 0px 1px hsla($hue, 100%, 60%, .9); - z-index: #{$i}; - } -} - -@keyframes perspectiveChange { - 0% { - perspective: 12; - } - 100% { - perspective: 120; - } -} -``` - -效果如下（点击 `PUG/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/3d/3d-translate-parallax.md b/3d/3d-translate-parallax.md old mode 100644 new mode 100755 index 2cf558c..f1f96f2 --- a/3d/3d-translate-parallax.md +++ b/3d/3d-translate-parallax.md @@ -1,78 +1,78 @@ -## 使用 translateZ 实现滚动视差 - -使用 `translateZ` 实现滚动视差。 - -视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 - -### 关键点 - -+ 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中， - -+ 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样 - -+ 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。 - -详细分析请看：[滚动视差？CSS 不在话下](https://www.cnblogs.com/coco1s/p/9453938.html) - -HTML： - -```html -
-
translateZ(-1)
-
translateZ(-2)
-
translateZ(-3)
-
-``` - -SCSS： -```scss -html { - height: 100%; - overflow: hidden; -} - -body { - margin: 0; - padding: 0; - perspective: 2px; - transform-style: preserve-3d; - transform-origin: center center; - height: 100%; - overflow-y: scroll; - overflow-x: hidden; -} - -.g-container { - position: relative; - height: 150%; - - & > div { - font-size: 5vw; - position: absolute; - top: 20%; - } - - .section-one { - left: 0%; - background: rgba(10, 10, 10, .2); - transform: translateZ(-1px); - } - - .section-two { - left: 40%; - background: rgba(30, 130, 30, .2); - transform: translateZ(-2px); - } - - .section-three { - left: 90%; - background: rgba(200, 100, 130, .2); - transform: translateZ(-3px); - } -} -``` - -效果如下，滚动页面（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/README.md b/README.md old mode 100644 new mode 100755 index f023a06..7589d10 --- a/README.md +++ b/README.md @@ -1,119 +1,175 @@ -![logo2.png](./images/logo2.png) - -这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。 - -## 在线预览 - -[Online Pages](https://chokcoco.github.io/CSS-Inspiration/#/) - -## Layout - -+ [CSS实现瀑布流布局（display: flex）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-waterfalls-flow.md) -+ [CSS实现瀑布流布局（colum+count）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/colum-waterfalls-flow.md) -+ [CSS实现瀑布流布局（display: grid）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/grid-waterfalls-flow.md) -+ [多方案实现跨行或跨列布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-row-or-column.md) -+ [多种方案实现单列等宽，其他多列自适应均匀布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/single-column-isometric.md) -+ [多种方案实现多列等高布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-column-contour.md) -+ [圣杯布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout.md) -+ [圣杯布局（flex实现）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-holy-grail-layout.md) -+ [双飞翼布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout.md) - -## 阴影(box-shadow、drop-shadow) - -+ [单侧投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/one-sided-shadow.md) -+ [立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/solid-shadow.md) -+ [文字立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow.md) -+ [长阴影(线性渐变模拟)](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/long-shadow.md) -+ [线性渐变|阴影实现条纹立体阴影条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow-ii.md) -+ [使用 box-shadow 实现半透明遮罩](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/opacity-wrap.md) -+ [box-shadow 实现背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani.md) -+ [box-shadow 模拟实现类似线性渐变背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani-ii.md) -+ [box-shadow 模拟霓虹氙灯文字效果](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/neon-shadow-light.md) -+ [单标签借助 inset shdow 实现IE LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/ie-logo.md) -+ [借助 filter:drop-shadow ，单标签实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/douyin-logo.md) -+ [Box-shadow 实现圆环进度条动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/circle-loading.md) -+ [使用box-shadow/渐变实现内切圆角](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/inscribed-angle.md) - -## 伪类/伪元素 - -+ [使用`:not()`伪类实现弹窗背景元素模糊](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-not.md) -+ [伪类`:focus-within`纯 CSS 方式实现掘金登陆特效](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-juejin.md) -+ [伪类`placeholder-shown`实现表单交互](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md) -+ [伪元素配合 border 实现气泡对话框](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-bubble.md) -+ [伪类`:checked`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-checked.md) -+ [伪类`:target`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-target.md) -+ [伪类`:focus-within`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within.md) -+ [伪类`:hover`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-hover.md) -+ [伪类`:checked`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control.md) -+ [伪类`:target`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-target.md) - -## 滤镜(fliter) - -+ [使用 filter:blur 生成彩色阴影](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-shadow.md) -+ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-blur-constrast.md) -+ [使用 filter:blur | filter:constrast 生成火焰效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-fire.md) -+ [滤镜及混合模式混搭特效](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-mix.md) -+ [使用 filter:blur | filter:constrast 单标签实现滴水效果](https://codepen.io/Chokcoco/pen/gZVjJw) - - -## 边框(border) - -+ [活用 border-radius, 实现波浪动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave.md) -+ [活用 border-radius, 实现波浪百分比图](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave-percent.md) -+ [border-radius 变换实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-loading.md) -+ [border-color 变换实现文字输入效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-typing.md) - -## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) - -+ [线性渐变实现条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-stripe.md) -+ [重复径向渐变实现波浪边框](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-wave-border.md) -+ [渐变实现波浪效果/波浪进度框](https://chokcoco.github.io/CSS-Inspiration/#/./bg-wave.md) -+ [渐变实现优惠券波浪造型](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-coupon.md) -+ [线性渐变实现内切直角](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-inscribed.md) -+ [线性渐变实现箭头符号](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-arrow.md) -+ [利用线性渐变实现下划线](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-underline.md) -+ [使用 background-attachment 实现毛玻璃效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-frosted-glass.md) -+ [使用渐变实现舞台灯光聚焦效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-focus.md) -+ [圆锥渐变配合混合模式实现炫酷光影效果](https://codepen.io/Chokcoco/pen/gRRdQq) -+ [mask-image 实现图片变幻](https://codepen.io/Chokcoco/pen/VqdQwB) -+ [使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM) - -## 混合模式（mix-blend-mode/background-blend-mode) - -+ [mix-blend-mode 实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-loading.md) -+ [mix-blend-mode 实现颜色叠加旋转动画](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-rotate.md) -+ [使用 mix-blend-mode 实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-douyin-logo.md) -+ [类抖音 LOGO 晕眩效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-mix.md) -+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-color-set.md) -+ [CSS MIX](https://codepen.io/Chokcoco/pen/REoKpQ) -+ [CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/bOgamV) -+ [CSS MAGIC MIX2](https://codepen.io/Chokcoco/pen/royQvE?editors=1100) -+ [CSS WAVE MOVE(惊艳的水波效果)](https://codepen.io/Chokcoco/pen/VqbxQr) - -## 3D - -+ [使用 translateZ 实现滚动视差](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-translate-parallax.md) -+ [借助 translate3d\perspective 实现 3D 视差效果](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax.md) -+ [借助 translate3d\perspective 实现 3D 视差效果2](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax2.md) -+ [3d 球动画](https://codepen.io/Chokcoco/pen/JwdvmJ) -+ [3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB) - -## 动画/过渡(transition/animation) - -+ [借助transition-delay实现按钮border动画效果](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-button-border.md) -+ [简单曲线运动](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-curve.md) -+ [借助transition-delay简单多重圆的位移](https://codepen.io/Chokcoco/pen/QzzwVO) -+ [动画正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy) - -## SVG - -+ [使用 SVG 实现文字弧形排列](https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-arc-word.md) - -## 综合 - -+ [retina屏下的1px线的实现](https://chokcoco.github.io/CSS-Inspiration/#/./others/1px-line.md) -+ [MAGIC CSS MIX](https://codepen.io/Chokcoco/pen/XogwvV) -+ [PURE CSS 实现鼠标跟随](https://codepen.io/Chokcoco/pen/MZqMVO) -+ [鼠标跟随动画 PURE CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/zyyYqN) -+ [CSS文字分裂特效](https://codepen.io/Chokcoco/pen/wRZKNY) -+ [CSS TEXT Animation](https://codepen.io/Chokcoco/pen/dwxPWO) +![logo2.png](./images/logo2.png) + +这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。 + +## 在线预览 + +[Online Pages](https://chokcoco.github.io/CSS-Inspiration/#/) + +> 下面很多例子不一定同步更新到我的在线网站（就是这里的 Online Pages），建议以下面的导航为准，很多 Demo 会直接链接到我的 CodePen。 + +## Layout + ++ [CSS实现瀑布流布局（display: flex）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-waterfalls-flow.md) ++ [CSS实现瀑布流布局（colum+count）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/colum-waterfalls-flow.md) ++ [CSS实现瀑布流布局（display: grid）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/grid-waterfalls-flow.md) ++ [多方案实现跨行或跨列布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-row-or-column.md) ++ [多种方案实现单列等宽，其他多列自适应均匀布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/single-column-isometric.md) ++ [多种方案实现多列等高布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/multi-column-contour.md) ++ [圣杯布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout.md) ++ [圣杯布局（flex实现）](https://chokcoco.github.io/CSS-Inspiration/#/./layout/flex-holy-grail-layout.md) ++ [双飞翼布局](https://chokcoco.github.io/CSS-Inspiration/#/./layout/double-wing-layout.md) ++ [实现水平垂直居中最便捷的方法](https://chokcoco.github.io/CSS-Inspiration/#/./layout/best-way-to-center-element.md) ++ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://chokcoco.github.io/CSS-Inspiration/#/./layout/use-margin-auto-to-simulate-space-between.md) ++ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://chokcoco.github.io/CSS-Inspiration/#/./layout/use-margin-auto-to-simulate-align-self.md) + +## 阴影(box-shadow、drop-shadow) + ++ [单侧投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/one-sided-shadow.md) ++ [立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/solid-shadow.md) ++ [文字立体投影](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow.md) ++ [长阴影(线性渐变模拟)](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/long-shadow.md) ++ [线性渐变|阴影实现条纹立体阴影条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/word-solid-shadow-ii.md) ++ [使用 box-shadow 实现半透明遮罩](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/opacity-wrap.md) ++ [box-shadow 实现背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani.md) ++ [box-shadow 模拟实现类似线性渐变背景动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/shadow-ani-ii.md) ++ [box-shadow 模拟霓虹氙灯文字效果](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/neon-shadow-light.md) ++ [单标签借助 inset shdow 实现IE LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/ie-logo.md) ++ [借助 filter:drop-shadow ，单标签实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/douyin-logo.md) ++ [Box-shadow 实现圆环进度条动画](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/circle-loading.md) ++ [使用box-shadow/渐变实现内切圆角](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/inscribed-angle.md) ++ [使用box-shadow单标签实现叉子图形](https://chokcoco.github.io/CSS-Inspiration/#/./shadow/single-div-fork.md) + +## 伪类/伪元素 + ++ [使用`:not()`伪类实现弹窗背景元素模糊](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-not.md) ++ [使用`:not()`伪类控制特殊边框样式](https://codepen.io/Chokcoco/pen/EMYGQZ) ++ [伪类`:focus-within`纯 CSS 方式实现掘金登陆特效](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-juejin.md) ++ [伪类`placeholder-shown`实现表单交互](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md) ++ [伪元素配合 border 实现气泡对话框](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-bubble.md) ++ [伪类`:checked`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-checked.md) ++ [伪类`:target`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-target.md) ++ [伪类`:focus-within`实现纯 CSS Tab 切换](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-within.md) ++ [伪类`:hover`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-hover.md) ++ [伪类`:checked`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control.md) ++ [伪类`:target`实现纯 CSS 方式控制动画的暂停与播放](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-animation-control-target.md) ++ [借助伪元素实现边界智能判断移动](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-boundary-judge.md) ++ [伪元素实现打点 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-loading-content.md) ++ [伪元素遮罩实现线条 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-loading-line.md) + + +## 滤镜(fliter) + ++ [使用 filter:blur 生成彩色阴影](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-shadow.md) ++ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-blur-constrast.md) ++ [使用 filter:blur | filter:constrast 生成火焰效果](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-fire.md) ++ [使用 filter:blur | filter:constrast 生成火焰效果2](https://codepen.io/Chokcoco/pen/aMRPjR) ++ [滤镜及混合模式混搭特效](https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-mix.md) ++ [使用 filter:blur | filter:constrast 单标签实现滴水效果](https://codepen.io/Chokcoco/pen/gZVjJw) ++ [使用 filter:blur | filter:constrast 小球穿梭效果](https://codepen.io/Chokcoco/pen/ZwYyKO) ++ [使用 filter:blur | filter:constrast 实现小球穿梭放大loading动画](https://codepen.io/Chokcoco/pen/BaaQEab) ++ [使用 hue-rotate 实现渐变背景动画](https://codepen.io/Chokcoco/pen/MRegJW) ++ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://codepen.io/Chokcoco/pen/oKjxpR) + + +## 边框(border) + ++ [活用 border-radius, 实现波浪动画](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave.md) ++ [活用 border-radius, 实现波浪百分比图](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-wave-percent.md) ++ [活用 border-radius, 实现电池充电效果](https://codepen.io/Chokcoco/pen/qBErGoO) ++ [border-radius 变换实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-loading.md) ++ [border-color 变换实现文字输入效果](https://chokcoco.github.io/CSS-Inspiration/#/./border/border-typing.md) ++ [活用 border-radius, 单标签线条动画](https://codepen.io/Chokcoco/pen/xBxvdZ) ++ [使用 border-radius，模拟绳子下坠动画](https://codepen.io/Chokcoco/pen/yWjjjq) ++ [使用 outline 巧妙实现加号符号](https://codepen.io/Chokcoco/pen/PrrLaP) + +## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) + ++ [线性渐变实现条纹字](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-stripe.md) ++ [重复径向渐变实现波浪边框](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-wave-border.md) ++ [渐变实现波浪效果/波浪进度框](https://chokcoco.github.io/CSS-Inspiration/#/./bg-wave.md) ++ [渐变实现优惠券波浪造型](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-coupon.md) ++ [线性渐变实现内切直角](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-inscribed.md) ++ [线性渐变实现箭头符号](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-arrow.md) ++ [利用线性渐变实现下划线](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-underline.md) ++ [使用 background-attachment 实现毛玻璃效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-frosted-glass.md) ++ [使用渐变实现舞台灯光聚焦效果](https://chokcoco.github.io/CSS-Inspiration/#/./background/bg-focus.md) ++ [渐变实现聚光灯效果](https://codepen.io/Chokcoco/pen/yLLzqaJ) ++ [圆锥渐变配合混合模式实现炫酷光影效果](https://codepen.io/Chokcoco/pen/gRRdQq) ++ [mask-image 实现图片变幻](https://codepen.io/Chokcoco/pen/VqdQwB) ++ [使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM) ++ [使用线性渐变实现类迷宫图形](https://codepen.io/Chokcoco/pen/zXYJaW) ++ [使用渐变实现波浪下划线](https://codepen.io/Chokcoco/pen/vMyBQe?editors=1100) ++ [使用线性渐变模拟进度条运动](https://codepen.io/Chokcoco/pen/EzZwXg) ++ [使用多重背景单标签实现不可思议的气泡按钮点击效果](https://codepen.io/Chokcoco/pen/bGGMLdd) + +## 混合模式（mix-blend-mode/background-blend-mode) + ++ [mix-blend-mode 实现 loading 效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-loading.md) ++ [mix-blend-mode 实现颜色叠加旋转动画](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-rotate.md) ++ [使用 mix-blend-mode 实现抖音 LOGO](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-douyin-logo.md) ++ [类抖音 LOGO 晕眩效果](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-mix.md) ++ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://chokcoco.github.io/CSS-Inspiration/#/./blendmode/blend-color-set.md) ++ [CSS MIX](https://codepen.io/Chokcoco/pen/REoKpQ) ++ [CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/bOgamV) ++ [CSS MAGIC MIX2](https://codepen.io/Chokcoco/pen/royQvE?editors=1100) ++ [CSS WAVE MOVE(惊艳的水波效果)](https://codepen.io/Chokcoco/pen/VqbxQr) + +## 3D + ++ [使用 translateZ 实现滚动视差](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-translate-parallax.md) ++ [借助 translate3d\perspective 实现 3D 视差效果](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax.md) ++ [借助 translate3d\perspective 实现 3D 视差效果2](https://chokcoco.github.io/CSS-Inspiration/#/./3d/3d-parallax2.md) ++ [3d 球动画](https://codepen.io/Chokcoco/pen/JwdvmJ) ++ [3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB) ++ [CSS 3D MAZE, 惊艳的 CSS 3D 线条特效](https://codepen.io/Chokcoco/pen/dLYpxK) ++ [3D 无限延伸视角动画](https://codepen.io/Chokcoco/pen/eYYJaMZ) ++ [3D 数字计数动画](https://codepen.io/Chokcoco/pen/qXVxyw) + +## 动画/过渡(transition/animation) + ++ [借助transition-delay实现按钮border动画效果](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-button-border.md) ++ [简单曲线运动](https://chokcoco.github.io/CSS-Inspiration/#/./animation/animation-curve.md) ++ [借助transition-delay简单多重圆的位移](https://codepen.io/Chokcoco/pen/QzzwVO) ++ [动画正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy) ++ [巧妙使用 css 控制动画行进](https://codepen.io/Chokcoco/pen/ZPgxwy) ++ [巧妙使用 border 实现绳索下落动画](https://codepen.io/Chokcoco/pen/yWjjjq) ++ [巧用overflow及transform实现线条hover效果](https://codepen.io/Chokcoco/pen/PooBpQe) + +## clip-path + ++ [clip-path 实现文字断裂效果](https://codepen.io/Chokcoco/pen/NWWxryd) + +## 文本类 + ++ [使用text-decoration实现波浪效果](https://codepen.io/Chokcoco/pen/YMWavM) + +## 综合 + ++ [retina屏下的1px线的实现（兼容2x屏、3x屏幕）](https://codepen.io/Chokcoco/pen/XyNjqK) ++ [CSS线条动画](https://codepen.io/Chokcoco/pen/XogwvV) ++ [PURE CSS 实现鼠标跟随](https://codepen.io/Chokcoco/pen/MZqMVO) ++ [hover | transition 实现鼠标跟随](https://codepen.io/Chokcoco/pen/XgvjQM) ++ [鼠标跟随动画 PURE CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/zyyYqN) ++ [CSS文字分裂特效](https://codepen.io/Chokcoco/pen/wRZKNY) ++ [CSS TEXT Animation](https://codepen.io/Chokcoco/pen/dwxPWO) ++ [纯CSS实现360°饼图 -- PURE CSS PIE ROTATE](https://codepen.io/Chokcoco/pen/BMgZvM?editors=1100) ++ [纯CSS鼠标跟随按钮动画效果](https://codepen.io/Chokcoco/pen/OqXqVz) ++ [纯CSS实现蜡烛火焰效果](https://codepen.io/Chokcoco/pen/jJJbmz) ++ [使用CSS让你的浏览器崩溃](https://codepen.io/Chokcoco/pen/moMzxB) ++ [使用opacity优化box-shadow动画](https://codepen.io/Chokcoco/pen/zYObVRJ) ++ [单标签纯CSS实现幽灵动画](https://codepen.io/Chokcoco/pen/vYYrNOO) ++ [chrome Tab 分栏实现](https://codepen.io/Chokcoco/pen/WNNgyMV) ++ [华为充电动画 HuaWei Battery Charging Animation](https://codepen.io/Chokcoco/pen/vYExwvm?editors=1100) + + +## CSS-Doodle + ++ [夏日城市夕阳图🌇](https://codepen.io/Chokcoco/pen/BaaqYZO) ++ [CSS-Doodle fish 🐟 & seaweed 🍀](https://codepen.io/Chokcoco/pen/WNNLOXV) ++ [CSS-Doodle spotlight🎆](https://codepen.io/Chokcoco/pen/xxxMoqV) + +## SVG + ++ [支付宝AR扫福动画](https://codepen.io/Chokcoco/pen/YzPjaXp) ++ [SVG Hover Animations](https://codepen.io/Chokcoco/pen/gOOKYmV) diff --git a/_sidebar.md b/_sidebar.md old mode 100644 new mode 100755 index d6eb115..b3668d8 --- a/_sidebar.md +++ b/_sidebar.md @@ -1,116 +1,123 @@ -# CSS-Inspiration - -+ [引言](./init.md) - -## Layout - -+ [CSS实现瀑布流布局（display: flex）](./layout/flex-waterfalls-flow.md) -+ [CSS实现瀑布流布局（colum+count）](./layout/colum-waterfalls-flow.md) -+ [CSS实现瀑布流布局（display: grid）](./layout/grid-waterfalls-flow.md) -+ [多方案实现跨行或跨列布局](./layout/multi-row-or-column.md) -+ [多种方案实现单列等宽，其他多列自适应均匀布局](./layout/single-column-isometric.md) -+ [多种方案实现多列等高布局](./layout/multi-column-contour.md) -+ [圣杯布局](./layout/holy-grail-layout.md) -+ [圣杯布局（flex实现）](./layout/flex-holy-grail-layout.md) -+ [双飞翼布局](./layout/double-wing-layout.md) - -## 阴影(box-shadow、drop-shadow) - -+ [单侧投影](./shadow/one-sided-shadow.md) -+ [立体投影](./shadow/solid-shadow.md) -+ [文字立体投影](./shadow/word-solid-shadow.md) -+ [长阴影(线性渐变模拟)](./shadow/long-shadow.md) -+ [线性渐变|阴影实现条纹立体阴影条纹字](./shadow/word-solid-shadow-ii.md) -+ [使用 box-shadow 实现半透明遮罩](./shadow/opacity-wrap.md) -+ [box-shadow 实现背景动画](./shadow/shadow-ani.md) -+ [box-shadow 模拟实现类似线性渐变背景动画](./shadow/shadow-ani-ii.md) -+ [box-shadow 模拟霓虹氙灯文字效果](./shadow/neon-shadow-light.md) -+ [单标签借助 inset shdow 实现IE LOGO](./shadow/ie-logo.md) -+ [借助 filter:drop-shadow ，单标签实现抖音 LOGO](./shadow/douyin-logo.md) -+ [Box-shadow 实现圆环进度条动画](./shadow/circle-loading.md) -+ [使用box-shadow/渐变实现内切圆角](./shadow/inscribed-angle.md) - -## 伪类/伪元素 - -+ [使用`:not()`伪类实现弹窗背景元素模糊](./pesudo/pesudo-not.md) -+ [伪类`:focus-within`纯 CSS 方式实现掘金登陆特效](./pesudo/pesudo-juejin.md) -+ [伪类`placeholder-shown`实现表单交互](./pesudo/pesudo-focus-within-placeholder-shown.md) -+ [伪元素配合 border 实现气泡对话框](./pesudo/pesudo-bubble.md) -+ [伪类`:checked`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-checked.md) -+ [伪类`:target`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-target.md) -+ [伪类`:focus-within`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-within.md) -+ [伪类`:hover` 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-hover.md) -+ [伪类`:checked`实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control.md) -+ [伪类`:target`实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-target.md) - - -## 滤镜(fliter) - -+ [使用 filter:blur 生成彩色阴影](./filter/filter-shadow.md) -+ [使用 filter:blur | filter:constrast 生成特殊融合效果](./filter/filter-blur-constrast.md) -+ [使用 filter:blur | filter:constrast 生成火焰效果](./filter/filter-fire.md) -+ [滤镜及混合模式混搭特效](./filter/filter-mix.md) -+ [使用 filter:blur | filter:constrast 单标签实现滴水效果](https://codepen.io/Chokcoco/pen/gZVjJw) - -## 边框(border) - -+ [活用 border-radius, 实现波浪动画](./border/border-wave.md) -+ [活用 border-radius, 实现波浪百分比图](./border/border-wave-percent.md) -+ [border-radius 变换实现 loading 效果](./border/border-loading.md) -+ [border-color 变换实现文字输入效果](./border/border-typing.md) - -## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) - -+ [线性渐变实现条纹字](./background/bg-stripe.md) -+ [重复径向渐变实现波浪边框](./background/bg-wave-border.md) -+ [渐变实现优惠券波浪造型](./background/bg-coupon.md) -+ [渐变实现波浪效果/波浪进度框](./background/bg-wave.md) -+ [线性渐变实现内切直角](./background/bg-inscribed.md) -+ [线性渐变实现箭头符号](./background/bg-arrow.md) -+ [利用线性渐变实现下划线](./background/bg-underline.md) -+ [使用 background-attachment 实现毛玻璃效果](./background/bg-frosted-glass.md) -+ [使用渐变实现舞台灯光聚焦效果](./background/bg-focus.md) -+ [圆锥渐变配合混合模式实现炫酷光影效果](https://codepen.io/Chokcoco/pen/gRRdQq) -+ [mask-image 实现图片变幻](https://codepen.io/Chokcoco/pen/VqdQwB) -+ [使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM) - -## 混合模式（mix-blend-mode/background-blend-mode) - -+ [mix-blend-mode 实现 loading 效果](./blendmode/blend-loading.md) -+ [mix-blend-mode 实现颜色叠加旋转动画](./blendmode/blend-rotate.md) -+ [使用 mix-blend-mode 实现抖音 LOGO](./blendmode/blend-douyin-logo.md) -+ [类抖音 LOGO 晕眩效果](./blendmode/blend-mix.md) -+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](./blendmode/blend-color-set.md) -+ [CSS MIX](https://codepen.io/Chokcoco/pen/REoKpQ) -+ [CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/bOgamV) -+ [CSS MAGIC MIX2](https://codepen.io/Chokcoco/pen/royQvE?editors=1100) -+ [CSS WAVE MOVE(惊艳的水波效果)](https://codepen.io/Chokcoco/pen/VqbxQr) - - -## 3D - -+ [使用 translateZ 实现滚动视差](./3d/3d-translate-parallax.md) -+ [借助 translate3d\perspective 实现 3D 视差效果](./3d/3d-parallax.md) -+ [借助 translate3d\perspective 实现 3D 视差效果2](./3d/3d-parallax2.md) -+ [3d 球动画](https://codepen.io/Chokcoco/pen/JwdvmJ) -+ [3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB) - -## 动画/过渡(transition/animation) - -+ [借助transition-delay实现按钮border动画效果](./animation/animation-button-border.md) -+ [CSS实现曲线运动](./animation/animation-curve.md) -+ [借助transition-delay简单多重圆的位移](https://codepen.io/Chokcoco/pen/QzzwVO) -+ [动画正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy) - -## SVG - -+ [使用 SVG 实现文字弧形排列](./svg/svg-arc-word.md) - -## 综合 - -+ [retina屏下的1px线的实现](./others/1px-line.md) -+ [MAGIC CSS MIX](https://codepen.io/Chokcoco/pen/XogwvV) -+ [PURE CSS 实现鼠标跟随](https://codepen.io/Chokcoco/pen/MZqMVO) -+ [鼠标跟随动画 PURE CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/zyyYqN) -+ [CSS文字分裂特效](https://codepen.io/Chokcoco/pen/wRZKNY) -+ [CSS TEXT Animation](https://codepen.io/Chokcoco/pen/dwxPWO) +# CSS-Inspiration + ++ [引言](./init.md) + +## Layout + ++ [CSS实现瀑布流布局（display: flex）](./layout/flex-waterfalls-flow.md) ++ [CSS实现瀑布流布局（colum+count）](./layout/colum-waterfalls-flow.md) ++ [CSS实现瀑布流布局（display: grid）](./layout/grid-waterfalls-flow.md) ++ [多方案实现跨行或跨列布局](./layout/multi-row-or-column.md) ++ [多种方案实现单列等宽，其他多列自适应均匀布局](./layout/single-column-isometric.md) ++ [多种方案实现多列等高布局](./layout/multi-column-contour.md) ++ [圣杯布局](./layout/holy-grail-layout.md) ++ [圣杯布局（flex实现）](./layout/flex-holy-grail-layout.md) ++ [双飞翼布局](./layout/double-wing-layout.md) ++ [实现水平垂直居中最便捷的方法](./layout/best-way-to-center-element.md) ++ [使用 margin auto 实现 flex 下的 justify-content: space-between](./layout/use-margin-auto-to-simulate-space-between.md) ++ [使用 margin auto 实现 flex 下的 align-self: flex-end](./layout/use-margin-auto-to-simulate-align-self.md) + +## 阴影(box-shadow、drop-shadow) + ++ [单侧投影](./shadow/one-sided-shadow.md) ++ [立体投影](./shadow/solid-shadow.md) ++ [文字立体投影](./shadow/word-solid-shadow.md) ++ [长阴影(线性渐变模拟)](./shadow/long-shadow.md) ++ [线性渐变|阴影实现条纹立体阴影条纹字](./shadow/word-solid-shadow-ii.md) ++ [使用 box-shadow 实现半透明遮罩](./shadow/opacity-wrap.md) ++ [box-shadow 实现背景动画](./shadow/shadow-ani.md) ++ [box-shadow 模拟实现类似线性渐变背景动画](./shadow/shadow-ani-ii.md) ++ [box-shadow 模拟霓虹氙灯文字效果](./shadow/neon-shadow-light.md) ++ [单标签借助 inset shdow 实现IE LOGO](./shadow/ie-logo.md) ++ [借助 filter:drop-shadow ，单标签实现抖音 LOGO](./shadow/douyin-logo.md) ++ [Box-shadow 实现圆环进度条动画](./shadow/circle-loading.md) ++ [使用box-shadow/渐变实现内切圆角](./shadow/inscribed-angle.md) ++ [使用box-shadow单标签实现叉子图形](./shadow/single-div-fork.md) + +## 伪类/伪元素 + ++ [使用`:not()`伪类实现弹窗背景元素模糊](./pesudo/pesudo-not.md) ++ [伪类`:focus-within`纯 CSS 方式实现掘金登陆特效](./pesudo/pesudo-juejin.md) ++ [伪类`placeholder-shown`实现表单交互](./pesudo/pesudo-focus-within-placeholder-shown.md) ++ [伪元素配合 border 实现气泡对话框](./pesudo/pesudo-bubble.md) ++ [伪类`:checked`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-checked.md) ++ [伪类`:target`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-target.md) ++ [伪类`:focus-within`实现纯 CSS Tab 切换](./pesudo/pesudo-focus-within.md) ++ [伪类`:hover` 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-hover.md) ++ [伪类`:checked`实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control.md) ++ [伪类`:target`实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-target.md) ++ [借助伪元素实现边界智能判断移动](./pesudo/pesudo-boundary-judge.md) ++ [伪元素实现打点 loading 效果](./pesudo/pesudo-loading-content.md) ++ [伪元素遮罩实现线条 loading 效果](./pesudo/pesudo-loading-line.md) + + +## 滤镜(fliter) + ++ [使用 filter:blur 生成彩色阴影](./filter/filter-shadow.md) ++ [使用 filter:blur | filter:constrast 生成特殊融合效果](./filter/filter-blur-constrast.md) ++ [使用 filter:blur | filter:constrast 生成火焰效果](./filter/filter-fire.md) ++ [滤镜及混合模式混搭特效](./filter/filter-mix.md) ++ [使用 filter:blur | filter:constrast 单标签实现滴水效果](https://codepen.io/Chokcoco/pen/gZVjJw) + +## 边框(border) + ++ [活用 border-radius, 实现波浪动画](./border/border-wave.md) ++ [活用 border-radius, 实现波浪百分比图](./border/border-wave-percent.md) ++ [border-radius 变换实现 loading 效果](./border/border-loading.md) ++ [border-color 变换实现文字输入效果](./border/border-typing.md) + +## 背景/渐变(linear-gradient/radial-gradient/conic-gradient) + ++ [线性渐变实现条纹字](./background/bg-stripe.md) ++ [重复径向渐变实现波浪边框](./background/bg-wave-border.md) ++ [渐变实现优惠券波浪造型](./background/bg-coupon.md) ++ [渐变实现波浪效果/波浪进度框](./background/bg-wave.md) ++ [线性渐变实现内切直角](./background/bg-inscribed.md) ++ [线性渐变实现箭头符号](./background/bg-arrow.md) ++ [利用线性渐变实现下划线](./background/bg-underline.md) ++ [使用 background-attachment 实现毛玻璃效果](./background/bg-frosted-glass.md) ++ [使用渐变实现舞台灯光聚焦效果](./background/bg-focus.md) ++ [圆锥渐变配合混合模式实现炫酷光影效果](https://codepen.io/Chokcoco/pen/gRRdQq) ++ [mask-image 实现图片变幻](https://codepen.io/Chokcoco/pen/VqdQwB) ++ [使用线性渐变实现滚动进度条](https://codepen.io/Chokcoco/pen/KbBXQM) + +## 混合模式（mix-blend-mode/background-blend-mode) + ++ [mix-blend-mode 实现 loading 效果](./blendmode/blend-loading.md) ++ [mix-blend-mode 实现颜色叠加旋转动画](./blendmode/blend-rotate.md) ++ [使用 mix-blend-mode 实现抖音 LOGO](./blendmode/blend-douyin-logo.md) ++ [类抖音 LOGO 晕眩效果](./blendmode/blend-mix.md) ++ [使用 mix-blend-mode 实现图片任意颜色赋值技术](./blendmode/blend-color-set.md) ++ [CSS MIX](https://codepen.io/Chokcoco/pen/REoKpQ) ++ [CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/bOgamV) ++ [CSS MAGIC MIX2](https://codepen.io/Chokcoco/pen/royQvE?editors=1100) ++ [CSS WAVE MOVE(惊艳的水波效果)](https://codepen.io/Chokcoco/pen/VqbxQr) + + +## 3D + ++ [使用 translateZ 实现滚动视差](./3d/3d-translate-parallax.md) ++ [借助 translate3d\perspective 实现 3D 视差效果](./3d/3d-parallax.md) ++ [借助 translate3d\perspective 实现 3D 视差效果2](./3d/3d-parallax2.md) ++ [3d 球动画](https://codepen.io/Chokcoco/pen/JwdvmJ) ++ [3D Spiral Number](https://codepen.io/Chokcoco/pen/LeWbaB) + +## 动画/过渡(transition/animation) + ++ [借助transition-delay实现按钮border动画效果](./animation/animation-button-border.md) ++ [CSS实现曲线运动](./animation/animation-curve.md) ++ [借助transition-delay简单多重圆的位移](https://codepen.io/Chokcoco/pen/QzzwVO) ++ [动画正负旋转相消](https://codepen.io/Chokcoco/pen/XaBJPy) + +## SVG + ++ [使用 SVG 实现文字弧形排列](./svg/svg-arc-word.md) + +## 综合 + ++ [retina屏下的1px线的实现](./others/1px-line.md) ++ [MAGIC CSS MIX](https://codepen.io/Chokcoco/pen/XogwvV) ++ [PURE CSS 实现鼠标跟随](https://codepen.io/Chokcoco/pen/MZqMVO) ++ [鼠标跟随动画 PURE CSS MAGIC MIX](https://codepen.io/Chokcoco/pen/zyyYqN) ++ [CSS文字分裂特效](https://codepen.io/Chokcoco/pen/wRZKNY) ++ [CSS TEXT Animation](https://codepen.io/Chokcoco/pen/dwxPWO) diff --git a/animation/animation-button-border.md b/animation/animation-button-border.md old mode 100644 new mode 100755 index 5e848b5..0dddfdd --- a/animation/animation-button-border.md +++ b/animation/animation-button-border.md @@ -1,145 +1,145 @@ -## 借助transition-delay实现按钮border动画效果 - -借助 `transition-delay` 实现按钮 border hover 时的动画效果。 - - -### 关键点 - -+ 给容器每一边的 border 合理设置 `transition-delay`，可以延缓动画的发生，再连贯的拼凑在一起实现一些效果 - -HTML： - -```html -
Both
-
Rectangle
-
Circle
-``` - -SCSS： -```scss -body { - background: #000; -} - -div { - position: relative; - width: 200px; - height: 64px; - line-height: 64px; - box-shadow: inset 0 0 0 3px #fff; - margin: 50px auto; - text-align: center; - color: #fff; - font-size: 32px; - cursor: pointer; - transition: color 1s; -} - -div::before, -div::after { - content: ""; - position: absolute; - width: 0; - height: 0; - top: 0; - left: 0; - box-sizing: border-box; - // transition: width .5s, height .5s; - // transition-delay: .5s, 0s; - border: 3px solid transparent; -} - -.both:hover { - color: #00e2ff; - - &::before { - transition: width .5s, height .5s, border-bottom-color 0s; - transition-delay: .5s, 0s, .5s; - width: 200px; - height: 64px; - border-left: 3px solid #00e2ff; - border-bottom: 3px solid #00e2ff; - } - - &::after { - transition: width .5s, height .5s, border-right-color .5s; - transition-delay: 0s, .5s, .5s; - width: 200px; - height: 64px; - border-top: 3px solid #00e2ff; - border-right: 3px solid #00e2ff; - } -} - -.rectangle { - &::after { - top: unset; - left: unset; - right: 0; - bottom: 0; - } - - &:hover { - color: #00e2ff; - - &::before { - transition: width .25s, height .25s, border-bottom-color 0s; - transition-delay: .25s, 0s, .25s; - width: 200px; - height: 64px; - border-left: 3px solid #00e2ff; - border-bottom: 3px solid #00e2ff; - } - - &::after { - transition: width .25s, height .25s, border-top-color .25s; - transition-delay: 0.75s, 0.5s, 0.75s; - width: 200px; - height: 64px; - border-top: 3px solid #00e2ff; - border-right: 3px solid #00e2ff; - } - } -} - -.circle { - width: 120px; - height: 120px; - line-height: 120px; - border-radius: 50%; - - &::before, - &::after{ - border-radius: 50%; - } - - &:hover { - color: #00e2ff; - - &::before { - width: 120px; - height: 120px; - border-color: #00e2ff; - transition: border-top-color .25s linear, - border-right-color .25s linear, - border-bottom-color .25s linear, - border-left-color .25s linear; - transition-delay: 0s, .25s, .5s, .75s; - } - - &::after { - width: 120px; - height: 120px; - border-top: 3px solid #00e2ff; - transform: rotate(270deg); - transition: transform .75s linear; - transition-delay: 0s; - } - } -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/animation/animation-curve.md b/animation/animation-curve.md old mode 100644 new mode 100755 index 6d78b05..342fc38 --- a/animation/animation-curve.md +++ b/animation/animation-curve.md @@ -1,55 +1,55 @@ -## CSS实现曲线运动 - -CSS实现曲线运动。 - -HTML： - -```html -
-
-
-``` - -SCSS： -```scss -.g-container { - position: relative; - width: 10vmin; - height: 70vmin; - margin: 20vmin auto; - // background: rgba(0, 0, 0, .1); - transform-origin: center 0; - animation: rotate 1.5s cubic-bezier(.5, 0, .5, 1) infinite alternate, opacity 3s linear infinite alternate; -} - -.g-ball { - position: absolute; - width: 10vmin; - height: 10vmin; - border-radius: 50%; - background: radial-gradient(circle, #fff, #000); - top: 60vmin; - left: 0; - animation: move 1.5s cubic-bezier(.5, 0, .5, 1) infinite alternate; -} - -@keyframes opacity { - from, 50% { - border: 1px dashed rgba(255, 255, 255, 0); - } - to { - border: 1px dashed rgba(0, 0, 0, .2); - } -} - -@keyframes rotate { - 100% { - transform: rotate(90deg) translate(-3vmin, 0); - } -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/assets/css/highlight.css b/assets/css/highlight.css old mode 100644 new mode 100755 index 28e9a56..be437fb --- a/assets/css/highlight.css +++ b/assets/css/highlight.css @@ -1,97 +1,97 @@ -/* -Original highlight.js style (c) Ivan Sagalaev -*/ - -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: #F0F0F0; - } - - - /* Base color: saturation 0; */ - - .hljs, - .hljs-subst { - color: #444; - } - - .hljs-comment { - color: #888888; - } - - .hljs-keyword, - .hljs-attribute, - .hljs-selector-tag, - .hljs-meta-keyword, - .hljs-doctag, - .hljs-name { - font-weight: bold; - } - - - /* User color: hue: 0 */ - - .hljs-type, - .hljs-string, - .hljs-number, - .hljs-selector-id, - .hljs-selector-class, - .hljs-quote, - .hljs-template-tag, - .hljs-deletion { - color: #880000; - } - - .hljs-title, - .hljs-section { - color: #880000; - font-weight: bold; - } - - .hljs-regexp, - .hljs-symbol, - .hljs-variable, - .hljs-template-variable, - .hljs-link, - .hljs-selector-attr, - .hljs-selector-pseudo { - color: #BC6060; - } - - - /* Language color: hue: 90; */ - - .hljs-literal { - color: #78A960; - } - - .hljs-built_in, - .hljs-bullet, - .hljs-code, - .hljs-addition { - color: #397300; - } - - - /* Meta color: hue: 200 */ - - .hljs-meta { - color: #1f7199; - } - - .hljs-meta-string { - color: #4d99bf; - } - - - /* Misc effects */ - - .hljs-emphasis { - font-style: italic; - } - - .hljs-strong { - font-weight: bold; +/* +Original highlight.js style (c) Ivan Sagalaev +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #F0F0F0; + } + + + /* Base color: saturation 0; */ + + .hljs, + .hljs-subst { + color: #444; + } + + .hljs-comment { + color: #888888; + } + + .hljs-keyword, + .hljs-attribute, + .hljs-selector-tag, + .hljs-meta-keyword, + .hljs-doctag, + .hljs-name { + font-weight: bold; + } + + + /* User color: hue: 0 */ + + .hljs-type, + .hljs-string, + .hljs-number, + .hljs-selector-id, + .hljs-selector-class, + .hljs-quote, + .hljs-template-tag, + .hljs-deletion { + color: #880000; + } + + .hljs-title, + .hljs-section { + color: #880000; + font-weight: bold; + } + + .hljs-regexp, + .hljs-symbol, + .hljs-variable, + .hljs-template-variable, + .hljs-link, + .hljs-selector-attr, + .hljs-selector-pseudo { + color: #BC6060; + } + + + /* Language color: hue: 90; */ + + .hljs-literal { + color: #78A960; + } + + .hljs-built_in, + .hljs-bullet, + .hljs-code, + .hljs-addition { + color: #397300; + } + + + /* Meta color: hue: 200 */ + + .hljs-meta { + color: #1f7199; + } + + .hljs-meta-string { + color: #4d99bf; + } + + + /* Misc effects */ + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; } \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css old mode 100644 new mode 100755 index b442576..5a668a2 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,107 +1,107 @@ - -body { - font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; -} - -.markdown-section ol, .markdown-section p, .markdown-section ul { - line-height: 1.6rem; - font-size: 14px; -} - -.markdown-section { - margin-top: 0; - margin-left: 50px; - margin-right: 70px; - max-width: 1430px; - padding: 30px 15px 40px; - position: relative; -} - -.vuep { - flex-direction: column; -} - -.vuep-editor, -.vuep-preview, -.vuep-error { - border-radius: 2px; - height: inherit; - margin-right: 10px; - overflow: auto; - flex: 0 0 100%; - overflow: hidden; -} - -.vuep-preview { - overflow: initial; -} - -.content { - padding-top: 20px; - left: 360px; -} - -.sidebar { - width: 360px; - padding: 5px; -} - -.markdown-section { - padding: 5px 30px 40px; -} - -.markdown-section pre>code { - padding: 3px 5px; -} - -h1 a:hover, -h2 a:hover { - text-decoration: none !important; -} - -.sidebar h1, -.sidebar h2 { - font-size: 18px; - padding-left: 5px; -} - -.sidebar ul li { - margin: 2; -} - -.sidebar ul li a { - transition: all .2s; - font-size: 14px; - line-height: 2; -} - -.sidebar ul li a:hover { - text-decoration: none; - color: #42b983; -} - -#gitalk-container { - width: unset !important; - max-width: 1430px; - padding-right: 30px; - padding-left: 15px; -} - -.github-fork { - position: fixed; - top: 0; - right: 0; -} - -.content ul li { - margin: 6px 0; -} - -.markdown-section pre>code { - font-size: 12px; - line-height: 1.4; -} - -.token.selector { - font-size: 1.1em; -} + +body { + font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; +} + +.markdown-section ol, .markdown-section p, .markdown-section ul { + line-height: 1.6rem; + font-size: 14px; +} + +.markdown-section { + margin-top: 0; + margin-left: 50px; + margin-right: 70px; + max-width: 1430px; + padding: 30px 15px 40px; + position: relative; +} + +.vuep { + flex-direction: column; +} + +.vuep-editor, +.vuep-preview, +.vuep-error { + border-radius: 2px; + height: inherit; + margin-right: 10px; + overflow: auto; + flex: 0 0 100%; + overflow: hidden; +} + +.vuep-preview { + overflow: initial; +} + +.content { + padding-top: 20px; + left: 360px; +} + +.sidebar { + width: 360px; + padding: 5px; +} + +.markdown-section { + padding: 5px 30px 40px; +} + +.markdown-section pre>code { + padding: 3px 5px; +} + +h1 a:hover, +h2 a:hover { + text-decoration: none !important; +} + +.sidebar h1, +.sidebar h2 { + font-size: 18px; + padding-left: 5px; +} + +.sidebar ul li { + margin: 2; +} + +.sidebar ul li a { + transition: all .2s; + font-size: 14px; + line-height: 2; +} + +.sidebar ul li a:hover { + text-decoration: none; + color: #42b983; +} + +#gitalk-container { + width: unset !important; + max-width: 1430px; + padding-right: 30px; + padding-left: 15px; +} + +.github-fork { + position: fixed; + top: 0; + right: 0; +} + +.content ul li { + margin: 6px 0; +} + +.markdown-section pre>code { + font-size: 12px; + line-height: 1.4; +} + +.token.selector { + font-size: 1.1em; +} diff --git a/assets/css/prism-line-numbers.css b/assets/css/prism-line-numbers.css old mode 100644 new mode 100755 index ba1b05d..de0b90b --- a/assets/css/prism-line-numbers.css +++ b/assets/css/prism-line-numbers.css @@ -1,41 +1,41 @@ -pre[class*="language-"].line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} - -pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -} - - .line-numbers-rows > span { - pointer-events: none; - display: block; - counter-increment: linenumber; - } - - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; } \ No newline at end of file diff --git a/assets/js/gittalk.min.js b/assets/js/gittalk.min.js new file mode 100644 index 0000000..355d5e2 --- /dev/null +++ b/assets/js/gittalk.min.js @@ -0,0 +1,19 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Gitalk=t():e.Gitalk=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist",t(t.s=75)}([function(e,t){var n=e.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(e,t,n){var r=n(39)("wks"),o=n(24),i=n(2).Symbol,a="function"==typeof i;(e.exports=function(e){return r[e]||(r[e]=a&&i[e]||(a?i:o)("Symbol."+e))}).store=r},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){"use strict";function r(e){return"[object Array]"===N.call(e)}function o(e){return"[object ArrayBuffer]"===N.call(e)}function i(e){return"undefined"!=typeof FormData&&e instanceof FormData}function a(e){return"undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function u(e){return"string"==typeof e}function s(e){return"number"==typeof e}function c(e){return void 0===e}function l(e){return null!==e&&"object"==typeof e}function f(e){return"[object Date]"===N.call(e)}function p(e){return"[object File]"===N.call(e)}function d(e){return"[object Blob]"===N.call(e)}function h(e){return"[object Function]"===N.call(e)}function m(e){return l(e)&&h(e.pipe)}function v(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function g(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function y(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function b(e,t){if(null!==e&&void 0!==e)if("object"==typeof e||r(e)||(e=[e]),r(e))for(var n=0,o=e.length;n0;)n[r]=arguments[r+2];if(!g(e))return e;var o=e.attributes||e.props,i=G.h(e.nodeName||e.type,o,e.children||o&&o.children),a=[i,t];return n&&n.length?a.push(n):t&&t.children&&a.push(t.children),m(G.cloneElement.apply(void 0,a))}function g(e){return e&&(e instanceof q||e.$$typeof===z)}function y(e,t){return t._refProxies[e]||(t._refProxies[e]=function(n){t&&t.refs&&(t.refs[e]=n,null===n&&(delete t._refProxies[e],t=null))})}function b(e){var t=e.nodeName,n=e.attributes;if(n&&"string"==typeof t){var r={};for(var o in n)r[o.toLowerCase()]=o;if(r.ondoubleclick&&(n.ondblclick=n[r.ondoubleclick],delete n[r.ondoubleclick]),r.onchange&&("textarea"===t||"input"===t.toLowerCase()&&!/^fil|che|rad/i.test(n.type))){var i=r.oninput||"oninput";n[i]||(n[i]=T([n[i],n[r.onchange]]),delete n[r.onchange])}}}function _(e){var t=e.attributes;if(t){var n=t.className||t.class;n&&(t.className=n)}}function w(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function x(e,t){for(var n in e)if(!(n in t))return!0;for(var r in t)if(e[r]!==t[r])return!0;return!1}function E(e){return e&&e.base||e}function N(){}function C(e){function t(e,t){A(this),I.call(this,e,t,Y),M.call(this,e,t)}return e=w({constructor:t},e),e.mixins&&O(e,S(e.mixins)),e.statics&&w(t,e.statics),e.propTypes&&(t.propTypes=e.propTypes),e.defaultProps&&(t.defaultProps=e.defaultProps),e.getDefaultProps&&(t.defaultProps=e.getDefaultProps()),N.prototype=I.prototype,t.prototype=w(new N,e),t.displayName=e.displayName||"Component",t}function S(e){for(var t={},n=0;n1)for(var n=1;n=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(35);e.exports=function(e){return Object(r(e))}},function(e,t){e.exports=!0},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t,n){var r=n(7).f,o=n(11),i=n(1)("toStringTag");e.exports=function(e,t,n){e&&!o(e=n?e:e.prototype,i)&&r(e,i,{configurable:!0,value:t})}},function(e,t,n){n(96);for(var r=n(2),o=n(10),i=n(16),a=n(1)("toStringTag"),u=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],s=0;s<5;s++){var c=u[s],l=r[c],f=l&&l.prototype;f&&!f[a]&&o(f,a,c),i[c]=i.Array}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,n){var r=n(14),o=n(2).document,i=r(o)&&r(o.createElement);e.exports=function(e){return i?o.createElement(e):{}}},function(e,t,n){var r=n(14);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";(function(t){function n(e,t,n,o,i,a,u,s){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,o,i,a,u,s],f=0;c=new Error(t.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(5))},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,n){var r=n(8),o=n(93),i=n(40),a=n(38)("IE_PROTO"),u=function(){},s=function(){var e,t=n(29)("iframe"),r=i.length;for(t.style.display="none",n(57).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write(" + + + - - - - - \ No newline at end of file diff --git a/init.md b/init.md old mode 100644 new mode 100755 index 41591c7..1bf07b6 --- a/init.md +++ b/init.md @@ -1,19 +1,19 @@ - - -![logo](https://github.com/chokcoco/CSS-Inspiration/raw/master/logo2.png) - -希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。 - -本文档使用 `docsify + gittalk + codepen` 搭建。 - -## Contact Me - -如果有任何问题或者疑问，可以加 QQ 群：418766876 联系我，[一键加群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a) 。 - -也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。 - -![qun](https://github.com/chokcoco/iCSS/raw/master/qqqun.png) - -## License - + + +![logo](https://github.com/chokcoco/CSS-Inspiration/raw/master/logo2.png) + +希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。 + +本文档使用 `docsify + gittalk + codepen` 搭建。 + +## Contact Me + +如果有任何问题或者疑问，可以加 QQ 群：418766876 联系我，[一键加群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a) 。 + +也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。 + +![qun](https://github.com/chokcoco/iCSS/raw/master/qqqun.png) + +## License + MIT \ No newline at end of file diff --git a/layout/best-way-to-center-element.md b/layout/best-way-to-center-element.md new file mode 100755 index 0000000..2b7f643 --- /dev/null +++ b/layout/best-way-to-center-element.md @@ -0,0 +1,54 @@ +## 实现水平垂直居中最便捷的方法 + +实现水平垂直居中最便捷的方法 + +### 难点 + +核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。 + +原因如下，在 `dispaly: flex` 下： + ++ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension. + +> [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) + +简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去 + +这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。 + + +HTML： + +```HTML +
+
+
+``` + +SCSS： +```scss +.g-container { + width: 100vw; + height: 100vh; + + display: flex; + // display: grid; + // display: inline-flex; + // display: inline-grid; + +} + +.g-box { + width: 40vmin; + height: 40vmin; + background: #000; + margin: auto; +} +``` + +效果如下： + + \ No newline at end of file diff --git a/layout/colum-waterfalls-flow.md b/layout/colum-waterfalls-flow.md old mode 100644 new mode 100755 index 152b27b..d90b9a5 --- a/layout/colum-waterfalls-flow.md +++ b/layout/colum-waterfalls-flow.md @@ -1,65 +1,65 @@ -## CSS实现瀑布流布局（column-count） - -本例使用 CSS column 实现瀑布流布局 - -关键点， - -+ column-count: 元素内容将被划分的最佳列数 -+ break-inside: 避免在元素内部插入分页符 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - -for(var j = 0; j<32; j++) - div.g-item -``` - -SCSS： -```scss -$count: 32; - -@function randomNum($max, $min: 0, $u: 1) { - @return ($min + random($max)) * $u; -} - -@function randomColor() { - @return rgb(randomNum(255), randomNum(255), randomNum(255)); -} - -.g-container { - column-count: 4; - column-gap: .5vw; - padding-top: .5vw; -} - -.g-item { - position: relative; - width: 24vw; - margin-bottom: 1vw; - break-inside: avoid; -} - -@for $i from 1 to $count+1 { - .g-item:nth-child(#{$i}) { - height: #{randomNum(300, 50)}px; - background: randomColor(); - - &::after { - content: "#{$i}"; - position: absolute; - color: #fff; - font-size: 2vw; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/double-wing-layout.md b/layout/double-wing-layout.md old mode 100644 new mode 100755 index 4e5a5c1..ab01402 --- a/layout/double-wing-layout.md +++ b/layout/double-wing-layout.md @@ -1,73 +1,73 @@ -## 双飞翼布局 - -最常见的双飞翼布局实现方法。 - -### 需求 - -双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 - -双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。 - -### 关键点 - -+ 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度 -+ 双飞翼布局的关键点父元素不需要设置 padding -+ 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - div.g-middle - div.g-middle-inner middle-inner - div.g-left left - div.g-right right -``` - -SCSS： -```scss -.g-container { - position: relative; - height: 100vh; - min-width: 400px; - - & > div { - height: 100vh; - float: left; - text-align: center; - color: #fff; - line-height: 100vh; - font-size: 3vw; - } -} - -.g-middle { - position: relative; - width: 100%; - background: #cc6630; - - .g-middle-inner { - margin: 0 200px; - } -} - -.g-left { - position: relative; - width: 200px; - background: #ffcc00; - margin-left: -100%; -} - -.g-right { - position: relative; - width: 200px; - background: pink; - margin-left: -200px; -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/flex-holy-grail-layout.md b/layout/flex-holy-grail-layout.md old mode 100644 new mode 100755 index c939c5e..a8acb7c --- a/layout/flex-holy-grail-layout.md +++ b/layout/flex-holy-grail-layout.md @@ -1,69 +1,69 @@ -## 圣杯布局 - -使用 flex 实现的圣杯布局。 - -### 需求 - -圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 - -圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。 - -### 关键点 - -+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置 -+ 圣杯布局的关键点父元素需要设置 padding -+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - div.g-middle middle - div.g-left left - div.g-right right -``` - -SCSS： -```scss -.g-container { - position: relative; - height: 100vh; - min-width: 400px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - - & > div { - height: 100vh; - text-align: center; - color: #fff; - line-height: 100vh; - font-size: 3vw; - } -} - -.g-middle { - order: 2; - flex: auto 1 0 ; - background: #cc6630; -} - -.g-left { - order: 1; - flex: 200px 0 0; - background: #ffcc00; -} - -.g-right { - order: 3; - flex: 200px 0 0; - background: pink; -} - -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/flex-waterfalls-flow.md b/layout/flex-waterfalls-flow.md old mode 100644 new mode 100755 index 651568d..826876d --- a/layout/flex-waterfalls-flow.md +++ b/layout/flex-waterfalls-flow.md @@ -1,76 +1,76 @@ -## CSS 实现瀑布流布局（display: flex） - -本例使用 CSS flex 实现瀑布流布局 - -关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - -for(var i = 0; i<4; i++) - div.g-queue - -for(var j = 0; j<8; j++) - div.g-item -``` - -SCSS： -```scss -$lineCount: 4; -$count: 8; - -@function randomNum($max, $min: 0, $u: 1) { - @return ($min + random($max)) * $u; -} - -@function randomColor() { - @return rgb(randomNum(255), randomNum(255), randomNum(255)); -} - -.g-container { - display: flex; - flex-direction: row; - justify-content: space-between; - overflow: hidden; -} - -.g-queue { - display: flex; - flex-direction: column; - flex-basis: 24%; - -} - -.g-item { - position: relative; - width: 100%; - margin: 2.5% 0; -} - -@for $i from 1 to $lineCount+1 { - .g-queue:nth-child(#{$i}) { - @for $j from 1 to $count+1 { - .g-item:nth-child(#{$j}) { - height: #{randomNum(300, 50)}px; - background: randomColor(); - - &::after { - content: "#{$j}"; - position: absolute; - color: #fff; - font-size: 24px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - } - } -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/grid-waterfalls-flow.md b/layout/grid-waterfalls-flow.md old mode 100644 new mode 100755 index 8bbc261..fb34353 --- a/layout/grid-waterfalls-flow.md +++ b/layout/grid-waterfalls-flow.md @@ -1,96 +1,96 @@ -## CSS实现瀑布流布局（display: grid） - -本例使用 CSS grid 实现瀑布流布局 - -关键点， - -+ 使用 `grid-template-columns`、`grid-template-rows` 分割行列 -+ 使用 `grid-row` 控制每个 item 的所占格子的大小 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - -for(var i = 0; i<8; i++) - div.g-item -``` - -SCSS： -```scss -$count: 8; - -@function randomNum($max, $min: 0, $u: 1) { - @return ($min + random($max)) * $u; -} - -@function randomColor() { - @return rgb(randomNum(255), randomNum(255), randomNum(255)); -} - -.g-container { - height: 100vh; - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(8, 1fr); -} - -@for $i from 1 to $count+1 { - .g-item:nth-child(#{$i}) { - position: relative; - background: randomColor(); - margin: 0.5vw; - - &::after { - content: "#{$i}"; - position: absolute; - color: #fff; - font-size: 2vw; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } -} - -.g-item { - &:nth-child(1) { - grid-column: 1; - grid-row: 1 / 3; - } - &:nth-child(2) { - grid-column: 2; - grid-row: 1 / 4; - } - &:nth-child(3) { - grid-column: 3; - grid-row: 1 / 5; - } - &:nth-child(4) { - grid-column: 4; - grid-row: 1 / 6; - } - &:nth-child(5) { - grid-column: 1; - grid-row: 3 / 9; - } - &:nth-child(6) { - grid-column: 2; - grid-row: 4 / 9; - } - &:nth-child(7) { - grid-column: 3; - grid-row: 5 / 9; - } - &:nth-child(8) { - grid-column: 4; - grid-row: 6 / 9; - } -} - -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/holy-grail-layout.md b/layout/holy-grail-layout.md old mode 100644 new mode 100755 index 4f13356..b925086 --- a/layout/holy-grail-layout.md +++ b/layout/holy-grail-layout.md @@ -1,72 +1,72 @@ -## 圣杯布局 - -最常见的圣杯布局实现方法。 - -### 需求 - -圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 - -圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。 - -### 关键点 - -+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置 -+ 圣杯布局的关键点父元素需要设置 padding -+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - div.g-middle middle - div.g-left left - div.g-right right -``` - -SCSS： -```scss -.g-container { - // overflow: hidden; - position: relative; - height: 100vh; - padding: 0 200px; - min-width: 400px; - - & > div { - height: 100vh; - float: left; - text-align: center; - color: #fff; - line-height: 100vh; - font-size: 3vw; - } -} - -.g-middle { - position: relative; - width: 100%; - background: #cc6630; -} - -.g-left { - position: relative; - width: 200px; - background: #ffcc00; - margin-left: -100%; - left: -200px; -} - -.g-right { - position: relative; - width: 200px; - background: pink; - margin-left: -200px; - right: -200px; -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/multi-column-contour.md b/layout/multi-column-contour.md old mode 100644 new mode 100755 index 269002b..ee46632 --- a/layout/multi-column-contour.md +++ b/layout/multi-column-contour.md @@ -1,173 +1,173 @@ -## 6种实现多列等高的方法 - -多种实现多列等高的方法 - -### 需求 - -多列等高，要求左右两列高度自适应且一样，分别设置不同背景色 - -### 实现 - -1. `padding + margin + overflow` 实现多列等高效果，兼容性好 -2. border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动 -3. 父元素线性渐变背景色实现多列等高（同理各种颜色障眼法） -4. display：flex实现多列等高 -5. display：grid实现多列等高 -6. display:table-cell 实现多列等高 - - -HTML： - -```html -
-
-
- content
-
-
- content
- content
- content
- content
-
-
-
-``` - - -SCSS： -```scss -h2 { - text-align: center; - line-height: 60px; - font-size: 20px; - background: #00bcd4; - color: #fff; -} - -.g-container { - width: 1000px; - margin: 0 auto; - line-height: 2; - color: #fff; - - & > div { - margin-bottom: 50px; - } -} - - - -.g-padmar { - position: relative; - overflow: hidden; - - .g-left { - float: left; - width: 200px; - background: #4caf50; - padding-bottom:9999px; - margin-bottom:-9999px; - } - - .g-right { - float: left; - width: 800px; - background: #99afe0; - padding-bottom: 9999px; - margin-bottom: -9999px; - } -} - -.g-border { - position: relative; - width: 800px; - border-left: 200px solid #4caf50; - background: #99afe0; - - &::after { - content: "."; - display:block; - height: 0; - clear: both; - } - - .g-right { - width: 800px; - } - - .g-left { - float: left; - width: 200px; - margin-left: -200px; - } -} - -.g-lineargradient { - background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0); - overflow: hidden; - - .g-left { - float: left; - width: 200px; - } - - .g-right { - float: left; - width: 800px; - } -} - -.g-flex { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: stretch; - - .g-left { - flex: 200px 0 0 ; - background: #4caf50; - } - - .g-right { - flex: auto 1 0; - background: #99afe0; - } -} - -.g-grid { - display: grid; - // align-items: stretch; 默认值 - grid-template-columns: 200px auto; - - .g-left { - background: #4caf50; - } - - .g-right { - background: #99afe0; - } -} - -.g-table { - overflow:hidden; - display:table; - - .g-left { - width: 200px; - display: table-cell; - background: #4caf50; - } - - .g-right { - width: 800px; - display: table-cell; - background: #99afe0; - } -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/multi-row-or-column.md b/layout/multi-row-or-column.md old mode 100644 new mode 100755 index 8b3f064..6db6feb --- a/layout/multi-row-or-column.md +++ b/layout/multi-row-or-column.md @@ -1,125 +1,125 @@ -## 多方案实现跨行或跨列布局 - -多方案实现多方案实现跨行或跨列布局 - -HTML： - -```pug -// pug 模板引擎 -div.g-container - - h2 float 实现 - div.g-float - - for(var i=0; i<3; i++) - div.g-item #{i} - - h2 flex 实现 - div.g-flex - - for(var i=0; i<3; i++) - div.g-item #{i} - - h2 grid 实现 - div.g-grid - - for(var i=0; i<3; i++) - div.g-item #{i} -``` - -SCSS： -```scss -.g-container { - margin: 20px auto; - width: 400px; -} - -.g-item { - width: 190px; - height: 190px; - box-sizing: border-box; - border: 1px solid #666; - border-radius: 10px; - line-height: 190px; - font-size: 32px; - text-align: center; - cursor:pointer; - margin: 5px; - transition: .1s all; -} - -.g-float { - overflow: hidden; - - .g-item { - float: left; - } - - .g-item:first-child { - height: 390px; - } - - .g-item:first-child:hover { - height: 190px; - width: 390px; - } -} - -h2 { - font-size: 28px; - text-align: center; - margin: 30px auto -} - - -.g-flex { - width: 400px; - height: 400px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - flex-direction: column; - - .g-item:first-child { - height: 390px; - } -} - -.g-flex:hover { - flex-direction: row; - - .g-item:first-child { - height: 190px; - width: 390px; - } -} - -.g-grid { - width: 400px; - height: 400px; - overflow: hidden; - display: grid; - grid-template-columns: repeat(2, 50%); - grid-template-rows: repeat(2, 50%); - - .g-item { - width: unset; - height: unset; - } - - .g-item:first-child { - grid-row: 1 / 3; - grid-column: 1 / 2; - } -} - -.g-grid:hover { - .g-item:first-child { - grid-row: 1 / 2; - grid-column: 1 / 3; - } -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/single-column-isometric.md b/layout/single-column-isometric.md old mode 100644 new mode 100755 index 6b875ed..4aba8d1 --- a/layout/single-column-isometric.md +++ b/layout/single-column-isometric.md @@ -1,180 +1,180 @@ -## 多种方案实现单列等宽，其他多列自适应均匀布局 - -多种方案实现单列等宽，其他多列自适应均匀布局 - -### 需求 - -共4列，首列宽度固定为200px，其余3列均分剩余宽度，每列间距10px - -### 实现 - -+ `display: grid` 实现 -+ `display: flex` 实现 -+ `position: aboslute + float` 实现 -+ `position: aboslute + float +非calc实现` - -### 难点 - -对于不使用 flex、grid 以及 css3 特性 calc 而言，实现多列自适应均匀分布只能是百分比。 - -百分比均分后间距的均分，这里参考了 bootstrap 的实现方式。 - -HTML： - -```pug -// pug 模板引擎 - -div.g-grid - - for(var i=0; i<4; i++) - div.g-item #{i} - -div.g-flex - - for(var i=0; i<4; i++) - div.g-item #{i} - -div.g-position - - for(var i=0; i<4; i++) - div.g-item #{i} - -div.g-justify - div.g-left 0 - div.g-col - div.g-row - - for(var i=1; i<4; i++) - div.g-item-box - div.g-item #{i} -``` - -SCSS： -```scss -h2 { - font-size: 28px; - text-align: center; - color: #fff; - background: #009688; - line-height: 2; -} - -.g-left, -.g-item { - background: #3f51b5; - line-height: 200px; - color: #fff; - text-align: center; - font-size: 24px; -} - -.g-grid { - height: 200px; - background: #ff9800; - display: grid; - grid-template-columns: 200px repeat(3, 1fr); - grid-column-gap: 10px; - margin-bottom: 20px; -} - -.g-flex { - height: 200px; - background: #ff9800; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - margin-bottom: 20px; - - .g-item { - flex: 0 1 calc((100% - 200px - 30px) / 3); - } - - .g-item:first-child { - flex: 0 1 200px; - } -} - -.g-position { - position: relative; - height: 200px; - background: #ff9800; - margin-bottom: 20px; - - .g-item { - float: left; - width: calc((100% - 200px - 30px) / 3); - margin-left: 10px; - } - - .g-item:nth-child(2) { - float: left; - width: calc((100% - 200px - 30px) / 3); - margin-left: 210px; - } - - .g-item:first-child { - position: absolute; - top: 0; - left: 0; - width: 200px; - height: 200px; - float: unset; - margin-left: unset; - } -} - -.g-justify { - position: relative; - height: 200px; - background: #ff9800; - margin-bottom: 20px; - - .g-col, - .g-row, - .g-item-box { - box-sizing: border-box; - } - - .g-left { - position: absolute; - top: 0; - left: 0; - width: 200px; - height: 200px; - } - - .g-row { - margin-right: -5px; - margin-left: -5px; - } - - .g-col { - position: absolute; - top: 0; - left: 210px; - right: 0; - height: 200px; - overflow: hidden; - - &:before, - &:after { - display: table; - content: " "; - } - - &:after { - clear: both; - } - - .g-item-box { - position: relative; - float: left; - width: 33.33%; - padding-left: 5px; - padding-right: 5px; - } - } -} -``` - -效果如下（点击 `Pug/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/layout/use-margin-auto-to-simulate-align-self.md b/layout/use-margin-auto-to-simulate-align-self.md new file mode 100755 index 0000000..175dae1 --- /dev/null +++ b/layout/use-margin-auto-to-simulate-align-self.md @@ -0,0 +1,87 @@ +## 使用 margin auto 实现 flex 下的 align-self: flex-end + +使用 margin auto 实现 flex 下的 align-self: flex-end + +### 难点 + +核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。 + +在 `dispaly: flex` 下： + ++ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension. + +> [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) + +简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去 + +这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。 + + +HTML： + +```HTML +
    +
  • liA
    • +
  • liB
    • +
  • liC
    • +
  • liD
    • +
  • liE
    • +
+``` + +SCSS： +```scss +.g-flex { + height: 200px; + box-sizing: border-box; + background: #037d65; + + display: flex; + // display: flex-inline; + // justify-content: space-around; +} + +li { + // align-self: center; + width: 100px; + text-align: center; + font-size: 18px; + color: #fff; + + margin: auto; + margin-bottom: 0; + margin-top: auto; +} + +li:nth-child(1) { + height: 100px; + background: #336699; +} + +li:nth-child(2) { + height: 120px; + background: #669933; +} + +li:nth-child(3) { + height: 140px; + background: #996633; +} + +li:nth-child(4) { + height: 160px; + background: #229955; +} + +li:nth-child(5) { + height: 180px; + background: #199652; +} +``` + +效果如下： + + \ No newline at end of file diff --git a/layout/use-margin-auto-to-simulate-space-between.md b/layout/use-margin-auto-to-simulate-space-between.md new file mode 100755 index 0000000..06be365 --- /dev/null +++ b/layout/use-margin-auto-to-simulate-space-between.md @@ -0,0 +1,68 @@ +## 使用 margin auto 实现 flex 下的 justify-content: space-between + +使用 margin auto 实现 flex 下的 justify-content: space-between + +### 难点 + +核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。 + +在 `dispaly: flex` 下： + ++ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension. + +> [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) + +简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去 + +这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。 + + +HTML： + +```HTML +
    +
  • liA
    • +
  • liB
    • +
  • liC
    • +
  • liD
    • +
  • liE
    • +
+``` + +SCSS： +```scss +.g-flex { + height: 100px; + margin-bottom: 100px; + box-sizing: border-box; + background: #037d65; + + display: flex; + // justify-content: space-between; +} + +li { + width: 100px; + line-height: 100px; + text-align: center; + font-size: 18px; + color: #fff; + + margin: auto; +} + +li:first-child { + margin-left: 0; +} + +li:last-child { + margin-right: 0; +} +``` + +效果如下： + + \ No newline at end of file diff --git a/logo2.png b/logo2.png old mode 100644 new mode 100755 diff --git a/others/1px-line.md b/others/1px-line.md old mode 100644 new mode 100755 index db18a9a..f333b69 --- a/others/1px-line.md +++ b/others/1px-line.md @@ -1,104 +1,104 @@ -## retina屏下的1px线的实现 - -retina屏下的1px线的实现，适用于 dpr：2 的情况。 - -+ 法一：使用渐变实现，使用两种颜色填充 1px 宽内容 -+ 法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放 -+ 法三：base64 编码实现 -+ 法四：base64 编码嵌入SVG实现 - -HTML： - -```html - - - - - retina屏下的1px线的实现 - - - -
正常使用1px border效果（本DEMO请在移动端环境下查看）
-
法一：使用渐变实现，使用两种颜色填充 1px 宽内容
-
法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放
-
法三：base64 编码实现
-
法四：base64 编码嵌入SVG实现
- -``` - -SCSS： -```scss -body { - // overflow: hidden; -} - -div { - width: 100vw; - height: 80px; - margin: 30px auto; - background-color: rgba(0, 0, 0, 0.1); - text-align: center; - padding-top: 20px; - font-size: 16px; - box-sizing: border-box; -} - -/*border-top:1px*/ -.border_normal, -.border_gradient, -.border_scale, -.border_boxshadow, -.border_base64, -.border_svg{ - border-top: 1px solid #999; -} - -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - .border_gradient { - background-image: linear-gradient(to top, transparent 50%, #999 50%); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: top center; - border-top: 0 none; - padding-top: 1px; - } - - .border_scale { - position: relative; - padding-top: 1px; - border-top: 0 none; - } - .border_scale:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 200%; - border-top: 1px solid #999; - transform: scale(0.5); - transform-origin: 0 0; - box-sizing: border-box; - } - .border_base64 { - padding-top: 1px; - border-top: 0 none; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC); - background-position: 0 0; - background-repeat: repeat-x; - background-size: 1px 1px; - } - - .border_svg { - border-top: 0 none; - background-image:url("data:image/svg+xml;utf8,"); - background-position:0 0; - background-repeat:no-repeat; - } - -} -``` - -效果如下，demo效果需要在移动端环境下观看（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/pesudo/pesudo-animation-control-hover.md b/pesudo/pesudo-animation-control-hover.md old mode 100644 new mode 100755 index aac2433..e51916c --- a/pesudo/pesudo-animation-control-hover.md +++ b/pesudo/pesudo-animation-control-hover.md @@ -1,71 +1,71 @@ -## 伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放 - -伪元素 `:hover` 实现纯 CSS 方式控制动画的暂停与播放。 - -### 关键点 - -+ 使用 hover 伪类，在鼠标悬停在按钮上面时，控制动画样式的暂停 -+ 使用了 `~` 选择符对样式进行控制 - -### 相关文章 - -[纯 CSS 方式实现 CSS 动画的暂停与播放](https://github.com/chokcoco/iCSS/issues/12) - -HTML： - -```html -
stop
-
-``` - -SCSS： -```scss -.animation { - width: 100px; - height: 100px; - margin: 50px auto; - background: deeppink; - animation: move 2s linear infinite alternate; -} - -input { - display: none; -} - -@keyframes move { - 0% { - transform: translate(-100px, 0); - } - 100% { - transform: translate(100px, 0); - } -} - -.btn { - width: 50px; - margin: 10px auto; - text-align: center; - border:1px solid #ddd; - padding: 10px; - border-radius: 5px; - cursor:pointer; - - &:hover { - background: #ddd; - color: #333; - } - - &:active { - background: #aaa; - } -} - -.stop:hover ~ .animation { - animation-play-state: paused; -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/pesudo/pesudo-animation-control-target.md b/pesudo/pesudo-animation-control-target.md old mode 100644 new mode 100755 index 6868358..a733240 --- a/pesudo/pesudo-animation-control-target.md +++ b/pesudo/pesudo-animation-control-target.md @@ -1,90 +1,90 @@ -## 伪元素 target 实现纯 CSS 方式控制动画的暂停与播放 - -伪元素 `:target` 实现纯 CSS 方式控制动画的暂停与播放。 - -### 关键点 - -+ 如何接收点击事件：本例子最重要的核心便是使用 `:target` 伪类接收点击事件 -+ 如何操作相关DOM：通过兄弟选择符 `~` 控制样式 - -### 相关文章 - -[纯CSS的导航栏Tab切换方案](http://www.cnblogs.com/coco1s/p/5955631.html) - -HTML： - -```html -
-
- -
- stop - play -
- -
-``` - -SCSS： -```scss -.animation { - width: 100px; - height: 100px; - margin: 50px auto; - background: deeppink; - animation: move 2s linear infinite alternate; -} - -input { - display: none; -} - -@keyframes move { - 0% { - transform: translate(-100px, 0); - } - 100% { - transform: translate(100px, 0); - } -} - -.btn { - display: block; - width: 50px; - margin: 10px auto; - text-align: center; - border:1px solid #ddd; - padding: 10px; - border-radius: 5px; - cursor:pointer; - text-decoration: none; - - a { - display: block; - width: 100%; - height: 100%; - } - - &:hover { - background: #ddd; - color: #333; - } - - &:active { - background: #aaa; - } -} - -#stop:target ~ .animation { - animation-play-state: paused; -} - -#play:target ~ .animation { - animation-play-state: running; -} -``` - -效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）： - - \ No newline at end of file diff --git a/pesudo/pesudo-animation-control.md b/pesudo/pesudo-animation-control.md old mode 100644 new mode 100755 index d41b84f..5d2fe5f --- a/pesudo/pesudo-animation-control.md +++ b/pesudo/pesudo-animation-control.md @@ -1,86 +1,86 @@ -## 伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放 - -伪元素 `:checked` 实现纯 CSS 方式控制动画的暂停与播放。 - -### 关键点 - -+ 使用 radio 标签的 `:checked` 伪类，加上 `