Showing preview only (500K chars total). Download the full file or copy to clipboard to get everything.
Repository: chokcoco/CSS-Inspiration
Branch: master
Commit: a4beb7adb92b
Files: 183
Total size: 458.3 KB
Directory structure:
gitextract_9n49veyn/
├── .gitattributes
├── .gitignore
├── .nojekyll
├── 3d/
│ ├── 3d-ball.md
│ ├── 3d-count-number.md
│ ├── 3d-css-galaxy-shuttle.md
│ ├── 3d-cuber-progress-bar.md
│ ├── 3d-cuber-roll-404.md
│ ├── 3d-glowing-rotate-text.md
│ ├── 3d-infinite-maze.md
│ ├── 3d-line.md
│ ├── 3d-maze.md
│ ├── 3d-rope-swing.md
│ ├── 3d-spiral-number.md
│ ├── 3d-text-debut.md
│ ├── parallax-3d-1.md
│ ├── parallax-3d-2.md
│ └── parallax-3d-translate.md
├── README.md
├── _sidebar.md
├── animation/
│ ├── animation-button-border.md
│ ├── animation-curve.md
│ ├── animation-delay-control-text-effect.md
│ ├── animation-delay-wavy.md
│ ├── animation-direction.md
│ ├── animation-play-state.md
│ └── animation-rotate.md
├── assets/
│ ├── css/
│ │ ├── highlight.css
│ │ ├── index.css
│ │ └── prism-line-numbers.css
│ └── js/
│ ├── highlight.js
│ ├── index.js
│ ├── md5.js
│ └── prism-line-number.js
├── background/
│ ├── background-css-property-tv-noise.md
│ ├── bg-attachment-frosted-glass.md
│ ├── bg-attachment-scroll-shadow.md
│ ├── bg-clip-text-shine.md
│ ├── bg-conic-border-effect.md
│ ├── bg-conic-border-light-effect.md
│ ├── bg-conic-circle-loading.md
│ ├── bg-conic-gradient-animation.md
│ ├── bg-conic-gradient-repeating-pattern.md
│ ├── bg-linear-arrow.md
│ ├── bg-linear-border-effect.md
│ ├── bg-linear-gradient-maze.md
│ ├── bg-linear-inscribed.md
│ ├── bg-linear-progress-bar.md
│ ├── bg-linear-scroll-indicator.md
│ ├── bg-linear-stripe.md
│ ├── bg-linear-underline.md
│ ├── bg-mask-image.md
│ ├── bg-mask-text-show.md
│ ├── bg-mask-transition.md
│ ├── bg-radial-btn-click-bubble.md
│ ├── bg-radial-coupon.md
│ ├── bg-radial-focus.md
│ ├── bg-wave-border.md
│ ├── bg-wave-underline.md
│ ├── bg-wave.md
│ ├── css-property-variable-bg-change-animation.md
│ └── repeating-radial-background-artistic-bg.md
├── blendmode/
│ ├── blend-color-set.md
│ ├── blend-douyin-logo.md
│ ├── blend-loading.md
│ ├── blend-mix-img.md
│ ├── blend-mix.md
│ ├── blend-rotate.md
│ ├── blend-text-glitch.md
│ ├── blend-text-shine.md
│ ├── blend-water-wave.md
│ ├── mix-multi-graidient-bg.md
│ └── mixblend-text-wave-effect.md
├── border/
│ ├── border-chargin.md
│ ├── border-image-animate.md
│ ├── border-line-animation.md
│ ├── border-line-drop-animation.md
│ ├── border-loading.md
│ ├── border-outline-symbol-add.md
│ ├── border-overflow-btn.md
│ ├── border-typing.md
│ ├── border-wave-percent.md
│ └── border-wave.md
├── clippath/
│ ├── clippath-border-image.md
│ ├── clippath-border-line-radius.md
│ ├── clippath-border-line.md
│ ├── clippath-img-glitch.md
│ └── clippath-word-crack.md
├── cssdoodle/
│ ├── bg-artist-clippath.md
│ ├── bg-artist-pattern-2.md
│ ├── bg-artist-pattern.md
│ ├── bg-mask-composite.md
│ ├── bg-mask-mix.md
│ ├── fish-seaweed.md
│ ├── spotlight.md
│ └── sunset.md
├── filter/
│ ├── filter-ball-loading.md
│ ├── filter-ball-through.md
│ ├── filter-blur-constrast.md
│ ├── filter-fire-2.md
│ ├── filter-fire.md
│ ├── filter-ghost.md
│ ├── filter-hue-rotate-color.md
│ ├── filter-mix.md
│ ├── filter-polygon-shadow.md
│ ├── filter-shadow.md
│ ├── filter-single-div-water-drop.md
│ └── use-filter-blur-enhance-text-3d-effect.md
├── generate-content.js
├── hashmap.js
├── index.html
├── init.md
├── layout/
│ ├── best-way-to-center-element.md
│ ├── double-wing-layout.md
│ ├── grid-clip-path-gta5-poster.md
│ ├── holy-grail-layout-flex.md
│ ├── holy-grail-layout.md
│ ├── masonry-layout-colum.md
│ ├── masonry-layout-flex.md
│ ├── masonry-layout-grid.md
│ ├── multi-column-contour.md
│ ├── multi-row-or-column.md
│ ├── single-column-isometric.md
│ ├── use-margin-auto-to-simulate-align-self.md
│ └── use-margin-auto-to-simulate-space-between.md
├── others/
│ ├── 1px-line.md
│ ├── border-inset-text.md
│ ├── css-resize-switch-picture.md
│ ├── digital-char-rain-animation.md
│ ├── others-chrome-tab.md
│ ├── others-equiangular-spiral.md
│ ├── others-huawei-charging.md
│ ├── others-night.md
│ ├── others-pie.md
│ ├── pointer-follow-2.md
│ ├── pointer-follow-3.md
│ ├── pointer-follow.md
│ ├── reflect-artist.md
│ ├── reflect-btn-effect.md
│ ├── reflect-text-effect.md
│ ├── word-break-move.md
│ ├── word-break.md
│ └── word-glitch.md
├── pesudo/
│ ├── pesudo-animation-control-hover.md
│ ├── pesudo-animation-control-target.md
│ ├── pesudo-animation-control.md
│ ├── pesudo-boundary-judge.md
│ ├── pesudo-bubble.md
│ ├── pesudo-focus-checked.md
│ ├── pesudo-focus-target.md
│ ├── pesudo-focus-within-placeholder-shown.md
│ ├── pesudo-focus-within.md
│ ├── pesudo-juejin.md
│ ├── pesudo-loading-content.md
│ ├── pesudo-loading-line.md
│ ├── pesudo-not-2.md
│ └── pesudo-not.md
├── shadow/
│ ├── circle-loading.md
│ ├── inscribed-angle.md
│ ├── neon-effect-3d-text.md
│ ├── neon-shadow-light.md
│ ├── opacity-wrap.md
│ ├── projection-long-shadow.md
│ ├── projection-one-sided-shadow.md
│ ├── projection-solid-shadow.md
│ ├── projection-word-solid-shadow-ii.md
│ ├── projection-word-solid-shadow.md
│ ├── relief-style-btn.md
│ ├── shadow-ani-ii.md
│ ├── shadow-ani.md
│ ├── single-div-douyin-logo.md
│ ├── single-div-fork.md
│ └── single-div-ie-logo.md
├── svg/
│ ├── alipay-ar-scan.md
│ ├── svg-arc-word.md
│ ├── svg-btn-hover.md
│ ├── svg-dropshadow-line-neon-effect.md
│ ├── svg-feTurbulence-harmony-logo.md
│ ├── svg-feturbulence-btn-glitch.md
│ ├── svg-feturbulence-clouds.md
│ ├── svg-line-text-2.md
│ └── svg-line-text.md
└── text/
└── text-underline-wave.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
*.md linguist-language=CSS
*.png linguist-language=CSS
================================================
FILE: .gitignore
================================================
node_modules/
.DS_Store
.DS_Store?
*/.DS_Store
*/*/.DS_Store.DS_Store
================================================
FILE: .nojekyll
================================================
================================================
FILE: 3d/3d-ball.md
================================================
## 3D 球动画
3D 球动画。
### 关键点
+ 借助 SASS，利用公式，随机将 100 个点附着在球表面，再进行动
HTML：
```pug
// pug模板
.container
- for(var i=0; i<100; i++)
.point
```
SCSS：
```scss
$n: 100;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgba(randomNum(255), randomNum(255), randomNum(255), randomNum(100)/100);
}
body {
background: #000;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate3d(-50%, -50%, 0) rotateY(0deg) rotateZ(0deg);
transform-style: preserve-3d;
perspective: 1000;
animation: fullrotate 10s linear infinite;
// filter: blur(1px);
}
.point {
position: absolute;
top: 95px;
left: 49%;
background: #000;
border-radius: 50%;
width: 20px;
height: 20px;
// mix-blend-mode: lighten;
@for $i from 1 through $n {
$rot-x: random(360) + deg;
$rot-y: random(360) + deg;
$radius: 100px;
&:nth-child(#{$i}) {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);
background: randomColor();
filter: blur(0px);
animation:
expand#{$i} 10s linear infinite,
sparkle 0.25s linear infinite;
animation-delay: $i*2ms;
}
@keyframes expand#{$i} {
0% {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);
filter: blur(0px);
width: 20px;
height: 20px;
}
20%, 40% {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*($i/10));
filter: blur(10px);
width: 20px;
height: 20px;
}
40%, 60% {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*4);
filter: blur(0px);
width: 40px;
height: 40px;
}
65%, 80% {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius*($i/10));
filter: blur(10px);
width: 20px;
height: 20px;
}
85%, 100% {
transform: rotateY($rot-y) rotateX($rot-x) translateZ($radius);
filter: blur(0px);
width: 20px;
height: 20px;
}
}
@-webkit-keyframes sparkle {
50% {
background: lemonchiffon;
}
}
}
}
@keyframes fullrotate {
to {
transform: translate3d(-50%, -50%, 0) rotateY(360deg) rotateZ(360deg);
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="3D ball" src="https://codepen.io/Chokcoco/embed/JwdvmJ?height=400&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/JwdvmJ'>3D ball</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-count-number.md
================================================
## 3D 数字计数动画
3D 数字计数动画。
### 关键点
看着复杂，其实不难，主要是耗时间。
其中具体的一些细节，的可以看看我的这篇文章：
[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.com/coco1s/p/7443263.html)
HTML：
```pug
// pug模板
div.g-number-container.vision.preserve
div.g-number-rotate.preserve
div.g-number.preserve(data-digit=1)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
div.g-number.preserve(data-digit=2)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
div.g-number.preserve(data-digit=3)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
div.g-comma.preserve
div.g-number.preserve(data-digit=4)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
div.g-number.preserve(data-digit=5)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
div.g-number.preserve(data-digit=6)
- for(var i=0; i<7; i++)
div.g-line.preserve.translate
```
SCSS：
```scss
$width: 3vw;
$commaWidth: .5vw;
$gap: 0.2vw;
$dis: -0.2vw;
$secTop: $width + $gap;
$thirdTop: $width * 2 + $gap * 2;
$secLineTop: $width + $gap * 2;
$screenTop: $width * 4;
$numberMargin: 3vw;
$transformDistance: 50px;
$bgColor: rgba(255, 255, 255, 1);
$scale: .9;
$normalColor: #181919;
$lightColor: #34eabc;
$drakColor: #3c4444;
$lightShadow: 0 0 1vw #0BFDFD, inset 0 0 0.125vmin #0BFDFD;
$drakShadow: 0 0 1vw #425454;
$animTime: 10s;
html,
body {
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
}
.g-number-container {
position: relative;
margin-top: 10vh;
text-align: center;
animation: rotateReverse $animTime infinite linear;
z-index: 999;
}
.g-number-rotate {
transform: rotateX(10deg) rotateZ(0);
animation: rotate $animTime infinite linear;
}
.vision {
// transform: translate(-50%, -50%);
// transform-origin: 50% 50%;
}
.preserve {
transform-style: preserve-3d;
perspective: 1000px;
}
.g-number {
position: relative;
width: $width;
height: $screenTop;
display: inline-block;
margin: $numberMargin $numberMargin 0 0;
.g-line {
position: absolute;
top: 0;
left: 0;
width: $width;
height: 2px;
background: $normalColor;
&:nth-child(1) {
transform: translateY($dis);
}
&:nth-child(2) {
top: $secTop;
}
&:nth-child(3) {
transform: rotate(180deg) translateY($dis);
top: $thirdTop;
}
&:nth-child(4) {
transform: rotate(90deg) translateY(-$dis);
transform-origin: 0 center;
}
&:nth-child(5) {
transform: rotate(-90deg) translateY(-$dis);
transform-origin: 100% center;
}
&:nth-child(6) {
top: $secLineTop;
transform: rotate(90deg) translateY(-$dis);
transform-origin: 0 center;
}
&:nth-child(7) {
top: $secLineTop;
transform: rotate(-90deg) translateY(-$dis);
transform-origin: 100% center;
}
}
.g-line::before,
.g-line::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
background-color: $lightColor;
box-shadow: $lightShadow;
}
.g-line::before {
left: 0;
right: 50%;
transition: all .5s ease-in;
}
.g-line::after {
left: 50%;
right: 0;
transition: all .5s ease-out;
}
.translate {
&::before,
&::after{
transform: translateZ($transformDistance);
}
}
}
.g-comma {
position: relative;
top: -$thirdTop + 1vw;
display: inline-block;
width: 1vw;
height: 1vw;
background: $normalColor;
margin: $numberMargin $numberMargin 0 -.8vw;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $lightColor;
transform: translateZ($transformDistance);
}
&::after {
content: "";
position: absolute;
bottom: -.8vw;
right: .3vw;
border: .2vw solid transparent;
border-top: .9vw solid $lightColor;
transform: translateZ($transformDistance) rotate(40deg);
}
}
.g-number[data-digit="1"] .g-line:nth-child(1),
.g-number[data-digit="1"] .g-line:nth-child(2),
.g-number[data-digit="1"] .g-line:nth-child(3),
.g-number[data-digit="1"] .g-line:nth-child(4),
.g-number[data-digit="1"] .g-line:nth-child(6),
.g-number[data-digit="2"] .g-line:nth-child(4),
.g-number[data-digit="2"] .g-line:nth-child(7),
.g-number[data-digit="3"] .g-line:nth-child(4),
.g-number[data-digit="3"] .g-line:nth-child(6),
.g-number[data-digit="4"] .g-line:nth-child(1),
.g-number[data-digit="4"] .g-line:nth-child(3),
.g-number[data-digit="4"] .g-line:nth-child(6),
.g-number[data-digit="5"] .g-line:nth-child(5),
.g-number[data-digit="5"] .g-line:nth-child(6),
.g-number[data-digit="6"] .g-line:nth-child(5),
.g-number[data-digit="7"] .g-line:nth-child(2),
.g-number[data-digit="7"] .g-line:nth-child(3),
.g-number[data-digit="7"] .g-line:nth-child(4),
.g-number[data-digit="7"] .g-line:nth-child(6),
.g-number[data-digit="9"] .g-line:nth-child(6),
.g-number[data-digit="0"] .g-line:nth-child(2){
&::before,
&::after {
transform: translateZ(25px);
background: $drakColor;
box-shadow: $drakShadow;
}
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(20deg) rotateY(40deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
}
}
@keyframes rotateReverse {
0% {
transform: rotateZ(0deg);
}100% {
transform: rotateZ(-360deg);
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="3d Number Count" src="https://codepen.io/Chokcoco/embed/qXVxyw?height=400&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/qXVxyw'>3d Number Count</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-css-galaxy-shuttle.md
================================================
## 3D 宇宙时空穿梭效果
利用 CSS 3D 实现星空穿梭效果
### 关键点
1. 选取一张合适的星空图
2. 利用 5 个元素设定上述星空图，在 3D 效果的作用下，在上下左右中5个方向铺满一屏
3. 父容器在极小的 `perspective` 值下，设定容器的 `translateZ`动画，实现效果
4. 通过两组同样的动画，其中一组设置负延迟实现动画的衔接
HTML：
```
<div class="g-container">
<div class="g-group">
<div class="item item-right"></div>
<div class="item item-left"></div>
<div class="item item-top"></div>
<div class="item item-bottom"></div>
<div class="item item-middle"></div>
</div>
<div class="g-group">
<div class="item item-right"></div>
<div class="item item-left"></div>
<div class="item item-top"></div>
<div class="item item-bottom"></div>
<div class="item item-middle"></div>
</div>
</div>
```
SCSS：
```scss
html, body{
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
text-align: center;
}
body:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.g-container{
display: inline-block;
vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear;
}
.g-group{
position: absolute;
/* perspective: 4px; */
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 12s infinite linear;
animation-fill-mode: forwards;
}
.g-group:nth-child(2){
animation: move 12s infinite linear;
animation-delay: -6s;
}
.item {
position: absolute;
width: 100%;
height: 100%;
background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
background-size: cover;
opacity: 1;
animation: fade 12s infinite linear;
animation-delay: 0;
}
.g-group:nth-child(2) .item {
animation-delay: -6s;
}
.item-right {
transform: rotateY(90deg) translateZ(500px);
}
.item-left {
transform: rotateY(-90deg) translateZ(500px);
}
.item-top {
transform: rotateX(90deg) translateZ(500px);
}
.item-bottom {
transform: rotateX(-90deg) translateZ(500px);
}
.item-middle {
transform: rotateX(180deg) translateZ(1000px);
}
@keyframes move {
0%{
transform: translateZ(-500px) rotate(0deg);
}
100%{
transform: translateZ(500px) rotate(0deg);
}
}
@keyframes fade {
0%{
opacity: 0;
}
25%,
60%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes hueRotate {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
```
效果如下：
<iframe height="450" style="width: 100%;" scrolling="no" title="Pure CSS Galaxy Shuttle" src="https://codepen.io/Chokcoco/embed/abWeNEV?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/abWeNEV">
Pure CSS Galaxy Shuttle</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-cuber-progress-bar.md
================================================
## 3D 立方体进度条
使用 CSS 3D 实现的立方体制作酷炫的进度条。
### 关键点
+ 可以利用 CSS Property 实现渐变的动画效果
+ 可以利用滤镜的 hue-rotate 变化实现整体的颜色变化
HTML：
```
<div class="demo-cube perspective percentage">
<ul class="cube">
<li class="top"></li>
<li class="bottom"></li>
<li class="front"></li>
<li class="back"></li>
</ul>
</div>
<div class="demo-cube perspective colorful">
<ul class="cube">
<li class="top"></li>
<li class="bottom"></li>
<li class="front"></li>
<li class="back"></li>
</ul>
</div>
<div class="demo-cube perspective pink">
<ul class="cube">
<li class="top"></li>
<li class="bottom"></li>
<li class="front"></li>
<li class="back"></li>
</ul>
</div>
```
SCSS：
```scss
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
body,
html {
width: 100%;
height: 100%;
background: linear-gradient(0deg, #EEEFED, #F9E3E9);
display: flex;
flex-direction: column;
}
.demo-cube {
margin: auto;
}
.perspective {
transform-style: preserve-3d;
perspective: 520px;
transform: rotateX(15deg);
}
ul {
padding: 0;
list-style: none;
}
.demo-cube {
position: relative;
width: 100%;
height: 200px;
.cube {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 100px;
transform-style: preserve-3d;
transform-origin: 50px 50px;
transform: translate(-50%, -50%) rotateX(-33.5deg);
li {
position: absolute;
display: block;
width: 100px;
height: 100px;
// background: rgba(156, 39, 176, .4);
// border: 1px solid #ddd;
}
.top {
width: 300px;
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
width: 300px;
transform: rotateX(-90deg) translateZ(50px);
}
.front {
width: 300px;
transform: translateZ(50px);
}
.back {
width: 300px;
transform: rotateX(-180deg) translateZ(50px);
}
}
}
.percentage .cube {
.top,
.front,
.bottom,
.back {
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));
}
}
.colorful {
animation: hueRotate 10s infinite linear;
.cube {
.top,
.front,
.bottom,
.back {
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));
}
}
}
.pink .cube {
.top,
.front,
.bottom,
.back {
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));
animation: perChange 6s infinite;
}
}
@keyframes perChange {
0% {
--per: 0%;
}
90%,
to {
--per: 80%;
}
}
@keyframes hueRotate {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
}
}
```
效果如下：
<iframe height="550" style="width: 100%;" scrolling="no" title="Webpack logo" src="https://codepen.io/Chokcoco/embed/gORYybM?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/gORYybM">
Webpack logo</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-cuber-roll-404.md
================================================
## 3D 立方体滚动 404 效果
使用 CSS 3D 实现的立方体制作的一个 404 效果。
### 关键点
其核心就在于在一个 CSS 3D 立方体的基础上：
1. 添加立方体的滚动动画
2. 控制下落的缓动函数，及落地的震荡动画（为了效果更为逼真，运用了设计动画中的预备动作、跟随和重叠动画等技巧）
3. 控制立方体及地面数字画面的平移
4. 控制动画的无限循环
整体制作还是非常有难度的，但是用在自己的 404 页面，确实也是非常的酷炫。这个效果，我最早见于 [Yusuke Nakaya](https://codepen.io/YusukeNakaya) 大神，完整的代码你也可以戳这里：[CodePen -- Only CSS: 404 Rolling Box ](https://codepen.io/YusukeNakaya/pen/YLPVER)
HTML（使用了 Pug 模板引擎）：
```
.rail
- for (i = 0; i < 10; i++)
.stamp.four 4
.stamp.zero 0
.world
.forward
.box
- for (i = 0; i < 6; i++)
.wall
```
SCSS：
```scss
body {
background: #fff;
height: 100vh;
overflow: hidden;
display: flex;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
perspective: 1000px;
}
$wallSize: 200px;
div {
transform-style: preserve-3d;
}
.rail {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: rotateX(-30deg) rotateY(-30deg);
.stamp {
position: absolute;
width: $wallSize;
height: $wallSize;
display: flex;
justify-content: center;
align-items: center;
background: rgba(20, 20, 20, 1);
color: #fff;
font-size: 7rem;
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
animation: stampSlide 20 * 2000ms ($i * -2000) - 300ms linear infinite;
}
}
}
}
@keyframes stampSlide {
0% {
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-$wallSize) translateY(130px);
}
100% {
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-$wallSize) translateY(130 - 200 * 20px);
}
}
.world {
transform: rotateX(-30deg) rotateY(-30deg);
.forward {
position: absolute;
animation: slide 2000ms linear infinite;
}
.box {
width: $wallSize;
height: $wallSize;
transform-origin: 100% 100%;
animation: roll 2000ms cubic-bezier(1.000, 0.010, 1.000, 1.000) infinite;
.wall {
position: absolute;
width: $wallSize;
height: $wallSize;
background: rgba(10, 10, 10, 0.8);
border: 1px solid rgba(250, 250, 250, 1);
box-sizing: border-box;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 7rem;
}
&:nth-child(1) {
transform: translateZ($wallSize / 2);
}
&:nth-child(2) {
transform: rotateX(180deg) translateZ($wallSize / 2);
}
&:nth-child(3) {
transform: rotateX(90deg) translateZ($wallSize / 2);
&::before {
transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
animation: zeroFour 4000ms -2000ms linear infinite;
}
}
&:nth-child(4) {
transform: rotateX(-90deg) translateZ($wallSize / 2);
&::before {
transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
animation: zeroFour 4000ms -2000ms linear infinite;
}
}
&:nth-child(5) {
transform: rotateY(90deg) translateZ($wallSize / 2);
&::before {
transform: rotateX(180deg) translateZ(-1px);
animation: zeroFour 4000ms linear infinite;
}
}
&:nth-child(6) {
transform: rotateY(-90deg) translateZ($wallSize / 2);
&::before {
transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
animation: zeroFour 4000ms linear infinite;
}
}
}
}
}
@keyframes zeroFour {
0% {
content: '4';
}
100% {
content: '0';
}
}
@keyframes roll {
0% {
transform: rotateZ(0deg);
}
85% {
transform: rotateZ(90deg);
}
87% {
transform: rotateZ(88deg);
}
90% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(90deg);
}
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-$wallSize);
}
}
```
效果如下：
<iframe height="500" style="width: 100%;" scrolling="no" title="Only CSS: 404 Rolling Box" src="https://codepen.io/Chokcoco/embed/MdGYbX?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/MdGYbX">
Only CSS: 404 Rolling Box</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-glowing-rotate-text.md
================================================
## 3D 光影变换文字效果
利用 CSS 3D 实现光影变换文字效果。
### 关键点
+ 给父元素 `div` 设置 `transform-style: preserve-3d`，给每个 `<h1>` 设定不同的 `translateZ()` 来达到文字的 3D 效果
+ 辅助一些旋转，色彩变化给效果增色
HTML：
```
<div>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
<h1>Glowing 3D TEXT</h1>
</div>
```
SCSS：
```scss
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');
html,
body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
text-align: center;
font-family: 'Rajdhani', sans-serif;
}
div {
animation: wobble 5s ease-in-out infinite;
transform-origin: center center;
transform-style: preserve-3d;
/* perspective: 500px; */
}
@keyframes wobble {
0%,
100% {
transform: rotate3d(1, 1, 0, 40deg);
}
25% {
transform: rotate3d(-1, 1, 0, 40deg);
}
50% {
transform: rotate3d(-1, -1, 0, 40deg);
}
75% {
transform: rotate3d(1, -1, 0, 40deg);
}
}
h1 {
position: absolute;
display: block;
width: 100%;
top: 120px;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
color: rgba(255, 100, 100, 1);
text-shadow:
0 0 5px rgba(255, 0, 0, 1),
0 0 20px rgba(255, 0, 0, .8),
0 0 50px rgba(255, 0, 0, .6);
animation: glow 10s ease-in-out infinite;
}
@keyframes glow {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
h1:nth-child(2) {
transform: translateZ(5px);
}
h1:nth-child(3) {
transform: translateZ(10px);
}
h1:nth-child(4) {
transform: translateZ(15px);
}
h1:nth-child(5) {
transform: translateZ(20px);
}
h1:nth-child(6) {
transform: translateZ(25px);
}
h1:nth-child(7) {
transform: translateZ(30px);
}
h1:nth-child(8) {
transform: translateZ(35px);
}
h1:nth-child(9) {
transform: translateZ(40px);
}
h1:nth-child(10) {
transform: translateZ(45px);
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="Glowing 3D TEXT" src="https://codepen.io/Chokcoco/embed/WNjmJeV?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/WNjmJeV">
Glowing 3D TEXT</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-infinite-maze.md
================================================
## 3D 无限延伸视角动画
3D 无限延伸视角动画。
### 关键点
这个实现起来非常有难度。
+ 四面墙壁的无限延伸的感觉塑造
+ 视角的变动
+ 远处最深处的遮罩
非原创，原效果链接：[Perspective Origin Tunnel Animation](https://codepen.io/jkantner/pen/zXwyGr)
HTML：
```HTML
<main>
<div class="t"></div>
<div class="r"></div>
<div class="b"></div>
<div class="l"></div>
</main>
```
SCSS：
```scss
body {
background: #575757;
display: flex;
height: 100vh;
margin: 0;
}
main {
/* Timing */
--durM: 6s;
--durD: 0.5s;
/* Tunnel itself */
--size: 20em;
--depth: calc(var(--size) * 6);
--bgPos: calc(var(--size) * 0.4);
/* Camera movement */
--endX1: 33%;
--endX2: 67%;
--endY1: 40%;
--endY2: 60%;
animation: po var(--durM) ease-in-out infinite;
margin: auto;
overflow: hidden;
perspective: 5em;
perspective-origin: 50% 50%;
position: relative;
width: var(--size);
height: var(--size);
transform: scale(6);
}
main:before, div {
position: absolute;
}
main:before {
animation: end var(--durM) ease-in-out infinite;
background: currentColor;
box-shadow: 0 0 1em 1em;
color: #000;
content: "";
display: block;
margin: -0.5em -0.5em;
width: 1em;
height: 1em;
top: 50%;
left: 50%;
z-index: 5;
}
div {
background: conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0 / var(--bgPos) var(--bgPos);
}
.t, .l {
top: 0;
left: 0;
transform-origin: 0 0;
}
.r, .b {
right: 0;
bottom: 0;
transform-origin: 100% 100%;
}
.t, .b {
width: 100%;
height: var(--depth);
}
.r, .l {
filter: brightness(70%);
width: var(--depth);
height: 100%;
}
.t {
animation: t var(--durD) linear infinite;
background-position: 0 calc(var(--bgPos) / 2);
filter: brightness(40%);
transform: rotateX(-90deg);
}
.r {
animation: r var(--durD) linear infinite;
background-position: calc(var(--bgPos) / 2) 0;
transform: rotateY(-90deg);
}
.b {
animation: b var(--durD) linear infinite;
transform: rotateX(90deg);
}
.l {
animation: l var(--durD) linear infinite;
transform: rotateY(90deg);
}
@keyframes po {
from, to { perspective-origin: var(--endX1) var(--endY1) }
25% { perspective-origin: var(--endX2) var(--endY1) }
50% { perspective-origin: var(--endX2) var(--endY2) }
75% { perspective-origin: var(--endX1) var(--endY2) }
}
@keyframes t {
to { transform: rotateX(-90deg) translateY(calc(var(--bgPos) * -1)) }
}
@keyframes r {
to { transform: rotateY(-90deg) translateX(var(--bgPos)) }
}
@keyframes b {
to { transform: rotateX(90deg) translateY(var(--bgPos)) }
}
@keyframes l {
to { transform: rotateY(90deg) translateX(calc(var(--bgPos) * -1)) }
}
@keyframes end {
from, to {
top: var(--endY1);
left: var(--endX1);
}
25% {
top: var(--endY1);
left: var(--endX2);
}
50% {
top: var(--endY2);
left: var(--endX2);
}
75% {
top: var(--endY2);
left: var(--endX1);
}
}
```
效果如下：
<iframe height="600" style="width: 100%;" scrolling="no" title="Perspective Origin Tunnel Animation" src="https://codepen.io/Chokcoco/embed/eYYJaMZ?height=600&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/eYYJaMZ'>Perspective Origin Tunnel Animation</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-line.md
================================================
## 3D 线条动画
3D 线条动画。
### 关键点
+ 借助 SASS，其实是 100 个元素，借助 animation-delay 实现的一条线
HTML：
```pug
// pug模板
div.container
- for(var i=0; i<100; i++)
div.circle
```
SCSS：
```scss
$n: 100;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgba(randomNum(255), randomNum(255), randomNum(255), randomNum(100)/100);
}
html,
body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1vmin;
height: 1vmin;
transform-style: preserve-3d;
perspective: 1000;
animation: screenMove 16s infinite alternate;
// mix-blend-mode: lighten;
}
@for $i from 1 through $n {
.circle:nth-child(#{$i}) {
position: absolute;
top: 0;
left: 0;
width: 1vmax;
height: 1vmax;
border-radius: 50%;
animation: anim-#{$i} 10s infinite 0.01s * $i alternate ease-in-out;
background: hsl($i * 2, 95, 60);
// mix-blend-mode: lighten;
}
@keyframes anim-#{$i}{
100% {
filter: hue-rotate(360deg);
transform:
rotate(28 * 360deg)
translate3d(50vmin, 50vmin, -#{$i * 20}px)
scale(6);
}
}
}
@keyframes screenMove {
100% {
transform: translate3d(-50%, -50%, 0) rotateY(45deg);
}
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="CSS线条动画" src="https://codepen.io/Chokcoco/embed/XogwvV?height=350&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/XogwvV'>CSS线条动画</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-maze.md
================================================
## 3D 迷宫线条特效
3D 迷宫线条特效。
在这里 [使用线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md)，利用线性渐变实现了一个简单的类似迷宫的线条图像，这里再实现一个 3D 的。
本效果还搭配了滤镜和混合模式一起使用。
HTML：
```pug
// pug模板
-for(var j=0; j<10; j++)
div.g-grid
- for(var i=0; i<400; i++)
div.g-box
```
SCSS：
```scss
$count: 400;
$containerCount: 10;
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
transform-style: preserve-3d;
perspective: 2500;
animation: spectiveMove 40s infinite alternate linear;
filter: blur(1px) contrast(2);
// mix-blend-mode: screen;
background: linear-gradient(45deg, #000, #444);
}
@function randomRotate() {
$r: random(100);
@if $r > 50 { @return 45 }
@if $r <= 50 { @return -45 }
}
.g-grid {
position: absolute;
top: 0;
left: 50%;
width: 100vmin;
height: 100vmin;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(20, 5%);
grid-template-rows: repeat(20, 5%);
// transform: translate3d(0, 0, #{random(50)}px);
}
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
background: linear-gradient(#{randomRotate()}deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
transform: translate3d(0, 0, #{random(100)}px);
}
}
@for $i from 1 to $containerCount + 1 {
.g-grid:nth-child(#{$i}) {
transform: translate3d(-50%, 0, #{180 * $i + random(50)}px) rotateZ(#{random(90)}deg);
}
}
@keyframes spectiveMove {
100% {
perspective: 600;
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="CSS 3D MAZE" src="https://codepen.io/Chokcoco/embed/dLYpxK?height=400&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/dLYpxK'>CSS 3D MAZE</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-rope-swing.md
================================================
## 3D 绳动画
非常好的学习 CSS 3D 的动画 DEMO。
HTML：
```HTML
<input type="checkbox" id="toggle" checked />
<section id="sect">
<label for="toggle" class="toggle">change view</label>
<ul>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
<li>swing</li>
</ul>
</section>
```
SCSS：
```scss
// vars
$random_color: rgba(rd(255),rd(255),rd(255),.33);
$c: ( // colors
t: rgba(0,0,0,0),
s: #000,
w: #fff,
gr: desaturate(rgb(rd(255),rd(255),rd(255)), 100%),
r: rgb(rd(255),rd(150),rd(150)),
g: rgb(rd(150),rd(255),rd(150)),
b: rgb(rd(150),rd(150),rd(255)),
bg: $random_color,
cp: ( // color palette
1: #283739,
2: #2C5D63,
3: #A9C52F,
4: #F7EEBB
),
);
// settings
$f: unquote("'Podkova', serif");
$fb: unquote("'Trebuchet MS', Helvetica, sans-serif");
$fz: 16px;
// uncomment for responsive font-size
$fz: unquote('calc(1.1vw + 1.1vh - .6vmin)');
@media screen and (max-width: 600px) {
body > * {
font-size: 1.5em;
}
}
$time: 4s;
// --------- defaults ---------
* {
&:focus {
outline: 0;
}
&, &:before, &:after {
box-sizing: border-box;
}
}
// @include placeholder(){
// font-family: $f;
// }
// --------------------
html {
background-color: clr(s);
body {
font-family: $f;
font-size: $fz;
color: clr(w);
background-color: clr(bg);
}
&, body {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
}
#toggle {
display: none;
}
.toggle {
position: fixed;
z-index: 10;
left: 1em;
top: 1em;
display: inline-block;
padding: .4em .5em .5em;
cursor: pointer;
text-indent: 1.7em;
color: clr(cp, 3);
border-radius: .25em;
transition: all $time/5;
background-color: clr(cp, 1);
&:before {
content: '';
position: absolute;
z-index: 20;
left: .5em;
top: .4em;
width: 1em;
height: 1em;
display: inline-block;
border: 2px solid clr(cp, 2);
vertical-align: middle;
border-radius: 3px;
}
&:after {
content: '';
position: absolute;
width: 0;
height: 0;
z-index: 21;
display: inline-block;
border: 2px solid clr(cp,4);
border-width: 0 4px 4px 0;
left: .75em;
top: .75em;
opacity: 0;
transition: all $time/5;
transform: rotate(45deg);
#toggle:checked + #sect & {
width: .5em;
top: .25em;
height: 1em;
opacity: 1;
}
}
#toggle:checked + #sect & {
color: clr(cp, 4);
}
}
#sect {
width: 100vw;
height: 100vh;
padding: 1em;
text-align: center;
vertical-align: middle;
display: block;
position: relative;
perspective: 600px;
ul {
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all $time/3;
transform-style: preserve-3d;
transform: translateZ(-70vmax) translateX(-50vw) rotateY(0deg);
position: absolute;
#toggle:checked + & {
transform: translateZ(-50em) translateX(0vw) rotateY(90deg);
}
}
li {
display: inline-block;
position: absolute;
font-size: 3em;
margin-left: -5em;
transition: all $time/5;
// filter: blur(0px);
opacity: 1;
color: clr(cp, 4);
transform-origin: center -123vmax;
animation: pendulum ease-in-out infinite alternate $time;
&:before {
content: '';
position: absolute;
bottom: 100%;
width: 1px;
box-shadow: 0 0 0 .01em clr(cp, 3);
height: 25em;
left: 50%;
background-color: clr(cp, 3);
}
@for $i from 0 to 24 {
&:nth-of-type(#{$i}) {
left: 2.5em * $i;
animation-delay: -#{$i/10}s;
#toggle:checked + & {
// filter: blur(#{floor($i/3)}px);
opacity: 1.2 - ($i/15);
}
}
}
}
}
@keyframes pendulum {
from {
transform: translateY(70vh) rotateX(-45deg);
}
to {
transform: translateY(70vh) rotateX(45deg);
}
}
// ease():
// 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
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="CSS Pendulum" src="https://codepen.io/Chokcoco/embed/yLMxXwV?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/yLMxXwV">
CSS Pendulum</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-spiral-number.md
================================================
## 3D 螺旋数字动画
3D 螺旋数字动画。
### 关键点
+ 借助 SASS，把每一列数字渐进旋转一定角度即可
+ 当然，细心的你应该发现，每个数字一直都是面向正面的
HTML：
```pug
// pug模板
.container
- for(var i=0; i<36; i++)
.line
- for(var j=0; j<12; j++)
.number
```
SCSS：
```scss
$lineNumber: 36;
$column: 12;
$aniTime: 10s;
@function randomNum($max, $min: 0) {
@return ($min + random($max));
}
html,
body {
background-color: #000;
overflow: hidden;
}
.container {
width: 80vw;
position: relative;
margin: 10vh auto;
transform-style: preserve-3d;
perspective: 1000px;
display: flex;
justify-content: space-between;
// mix-blend-mode: luminosity;
}
.line {
width: 20px;
height: 80vh;
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
transform-style: preserve-3d;
perspective: 1000px;
.number {
position: relative;
font-size: 16px;
height: calc(80vh / 18);
border-radius: 50%;
transform-style: preserve-3d;
perspective: 1000px;
box-shadow: 0 0 5px 5px rgba(255, 248, 78, .1),
inset 0 0 5px 5px rgba(255, 248, 78, .1);
line-height: calc(80vh / 18);
&::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #57ff5e;
text-shadow: 0 0 40px #57ff5e;
}
}
}
@for $i from 0 to $lineNumber {
.line:nth-child(#{$i + 1}) {
transform: rotateX(#{$i * 10}deg);
@for $j from 0 to $column {
.number:nth-child(#{$j + 1}) {
// 卡就去掉这一行
animation: reRotate $aniTime linear infinite;
&::before {
transform: rotateX(#{$i * -10}deg);
content: '#{randomNum(9)}';
}
}
}
}
}
.container {
transform: rotateX(0);
animation: conRotate $aniTime linear infinite;
}
@keyframes conRotate {
to {
transform: rotateX(360deg);
}
}
@keyframes reRotate {
to {
transform: rotateX(-360deg);
}
}
```
效果如下：
<iframe height="450" style="width: 100%;" scrolling="no" title="3D Spiral Number " src="https://codepen.io/Chokcoco/embed/LeWbaB?height=450&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/LeWbaB'>3D Spiral Number </a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/3d-text-debut.md
================================================
## 3D 文字出场动画
利用 CSS 3D 实现文字出场特效
### 关键点
1. 父元素、子元素设置 `transform-style: preserve-3d`
2. 用 `span` 元素的两个伪元素复制两个相同的字，利用 `translateZ()` 让它们在 Z 轴间隔一定距离
3. 添加简单的旋转、透明度、字体颜色变化
可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。
HTML：
```
<div>
<span class='C'>C</span>
<span class='S'>S</span>
<span class='S'>S</span>
<span></span>
<span class='3'>3</span>
<span class='D'>D</span>
</div>
```
SCSS：
```scss
@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 8s;
body, html {
width: 100%;
height: 100%;
display: flex;
background: #000;
overflow: hidden;
}
div {
margin: auto;
perspective: 2000px;
transform-style: preserve-3d;
font: 10vw Righteous;
animation: fade $duration infinite;
}
span {
position: relative;
display: inline-block;
min-width: .5em;
text-align: center;
transform-style: preserve-3d;
transform: rotateY(25deg);
animation: rotate $duration infinite ease-in;
color: black;
&:after, &:before {
display: block;
position: absolute;
top: 0;
left: 0;
content: attr(class);
color: $gold;
z-index: -1;
animation: shadow $duration infinite;
}
&:before {
transform: translateZ(-14px);
}
&:after {
transform: translateZ(-7px);
}
}
@keyframes fade {
from {
opacity: 0;
transform: scale(1.2);
}
25% { opacity: 1; }
100% {
transform: scale(1);
}
}
@keyframes rotate {
from {
transform: rotateY(65deg);
}
50%, 100% {
color: $dark;
transform: rotateY(5deg);
}
100% {
color: $gold;
}
}
@keyframes shadow {
from {
color: shade($gold, 50%);
}
25% {
color: $bright;
}
50%, 100% {
color: tint($gold, 100%);
}
}
```
效果如下：
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="result" data-slug-hash="wvdZjvR" data-editable="true" data-user="Chokcoco" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Chokcoco/pen/wvdZjvR">
CSS 3D TEXT</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
================================================
FILE: 3d/parallax-3d-1.md
================================================
## 借助 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
<div class="card">
<div class="card-content">
<h1>Just hover around</h1>
<p>translateZ 3D</p>
<p class="related">3D视差</p>
</div>
</div>
```
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` 可以对代码进行编辑）：
<iframe height='420' scrolling='no' title='translateZ 实现 3D 视差' src='//codepen.io/Chokcoco/embed/wQrNrd/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/wQrNrd/'>translateZ 实现 3D 视差</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/parallax-3d-2.md
================================================
## 借助 translate3d\perspective 实现 3D 视差效果2
借助 translate3d\perspective 实现 3D 视差效果2。
视差滚动（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;
}
}
```
效果如下：
<iframe height='350' scrolling='no' title='CSS 视差' src='//codepen.io/Chokcoco/embed/PBXwdX/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/PBXwdX/'>CSS 视差</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: 3d/parallax-3d-translate.md
================================================
## 使用 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
<div class="g-container">
<div class="section-one">translateZ(-1)</div>
<div class="section-two">translateZ(-2)</div>
<div class="section-three">translateZ(-3)</div>
</div>
```
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` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='CSS 3D parallax' src='//codepen.io/Chokcoco/embed/EpOeRm/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/EpOeRm/'>CSS 3D parallax</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: README.md
================================================
这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
## 在线预览
[Online Pages](https://csscoco.com/inspiration/#/./init)
> 偶尔证书过期，可暂时使用这个链接 -- [Github Page](https://chokcoco.github.io/CSS-Inspiration/#/)
## 布局（Layout）
+ [实现水平垂直居中最便捷的方法](https://csscoco.com/inspiration/#/./layout/best-way-to-center-element.md)
+ [双飞翼布局](https://csscoco.com/inspiration/#/./layout/double-wing-layout.md)
+ [grid 布局配合 clip-path 实现 GTA5 封面](https://csscoco.com/inspiration/#/./layout/grid-clip-path-gta5-poster.md)
+ [flex 实现圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout-flex.md)
+ [圣杯布局](https://csscoco.com/inspiration/#/./layout/holy-grail-layout.md)
+ [CSS实现瀑布流布局（column-count）](https://csscoco.com/inspiration/#/./layout/masonry-layout-colum.md)
+ [CSS 实现瀑布流布局（display: flex）](https://csscoco.com/inspiration/#/./layout/masonry-layout-flex.md)
+ [CSS实现瀑布流布局（display: grid）](https://csscoco.com/inspiration/#/./layout/masonry-layout-grid.md)
+ [6种实现多列等高的方法](https://csscoco.com/inspiration/#/./layout/multi-column-contour.md)
+ [多方案实现跨行或跨列布局](https://csscoco.com/inspiration/#/./layout/multi-row-or-column.md)
+ [多种方案实现单列等宽，其他多列自适应均匀布局](https://csscoco.com/inspiration/#/./layout/single-column-isometric.md)
+ [使用 margin auto 实现 flex 下的 align-self: flex-end](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-align-self.md)
+ [使用 margin auto 实现 flex 下的 justify-content: space-between](https://csscoco.com/inspiration/#/./layout/use-margin-auto-to-simulate-space-between.md)
## 阴影(box-shadow、drop-shadow)
+ [Box-shadow实现圆环进度条动画](https://csscoco.com/inspiration/#/./shadow/circle-loading.md)
+ [使用box-shadow/渐变实现内切角](https://csscoco.com/inspiration/#/./shadow/inscribed-angle.md)
+ [Neon Effect 3D TEXT](https://csscoco.com/inspiration/#/./shadow/neon-effect-3d-text.md)
+ [box-shadow实现霓虹氖灯文字效果](https://csscoco.com/inspiration/#/./shadow/neon-shadow-light.md)
+ [使用 box-shadow 实现半透明遮罩](https://csscoco.com/inspiration/#/./shadow/opacity-wrap.md)
+ [线性渐变模拟长阴影](https://csscoco.com/inspiration/#/./shadow/projection-long-shadow.md)
+ [单侧投影](https://csscoco.com/inspiration/#/./shadow/projection-one-sided-shadow.md)
+ [立体投影](https://csscoco.com/inspiration/#/./shadow/projection-solid-shadow.md)
+ [线性渐变配合阴影实现条纹立体阴影条纹字](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow-ii.md)
+ [立体文字阴影](https://csscoco.com/inspiration/#/./shadow/projection-word-solid-shadow.md)
+ [浮雕风格按钮](https://csscoco.com/inspiration/#/./shadow/relief-style-btn.md)
+ [box-shadow实现背景动画 2](https://csscoco.com/inspiration/#/./shadow/shadow-ani-ii.md)
+ [box-shadow实现背景动画 ](https://csscoco.com/inspiration/#/./shadow/shadow-ani.md)
+ [单标签实现抖音LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-douyin-logo.md)
+ [单标签实现叉子图形](https://csscoco.com/inspiration/#/./shadow/single-div-fork.md)
+ [单标签借助 inset shadow 实现IE LOGO](https://csscoco.com/inspiration/#/./shadow/single-div-ie-logo.md)
## 伪类/伪元素
+ [伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-hover.md)
+ [伪元素 target 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control-target.md)
+ [伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放](https://csscoco.com/inspiration/#/./pesudo/pesudo-animation-control.md)
+ [伪元素实现边界智能判断移动](https://csscoco.com/inspiration/#/./pesudo/pesudo-boundary-judge.md)
+ [伪元素+border实现气泡对话框](https://csscoco.com/inspiration/#/./pesudo/pesudo-bubble.md)
+ [使用 checked 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-checked.md)
+ [使用 target 伪类实现纯 CSS Tab 切换](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-target.md)
+ [placeholder-shown 配合 focus-within 实现 input 输入交互](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within-placeholder-shown.md)
+ [focus-within switch tab](https://csscoco.com/inspiration/#/./pesudo/pesudo-focus-within.md)
+ [伪元素 focus-within 纯 CSS 方式实现掘金登陆特效](https://csscoco.com/inspiration/#/./pesudo/pesudo-juejin.md)
+ [伪元素实现打点 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-content.md)
+ [伪元素遮罩实现线条 loading 效果](https://csscoco.com/inspiration/#/./pesudo/pesudo-loading-line.md)
+ [使用:not()伪类控制特殊边框样式](https://csscoco.com/inspiration/#/./pesudo/pesudo-not-2.md)
+ [使用:not()伪类实现弹窗背景元素模糊](https://csscoco.com/inspiration/#/./pesudo/pesudo-not.md)
## 滤镜(fliter)
+ [小球穿梭放大loading动画](https://csscoco.com/inspiration/#/./filter/filter-ball-loading.md)
+ [小球穿梭效果](https://csscoco.com/inspiration/#/./filter/filter-ball-through.md)
+ [使用 filter:blur | filter:constrast 生成特殊融合效果](https://csscoco.com/inspiration/#/./filter/filter-blur-constrast.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果2](https://csscoco.com/inspiration/#/./filter/filter-fire-2.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果](https://csscoco.com/inspiration/#/./filter/filter-fire.md)
+ [单标签纯CSS实现幽灵动画](https://csscoco.com/inspiration/#/./filter/filter-ghost.md)
+ [使用 hue-rotate 实现渐变背景动画](https://csscoco.com/inspiration/#/./filter/filter-hue-rotate-color.md)
+ [滤镜及混合模式混搭特效](https://csscoco.com/inspiration/#/./filter/filter-mix.md)
+ [使用 drop-shadow 配合 clip-path 生成规则阴影](https://csscoco.com/inspiration/#/./filter/filter-polygon-shadow.md)
+ [使用 filter:blur 生成彩色阴影](https://csscoco.com/inspiration/#/./filter/filter-shadow.md)
+ [单标签实现滴水效果](https://csscoco.com/inspiration/#/./filter/filter-single-div-water-drop.md)
+ [利用 filter:blur 增强文字的 3D 效果](https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect.md)
## 边框
+ [活用 border-radius, 实现充电动画](https://csscoco.com/inspiration/#/./border/border-chargin.md)
+ [利用 border-image 实现动态边框](https://csscoco.com/inspiration/#/./border/border-image-animate.md)
+ [活用 border-radius, 单标签线条动画](https://csscoco.com/inspiration/#/./border/border-line-animation.md)
+ [使用 border-radius 的变化模拟绳子下坠](https://csscoco.com/inspiration/#/./border/border-line-drop-animation.md)
+ [border-radius变换实现loading效果](https://csscoco.com/inspiration/#/./border/border-loading.md)
+ [活用 outline 巧妙实现加号符号](https://csscoco.com/inspiration/#/./border/border-outline-symbol-add.md)
+ [巧用 overflow 及实现边框线条动画](https://csscoco.com/inspiration/#/./border/border-overflow-btn.md)
+ [border-color 变换实现文字输入效果](https://csscoco.com/inspiration/#/./border/border-typing.md)
+ [活用 border-radius, 实现波浪百分比图](https://csscoco.com/inspiration/#/./border/border-wave-percent.md)
+ [活用 border-radius, 实现波浪动画](https://csscoco.com/inspiration/#/./border/border-wave.md)
## 背景/渐变(linear-gradient/radial-gradient/conic-gradient)
+ [利用渐变及 CSS Property 实现 TV 噪音动画](https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise.md)
+ [使用 background-attachment 实现毛玻璃效果](https://csscoco.com/inspiration/#/./background/bg-attachment-frosted-glass.md)
+ [使用 background-attachment 实现滚动阴影](https://csscoco.com/inspiration/#/./background/bg-attachment-scroll-shadow.md)
+ [background-clip 实现流光文字效果](https://csscoco.com/inspiration/#/./background/bg-clip-text-shine.md)
+ [角向渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-effect.md)
+ [角向渐变实现光影 border 效果](https://csscoco.com/inspiration/#/./background/bg-conic-border-light-effect.md)
+ [角向渐变实现纯 CSS 圆环进度图](https://csscoco.com/inspiration/#/./background/bg-conic-circle-loading.md)
+ [角向渐变配合混合模式实现炫酷光影效果](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-animation.md)
+ [一行代码重复角向渐变代码实现酷炫图案](https://csscoco.com/inspiration/#/./background/bg-conic-gradient-repeating-pattern.md)
+ [线性渐变实现箭头符号](https://csscoco.com/inspiration/#/./background/bg-linear-arrow.md)
+ [线性渐变线条 border 效果](https://csscoco.com/inspiration/#/./background/bg-linear-border-effect.md)
+ [线性渐变实现类迷宫图形](https://csscoco.com/inspiration/#/./background/bg-linear-gradient-maze.md)
+ [线性渐变实现内切角](https://csscoco.com/inspiration/#/./background/bg-linear-inscribed.md)
+ [线性渐变模拟进度条运动](https://csscoco.com/inspiration/#/./background/bg-linear-progress-bar.md)
+ [线性渐变实现滚动进度条](https://csscoco.com/inspiration/#/./background/bg-linear-scroll-indicator.md)
+ [线性渐变背景实现条纹字](https://csscoco.com/inspiration/#/./background/bg-linear-stripe.md)
+ [线性渐变实现下划线](https://csscoco.com/inspiration/#/./background/bg-linear-underline.md)
+ [mask-image 实现图片变幻](https://csscoco.com/inspiration/#/./background/bg-mask-image.md)
+ [mask-image 实现文字的渐现](https://csscoco.com/inspiration/#/./background/bg-mask-text-show.md)
+ [mask-image 实现图片转场变换](https://csscoco.com/inspiration/#/./background/bg-mask-transition.md)
+ [使用多重背景单标签实现气泡按钮点击效果](https://csscoco.com/inspiration/#/./background/bg-radial-btn-click-bubble.md)
+ [径向渐变实现优惠券波浪造型](https://csscoco.com/inspiration/#/./background/bg-radial-coupon.md)
+ [径向渐变实现舞台灯光聚焦效果](https://csscoco.com/inspiration/#/./background/bg-radial-focus.md)
+ [渐变实现波浪边框](https://csscoco.com/inspiration/#/./background/bg-wave-border.md)
+ [渐变实现波浪下划线](https://csscoco.com/inspiration/#/./background/bg-wave-underline.md)
+ [渐变实现波浪效果/波浪进度框](https://csscoco.com/inspiration/#/./background/bg-wave.md)
+ [利用 CSS @property 探寻渐变的极限效果](https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md)
+ [多重径向渐变实现美妙的艺术背景](https://csscoco.com/inspiration/#/./background/repeating-radial-background-artistic-bg.md)
## 混合模式（mix-blend-mode/background-blend-mode)
+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](https://csscoco.com/inspiration/#/./blendmode/blend-color-set.md)
+ [使用 mix-blend-mode 实现抖音 LOGO](https://csscoco.com/inspiration/#/./blendmode/blend-douyin-logo.md)
+ [mix-blend-mode 实现 loading 效果](https://csscoco.com/inspiration/#/./blendmode/blend-loading.md)
+ [图片的类抖音 LOGO 晕眩效果](https://csscoco.com/inspiration/#/./blendmode/blend-mix-img.md)
+ [mix-blend-mode MIX](https://csscoco.com/inspiration/#/./blendmode/blend-mix.md)
+ [mix-blend-mode 实现颜色叠加旋转动画](https://csscoco.com/inspiration/#/./blendmode/blend-rotate.md)
+ [类抖音 LOGO 文字故障效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-glitch.md)
+ [使用 mix-blend-mode 实现光影文字效果](https://csscoco.com/inspiration/#/./blendmode/blend-text-shine.md)
+ [CSS WAVE MOVE(惊艳的水波效果)](https://csscoco.com/inspiration/#/./blendmode/blend-water-wave.md)
+ [mix-blend-mode 叠加多重渐变背景](https://csscoco.com/inspiration/#/./blendmode/mix-multi-graidient-bg.md)
+ [使用混合模式叠加实现文字波浪效果](https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect.md)
## 3D
+ [3D 球动画](https://csscoco.com/inspiration/#/./3d/3d-ball.md)
+ [3D 数字计数动画](https://csscoco.com/inspiration/#/./3d/3d-count-number.md)
+ [3D 宇宙时空穿梭效果](https://csscoco.com/inspiration/#/./3d/3d-css-galaxy-shuttle.md)
+ [3D 立方体进度条](https://csscoco.com/inspiration/#/./3d/3d-cuber-progress-bar.md)
+ [3D 立方体滚动 404 效果](https://csscoco.com/inspiration/#/./3d/3d-cuber-roll-404.md)
+ [3D 光影变换文字效果](https://csscoco.com/inspiration/#/./3d/3d-glowing-rotate-text.md)
+ [3D 无限延伸视角动画](https://csscoco.com/inspiration/#/./3d/3d-infinite-maze.md)
+ [3D 线条动画](https://csscoco.com/inspiration/#/./3d/3d-line.md)
+ [3D 迷宫线条特效](https://csscoco.com/inspiration/#/./3d/3d-maze.md)
+ [3D 绳动画](https://csscoco.com/inspiration/#/./3d/3d-rope-swing.md)
+ [3D 螺旋数字动画](https://csscoco.com/inspiration/#/./3d/3d-spiral-number.md)
+ [3D 文字出场动画](https://csscoco.com/inspiration/#/./3d/3d-text-debut.md)
+ [借助 translate3d\perspective 实现 3D 视差效果](https://csscoco.com/inspiration/#/./3d/parallax-3d-1.md)
+ [借助 translate3d\perspective 实现 3D 视差效果2](https://csscoco.com/inspiration/#/./3d/parallax-3d-2.md)
+ [使用 translateZ 实现滚动视差](https://csscoco.com/inspiration/#/./3d/parallax-3d-translate.md)
## 动画/过渡(transition/animation)
+ [借助transition-delay实现按钮border动画效果](https://csscoco.com/inspiration/#/./animation/animation-button-border.md)
+ [CSS实现曲线运动](https://csscoco.com/inspiration/#/./animation/animation-curve.md)
+ [利用 animation-delay 实现文字渐现效果](https://csscoco.com/inspiration/#/./animation/animation-delay-control-text-effect.md)
+ [利用动画延迟实现波浪动画](https://csscoco.com/inspiration/#/./animation/animation-delay-wavy.md)
+ [scale 配合 transfrom-origin 精准控制动画方向](https://csscoco.com/inspiration/#/./animation/animation-direction.md)
+ [CSS 巧妙控制动画行进](https://csscoco.com/inspiration/#/./animation/animation-play-state.md)
+ [正负旋转相消动画](https://csscoco.com/inspiration/#/./animation/animation-rotate.md)
## clip-path
+ [使用 clip-path 和 border-image 实现圆角渐变边框](https://csscoco.com/inspiration/#/./clippath/clippath-border-image.md)
+ [clip-path 实现边框线条动画 2](https://csscoco.com/inspiration/#/./clippath/clippath-border-line-radius.md)
+ [clip-path 实现边框线条动画](https://csscoco.com/inspiration/#/./clippath/clippath-border-line.md)
+ [clip-path 实现图片的故障艺术风格动画](https://csscoco.com/inspiration/#/./clippath/clippath-img-glitch.md)
+ [clip-path 实现文字断裂效果](https://csscoco.com/inspiration/#/./clippath/clippath-word-crack.md)
## 文本类
+ [使用text-decoration实现波浪效果](https://csscoco.com/inspiration/#/./text/text-underline-wave.md)
## 综合
+ [retina屏下的1px线的实现](https://csscoco.com/inspiration/#/./others/1px-line.md)
+ [fieldset 与 legend 实现边框嵌套文字](https://csscoco.com/inspiration/#/./others/border-inset-text.md)
+ [利用 resize 实现图片切换预览功能](https://csscoco.com/inspiration/#/./others/css-resize-switch-picture.md)
+ [暗黑字符雨动画](https://csscoco.com/inspiration/#/./others/digital-char-rain-animation.md)
+ [chrome Tab 分栏实现](https://csscoco.com/inspiration/#/./others/others-chrome-tab.md)
+ [等角螺线](https://csscoco.com/inspiration/#/./others/others-equiangular-spiral.md)
+ [华为充电动画](https://csscoco.com/inspiration/#/./others/others-huawei-charging.md)
+ [夜晚居室图](https://csscoco.com/inspiration/#/./others/others-night.md)
+ [纯CSS实现360°饼图](https://csscoco.com/inspiration/#/./others/others-pie.md)
+ [PURE CSS 实现鼠标跟随2](https://csscoco.com/inspiration/#/./others/pointer-follow-2.md)
+ [PURE CSS 实现鼠标跟随3](https://csscoco.com/inspiration/#/./others/pointer-follow-3.md)
+ [PURE CSS 实现鼠标跟随](https://csscoco.com/inspiration/#/./others/pointer-follow.md)
+ [利用 box-reflect 实现艺术图形](https://csscoco.com/inspiration/#/./others/reflect-artist.md)
+ [利用 box-reflect 实现光影按钮](https://csscoco.com/inspiration/#/./others/reflect-btn-effect.md)
+ [利用 box-reflect 实现 3D 照片墙倒影效果](https://csscoco.com/inspiration/#/./others/reflect-text-effect.md)
+ [CSS文字分裂移动特效](https://csscoco.com/inspiration/#/./others/word-break-move.md)
+ [CSS文字分裂特效](https://csscoco.com/inspiration/#/./others/word-break.md)
+ [CSS文字故障效果](https://csscoco.com/inspiration/#/./others/word-glitch.md)
## CSS-Doodle
+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-clippath.md)
+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern-2.md)
+ [CSS-Doodle 利用不同图形线条实现图案艺术](https://csscoco.com/inspiration/#/./cssdoodle/bg-artist-pattern.md)
+ [CSS-Doodle background + mask 实现万花筒效果](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-composite.md)
+ [CSS-Doodle background + mask 实现条纹艺术背景](https://csscoco.com/inspiration/#/./cssdoodle/bg-mask-mix.md)
+ [CSS-Doodle fish 🐟 & seaweed 🍀](https://csscoco.com/inspiration/#/./cssdoodle/fish-seaweed.md)
+ [CSS-Doodle spotlight🎆](https://csscoco.com/inspiration/#/./cssdoodle/spotlight.md)
+ [夏日城市夕阳图🌇](https://csscoco.com/inspiration/#/./cssdoodle/sunset.md)
## svg
+ [支付宝AR扫福动画](https://csscoco.com/inspiration/#/./svg/alipay-ar-scan.md)
+ [SVG绘制弧形文字](https://csscoco.com/inspiration/#/./svg/svg-arc-word.md)
+ [SVG 按钮 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-btn-hover.md)
+ [SVG 配合 drop-shadow 实现线条光影效果](https://csscoco.com/inspiration/#/./svg/svg-dropshadow-line-neon-effect.md)
+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](https://csscoco.com/inspiration/#/./svg/svg-feTurbulence-harmony-logo.md)
+ [SVG feTurbulence 滤镜实现故障按钮点击效果](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-btn-glitch.md)
+ [SVG feTurbulence 滤镜实现云彩效果 ](https://csscoco.com/inspiration/#/./svg/svg-feturbulence-clouds.md)
+ [SVG 文字 hover 线条动画 2](https://csscoco.com/inspiration/#/./svg/svg-line-text-2.md)
+ [SVG 文字 hover 线条动画](https://csscoco.com/inspiration/#/./svg/svg-line-text.md)
================================================
FILE: _sidebar.md
================================================
# CSS-Inspiration
+ [引言](./init.md)
## 布局（Layout）
+ [实现水平垂直居中最便捷的方法](./layout/best-way-to-center-element.md)
+ [双飞翼布局](./layout/double-wing-layout.md)
+ [grid 布局配合 clip-path 实现 GTA5 封面](./layout/grid-clip-path-gta5-poster.md)
+ [flex 实现圣杯布局](./layout/holy-grail-layout-flex.md)
+ [圣杯布局](./layout/holy-grail-layout.md)
+ [CSS实现瀑布流布局（column-count）](./layout/masonry-layout-colum.md)
+ [CSS 实现瀑布流布局（display: flex）](./layout/masonry-layout-flex.md)
+ [CSS实现瀑布流布局（display: grid）](./layout/masonry-layout-grid.md)
+ [6种实现多列等高的方法](./layout/multi-column-contour.md)
+ [多方案实现跨行或跨列布局](./layout/multi-row-or-column.md)
+ [多种方案实现单列等宽，其他多列自适应均匀布局](./layout/single-column-isometric.md)
+ [使用 margin auto 实现 flex 下的 align-self: flex-end](./layout/use-margin-auto-to-simulate-align-self.md)
+ [使用 margin auto 实现 flex 下的 justify-content: space-between](./layout/use-margin-auto-to-simulate-space-between.md)
## 阴影(box-shadow、drop-shadow)
+ [Box-shadow实现圆环进度条动画](./shadow/circle-loading.md)
+ [使用box-shadow/渐变实现内切角](./shadow/inscribed-angle.md)
+ [Neon Effect 3D TEXT](./shadow/neon-effect-3d-text.md)
+ [box-shadow实现霓虹氖灯文字效果](./shadow/neon-shadow-light.md)
+ [使用 box-shadow 实现半透明遮罩](./shadow/opacity-wrap.md)
+ [线性渐变模拟长阴影](./shadow/projection-long-shadow.md)
+ [单侧投影](./shadow/projection-one-sided-shadow.md)
+ [立体投影](./shadow/projection-solid-shadow.md)
+ [线性渐变配合阴影实现条纹立体阴影条纹字](./shadow/projection-word-solid-shadow-ii.md)
+ [立体文字阴影](./shadow/projection-word-solid-shadow.md)
+ [浮雕风格按钮](./shadow/relief-style-btn.md)
+ [box-shadow实现背景动画 2](./shadow/shadow-ani-ii.md)
+ [box-shadow实现背景动画 ](./shadow/shadow-ani.md)
+ [单标签实现抖音LOGO](./shadow/single-div-douyin-logo.md)
+ [单标签实现叉子图形](./shadow/single-div-fork.md)
+ [单标签借助 inset shadow 实现IE LOGO](./shadow/single-div-ie-logo.md)
## 伪类/伪元素
+ [伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-hover.md)
+ [伪元素 target 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control-target.md)
+ [伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放](./pesudo/pesudo-animation-control.md)
+ [伪元素实现边界智能判断移动](./pesudo/pesudo-boundary-judge.md)
+ [伪元素+border实现气泡对话框](./pesudo/pesudo-bubble.md)
+ [使用 checked 伪类实现纯 CSS Tab 切换](./pesudo/pesudo-focus-checked.md)
+ [使用 target 伪类实现纯 CSS Tab 切换](./pesudo/pesudo-focus-target.md)
+ [placeholder-shown 配合 focus-within 实现 input 输入交互](./pesudo/pesudo-focus-within-placeholder-shown.md)
+ [focus-within switch tab](./pesudo/pesudo-focus-within.md)
+ [伪元素 focus-within 纯 CSS 方式实现掘金登陆特效](./pesudo/pesudo-juejin.md)
+ [伪元素实现打点 loading 效果](./pesudo/pesudo-loading-content.md)
+ [伪元素遮罩实现线条 loading 效果](./pesudo/pesudo-loading-line.md)
+ [使用:not()伪类控制特殊边框样式](./pesudo/pesudo-not-2.md)
+ [使用:not()伪类实现弹窗背景元素模糊](./pesudo/pesudo-not.md)
## 滤镜(fliter)
+ [小球穿梭放大loading动画](./filter/filter-ball-loading.md)
+ [小球穿梭效果](./filter/filter-ball-through.md)
+ [使用 filter:blur | filter:constrast 生成特殊融合效果](./filter/filter-blur-constrast.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果2](./filter/filter-fire-2.md)
+ [使用 filter:blur | filter:constrast 生成火焰效果](./filter/filter-fire.md)
+ [单标签纯CSS实现幽灵动画](./filter/filter-ghost.md)
+ [使用 hue-rotate 实现渐变背景动画](./filter/filter-hue-rotate-color.md)
+ [滤镜及混合模式混搭特效](./filter/filter-mix.md)
+ [使用 drop-shadow 配合 clip-path 生成规则阴影](./filter/filter-polygon-shadow.md)
+ [使用 filter:blur 生成彩色阴影](./filter/filter-shadow.md)
+ [单标签实现滴水效果](./filter/filter-single-div-water-drop.md)
+ [利用 filter:blur 增强文字的 3D 效果](./filter/use-filter-blur-enhance-text-3d-effect.md)
## 边框
+ [活用 border-radius, 实现充电动画](./border/border-chargin.md)
+ [利用 border-image 实现动态边框](./border/border-image-animate.md)
+ [活用 border-radius, 单标签线条动画](./border/border-line-animation.md)
+ [使用 border-radius 的变化模拟绳子下坠](./border/border-line-drop-animation.md)
+ [border-radius变换实现loading效果](./border/border-loading.md)
+ [活用 outline 巧妙实现加号符号](./border/border-outline-symbol-add.md)
+ [巧用 overflow 及实现边框线条动画](./border/border-overflow-btn.md)
+ [border-color 变换实现文字输入效果](./border/border-typing.md)
+ [活用 border-radius, 实现波浪百分比图](./border/border-wave-percent.md)
+ [活用 border-radius, 实现波浪动画](./border/border-wave.md)
## 背景/渐变(linear-gradient/radial-gradient/conic-gradient)
+ [利用渐变及 CSS Property 实现 TV 噪音动画](./background/background-css-property-tv-noise.md)
+ [使用 background-attachment 实现毛玻璃效果](./background/bg-attachment-frosted-glass.md)
+ [使用 background-attachment 实现滚动阴影](./background/bg-attachment-scroll-shadow.md)
+ [background-clip 实现流光文字效果](./background/bg-clip-text-shine.md)
+ [角向渐变线条 border 效果](./background/bg-conic-border-effect.md)
+ [角向渐变实现光影 border 效果](./background/bg-conic-border-light-effect.md)
+ [角向渐变实现纯 CSS 圆环进度图](./background/bg-conic-circle-loading.md)
+ [角向渐变配合混合模式实现炫酷光影效果](./background/bg-conic-gradient-animation.md)
+ [一行代码重复角向渐变代码实现酷炫图案](./background/bg-conic-gradient-repeating-pattern.md)
+ [线性渐变实现箭头符号](./background/bg-linear-arrow.md)
+ [线性渐变线条 border 效果](./background/bg-linear-border-effect.md)
+ [线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md)
+ [线性渐变实现内切角](./background/bg-linear-inscribed.md)
+ [线性渐变模拟进度条运动](./background/bg-linear-progress-bar.md)
+ [线性渐变实现滚动进度条](./background/bg-linear-scroll-indicator.md)
+ [线性渐变背景实现条纹字](./background/bg-linear-stripe.md)
+ [线性渐变实现下划线](./background/bg-linear-underline.md)
+ [mask-image 实现图片变幻](./background/bg-mask-image.md)
+ [mask-image 实现文字的渐现](./background/bg-mask-text-show.md)
+ [mask-image 实现图片转场变换](./background/bg-mask-transition.md)
+ [使用多重背景单标签实现气泡按钮点击效果](./background/bg-radial-btn-click-bubble.md)
+ [径向渐变实现优惠券波浪造型](./background/bg-radial-coupon.md)
+ [径向渐变实现舞台灯光聚焦效果](./background/bg-radial-focus.md)
+ [渐变实现波浪边框](./background/bg-wave-border.md)
+ [渐变实现波浪下划线](./background/bg-wave-underline.md)
+ [渐变实现波浪效果/波浪进度框](./background/bg-wave.md)
+ [利用 CSS @property 探寻渐变的极限效果](./background/css-property-variable-bg-change-animation.md)
+ [多重径向渐变实现美妙的艺术背景](./background/repeating-radial-background-artistic-bg.md)
## 混合模式（mix-blend-mode/background-blend-mode)
+ [使用 mix-blend-mode 实现图片任意颜色赋值技术](./blendmode/blend-color-set.md)
+ [使用 mix-blend-mode 实现抖音 LOGO](./blendmode/blend-douyin-logo.md)
+ [mix-blend-mode 实现 loading 效果](./blendmode/blend-loading.md)
+ [图片的类抖音 LOGO 晕眩效果](./blendmode/blend-mix-img.md)
+ [mix-blend-mode MIX](./blendmode/blend-mix.md)
+ [mix-blend-mode 实现颜色叠加旋转动画](./blendmode/blend-rotate.md)
+ [类抖音 LOGO 文字故障效果](./blendmode/blend-text-glitch.md)
+ [使用 mix-blend-mode 实现光影文字效果](./blendmode/blend-text-shine.md)
+ [CSS WAVE MOVE(惊艳的水波效果)](./blendmode/blend-water-wave.md)
+ [mix-blend-mode 叠加多重渐变背景](./blendmode/mix-multi-graidient-bg.md)
+ [使用混合模式叠加实现文字波浪效果](./blendmode/mixblend-text-wave-effect.md)
## 3D
+ [3D 球动画](./3d/3d-ball.md)
+ [3D 数字计数动画](./3d/3d-count-number.md)
+ [3D 宇宙时空穿梭效果](./3d/3d-css-galaxy-shuttle.md)
+ [3D 立方体进度条](./3d/3d-cuber-progress-bar.md)
+ [3D 立方体滚动 404 效果](./3d/3d-cuber-roll-404.md)
+ [3D 光影变换文字效果](./3d/3d-glowing-rotate-text.md)
+ [3D 无限延伸视角动画](./3d/3d-infinite-maze.md)
+ [3D 线条动画](./3d/3d-line.md)
+ [3D 迷宫线条特效](./3d/3d-maze.md)
+ [3D 绳动画](./3d/3d-rope-swing.md)
+ [3D 螺旋数字动画](./3d/3d-spiral-number.md)
+ [3D 文字出场动画](./3d/3d-text-debut.md)
+ [借助 translate3d\perspective 实现 3D 视差效果](./3d/parallax-3d-1.md)
+ [借助 translate3d\perspective 实现 3D 视差效果2](./3d/parallax-3d-2.md)
+ [使用 translateZ 实现滚动视差](./3d/parallax-3d-translate.md)
## 动画/过渡(transition/animation)
+ [借助transition-delay实现按钮border动画效果](./animation/animation-button-border.md)
+ [CSS实现曲线运动](./animation/animation-curve.md)
+ [利用 animation-delay 实现文字渐现效果](./animation/animation-delay-control-text-effect.md)
+ [利用动画延迟实现波浪动画](./animation/animation-delay-wavy.md)
+ [scale 配合 transfrom-origin 精准控制动画方向](./animation/animation-direction.md)
+ [CSS 巧妙控制动画行进](./animation/animation-play-state.md)
+ [正负旋转相消动画](./animation/animation-rotate.md)
## clip-path
+ [使用 clip-path 和 border-image 实现圆角渐变边框](./clippath/clippath-border-image.md)
+ [clip-path 实现边框线条动画 2](./clippath/clippath-border-line-radius.md)
+ [clip-path 实现边框线条动画](./clippath/clippath-border-line.md)
+ [clip-path 实现图片的故障艺术风格动画](./clippath/clippath-img-glitch.md)
+ [clip-path 实现文字断裂效果](./clippath/clippath-word-crack.md)
## 文本类
+ [使用text-decoration实现波浪效果](./text/text-underline-wave.md)
## 综合
+ [retina屏下的1px线的实现](./others/1px-line.md)
+ [fieldset 与 legend 实现边框嵌套文字](./others/border-inset-text.md)
+ [利用 resize 实现图片切换预览功能](./others/css-resize-switch-picture.md)
+ [暗黑字符雨动画](./others/digital-char-rain-animation.md)
+ [chrome Tab 分栏实现](./others/others-chrome-tab.md)
+ [等角螺线](./others/others-equiangular-spiral.md)
+ [华为充电动画](./others/others-huawei-charging.md)
+ [夜晚居室图](./others/others-night.md)
+ [纯CSS实现360°饼图](./others/others-pie.md)
+ [PURE CSS 实现鼠标跟随2](./others/pointer-follow-2.md)
+ [PURE CSS 实现鼠标跟随3](./others/pointer-follow-3.md)
+ [PURE CSS 实现鼠标跟随](./others/pointer-follow.md)
+ [利用 box-reflect 实现艺术图形](./others/reflect-artist.md)
+ [利用 box-reflect 实现光影按钮](./others/reflect-btn-effect.md)
+ [利用 box-reflect 实现 3D 照片墙倒影效果](./others/reflect-text-effect.md)
+ [CSS文字分裂移动特效](./others/word-break-move.md)
+ [CSS文字分裂特效](./others/word-break.md)
+ [CSS文字故障效果](./others/word-glitch.md)
## CSS-Doodle
+ [CSS-Doodle clip-path & drop-shadow 实现图案艺术](./cssdoodle/bg-artist-clippath.md)
+ [CSS-Doodle 利用不同图形线条实现图案艺术 2](./cssdoodle/bg-artist-pattern-2.md)
+ [CSS-Doodle 利用不同图形线条实现图案艺术](./cssdoodle/bg-artist-pattern.md)
+ [CSS-Doodle background + mask 实现万花筒效果](./cssdoodle/bg-mask-composite.md)
+ [CSS-Doodle background + mask 实现条纹艺术背景](./cssdoodle/bg-mask-mix.md)
+ [CSS-Doodle fish 🐟 & seaweed 🍀](./cssdoodle/fish-seaweed.md)
+ [CSS-Doodle spotlight🎆](./cssdoodle/spotlight.md)
+ [夏日城市夕阳图🌇](./cssdoodle/sunset.md)
## svg
+ [支付宝AR扫福动画](./svg/alipay-ar-scan.md)
+ [SVG绘制弧形文字](./svg/svg-arc-word.md)
+ [SVG 按钮 hover 线条动画](./svg/svg-btn-hover.md)
+ [SVG 配合 drop-shadow 实现线条光影效果](./svg/svg-dropshadow-line-neon-effect.md)
+ [利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO](./svg/svg-feTurbulence-harmony-logo.md)
+ [SVG feTurbulence 滤镜实现故障按钮点击效果](./svg/svg-feturbulence-btn-glitch.md)
+ [SVG feTurbulence 滤镜实现云彩效果 ](./svg/svg-feturbulence-clouds.md)
+ [SVG 文字 hover 线条动画 2](./svg/svg-line-text-2.md)
+ [SVG 文字 hover 线条动画](./svg/svg-line-text.md)
================================================
FILE: animation/animation-button-border.md
================================================
## 借助transition-delay实现按钮border动画效果
借助 `transition-delay` 实现按钮 border hover 时的动画效果。
### 关键点
+ 给容器每一边的 border 合理设置 `transition-delay`，可以延缓动画的发生，再连贯的拼凑在一起实现一些效果
HTML：
```html
<div class="both">Both</div>
<div class="rectangle">Rectangle</div>
<div class="circle">Circle</div>
```
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` 可以对代码进行编辑）：
<iframe height='450' scrolling='no' title='借助transition-delay实现按钮border动画效果' src='//codepen.io/Chokcoco/embed/GwKOem/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/GwKOem/'>借助transition-delay实现按钮border动画效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: animation/animation-curve.md
================================================
## CSS实现曲线运动
CSS实现曲线运动。
HTML：
```html
<div class="g-container">
<div class="g-ball"></div>
</div>
```
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` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='CSS实现曲线运动' src='//codepen.io/Chokcoco/embed/yRqrOL/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/yRqrOL/'>CSS实现曲线运动</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: animation/animation-delay-control-text-effect.md
================================================
## 利用 animation-delay 实现文字渐现效果
利用 animation-delay 实现文字渐现效果
### 关键点
1. hover 状态下和非 hover 状态下的 `transition-duration` 是不一样的，是因为取消 hover 过程中，动画消失过程的时间通常是要求更短的；
2. 借助了 SASS 的循环 `@for $i from 1 to 21 {}` 递增给每个 `span` 和它的伪元素添加了递增的 `transition-delay`；
### 线性渐变
HTML：
```HTML
<div class="button">Button</div>
<div class="g-wrap"></div>
<p><span data-text="Lorem">Lorem</span> <span data-text="ipsum">ipsum</span> <span data-text="dolor">dolor</span> <span data-text="sit">sit</span> <span data-text="amet">amet</span> <span data-text="consectetur">consectetur</span> <span data-text="adipisicing">adipisicing</span> <span data-text="elit.">elit.</span> <span data-text="Mollitia">Mollitia</span> <span data-text="nostrum">nostrum</span> <span data-text="placeat">placeat</span> <span data-text="consequatur">consequatur</span> <span data-text="deserunt">deserunt</span> <span data-text="velit">velit</span> <span data-text="ducimus">ducimus</span> <span data-text="possimus">possimus</span> <span data-text="commodi">commodi</span> <span data-text="temporibus">temporibus</span> <span data-text="debitis">debitis</span> <span data-text="quam.">quam.</span></p>
```
CSS：
```CSS
html,
body {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.button {
// position: fixed;
top: 0;
left: 0;
width: 120px;
height: 64px;
line-height: 64px;
text-align: center;
border: 1px solid #eee;
cursor: pointer;
transition: .3s all;
z-index: 1;
&:hover {
background: #eee;
}
}
.button:hover ~ .g-wrap {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .3s background linear;
background: rgba(0, 0, 0, .5);
// z-index: -1;
}
p {
position: relative;
margin: 50px auto;
width: 500px;
height: 250px;
font-size: 22px;
line-height: 1.5;
overflow: hidden;
z-index: 2;
}
p span {
position: relative;
display: inline-block;
opacity: 0;
transform: translateY(15px) translateZ(0);
transition-property: transform, opacity;
transition-duration: .3s, .2s;
transition-timing-function: cubic-bezier(.23,1,.32,1), linear;
}
.button:hover ~ p span {
opacity: 1;
color: #ddd;
transform: translateY(0) translateZ(0);
transition-property: transform, opacity;
transition-duration: 1s, .2s;
transition-timing-function: cubic-bezier(.23,1,.32,1), linear;
}
p span:after,
p span:before {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
z-index: 1;
transform: translateZ(0);
will-change: opacity;
}
// p span:before {
// color: #fff;
// transition: opacity .6s .2s;
// }
// .button:hover ~ p span:before {
// opacity: 0;
// transition: opacity .6s .3s;
// }
p span:after {
color: #e62541;
transition-property: opacity;
transition-duration: .1s;
transition-timing-function: cubic-bezier(.23,1,.32,1);
}
.button:hover ~ p span:after {
opacity: 0;
transition-property: opacity;
transition-duration: .4s;
transition-timing-function: cubic-bezier(.23,1,.32,1);
}
@for $i from 1 to 21 {
p span:nth-child(#{$i}) {
transition-delay: #{$i * 0.04}s;
&::after {
transition-delay: #{$i * 0.04 + 0.2}s;
}
}
}
```
效果如下（Hover 按钮触发效果）：
<iframe height="350" style="width: 100%;" scrolling="no" title="实现文字渐现效果" src="https://codepen.io/Chokcoco/embed/LYLLVGw?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/LYLLVGw">
实现文字渐现效果</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: animation/animation-delay-wavy.md
================================================
## 利用动画延迟实现波浪动画
利用动画延迟实现的波浪效果。
### 关键点
给每个子元素设定一个高度变化的动画，同时按顺序给每个元素设定一个不同时间的负延迟即可，就可以得到一个简单的波浪效果。
关于本效果的详情，你可以查看这篇文章：[一种巧妙的使用 CSS 制作波浪效果的思路](https://github.com/chokcoco/iCSS/issues/112)
HTML（使用了 Pug 模板引擎）：
```Pug
div.g-container
-for(var i=0; i<24; i++)
div.g-item
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #fff;
}
$count: 24;
$speed: 1s;
:root {
--angle: 15deg;
}
.g-container {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: flex-end;
border-radius: 50%;
border: 2px solid #000;
overflow: hidden;
flex-shrink: 0;
margin: auto;
}
.rect {
border-radius: 0;
}
.g-item {
--f: #{$speed / -24};
--h: 50px;
flex-grow: 1;
background-color: #000;
animation: heightChange $speed infinite ease-in-out alternate;
}
.g-container .g-item {
animation: heightChange $speed infinite ease-in-out alternate,
skewChange $speed infinite ease-in-out alternate;
}
@for $i from 0 to $count {
.g-container {
.g-item:nth-child(#{$i + 1}) {
animation-delay: calc(var(--f) * #{$i}),
calc(var(--f) * #{$i} - #{$speed / 2});
}
}
}
@keyframes heightChange {
from {
height: var(--h);
}
to {
height: calc(var(--h) + 30px);
}
}
@keyframes skewChange {
from {
transform: scale(1.2) translate3d(0, 10px, 0) skewY(calc(var(--angle) * 1));
}
to {
transform: scale(1.2) translate3d(0, 10px, 0) skewY(calc(var(--angle) * -1));
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="PureCSS Wave Effects" src="https://codepen.io/Chokcoco/embed/KKmJabd?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/KKmJabd">
PureCSS Wave Effects</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: animation/animation-direction.md
================================================
## scale 配合 transfrom-origin 精准控制动画方向
scale 配合 transfrom-origin 精准控制动画方向。
其中具体的一些细节，的可以看看我的这篇文章：
[妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/63)
HTML：
```HTML
<div>Hover Me</div>
```
SCSS：
```scss
div {
position: absolute;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
margin: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
transform: scaleX(0);
height: 2px;
background: deeppink;
z-index: -1;
transition: transform .5s;
transform-origin: 100% 0;
}
div:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}
```
效果如下：
<iframe height="300" style="width: 100%;" scrolling="no" title="transform-origin妙用" src="https://codepen.io/Chokcoco/embed/Bxyoyz?height=300&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/Bxyoyz'>transform-origin妙用</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
------
当然，其实这只是其中一种方案。
不使用 `transform-orign` + `scale` 也是可以实现的，直接使用定位的方案如下：
HTML：
```HTML
<div>Hover Me</div>
```
SCSS：
```scss
div {
position: relative;
width: 200px;
height: 60px;
margin: auto;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
}
div::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 2px;
background: deeppink;
transition: all .5s;
}
div:hover::before {
left: 0;
width: 200px;
}
```
<iframe height="320" style="width: 100%;" scrolling="no" title="定位控制动画方向" src="https://codepen.io/Chokcoco/embed/rNVBZMa?height=320&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/rNVBZMa'>定位控制动画方向</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: animation/animation-play-state.md
================================================
## CSS 巧妙控制动画行进
CSS 巧妙控制动画行进。
其中具体的一些细节，的可以看看我的这篇文章：
[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/63)
HTML：
```pug
// pug模板语言
div.g-container
div.g-btn
-for(var i=0; i<60; i++)
div.g-ball
```
SCSS：
```scss
.g-container {
width: 100%;
height: 100%;
overflow: hidden;
filter: contrast(10);
background: #000;
}
.g-btn {
position: relative;
width: 200px;
height: 200px;
margin: 130px auto;
cursor: pointer;
filter: blur(2px) contrast(10);
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #dc8165;
border-radius: 48% 45% 48% 46%;
animation: rotate 3s infinite linear;
z-index: 0;
}
}
.g-ball {
position: absolute;
top: 50px;
transform: translate(0, 0);
background: #fa8763;
border-radius: 50%;
z-index: -1;
}
@for $i from 0 to $count {
.g-ball:nth-child(#{$i}) {
$width: #{random(60)}px;
width: $width;
height: $width;
left: calc(#{(random(100))}px + 30px);
animation: movetop .6s linear #{random(2000)/1000}s infinite;
animation-play-state: running;
}
.g-btn:hover .g-ball:nth-child(#{$i}) {
animation-play-state: paused;
}
}
@keyframes movetop {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -180px);
opacity: .4;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height="480" style="width: 100%;" scrolling="no" title="css控制动画行进" src="https://codepen.io/Chokcoco/embed/ZPgxwy?height=480&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/ZPgxwy'>css控制动画行进</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: animation/animation-rotate.md
================================================
## 正负旋转相消动画
正负旋转相消动画。
### 关键点
利用了两个容器相向旋转，其中具体的一些细节，的可以看看我的这篇文章：
[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.com/coco1s/p/7443263.html)
HTML：
```html
<div class="reverseRotate">
<div class="rotate">
<div class="content">正负旋转相消3D动画</div>
</div>
</div>
```
SCSS：
```scss
div {
transform-style: preserve-3d;
perspective: 500px;
}
.reverseRotate {
margin: 20vh auto;
}
.rotate,
.reverseRotate {
width: 50vh;
height: 50vh;
}
.content {
width: 100%;
height: 100%;
line-height: 50vh;
text-align: center;
background-color: rgba(255, 100, 100, .8);
font-size: 5vh;
color: #fff;
box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
}
.rotate {
animation: rotate 5s linear infinite;
}
.reverseRotate {
animation: reverseRotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(40deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateZ(360deg);
}
}
@keyframes reverseRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="Css动画正负旋转相消" src="https://codepen.io/Chokcoco/embed/XaBJPy?height=350&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/XaBJPy'>Css动画正负旋转相消</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: assets/css/highlight.css
================================================
/*
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
*/
.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;
}
================================================
FILE: assets/css/index.css
================================================
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 {
max-width: 100%;
margin-top: 0;
margin-left: 50px;
margin-right: 70px;
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.gitalk-container {
width: unset !important;
padding: 0 100px 0 80px;
}
.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;
}
.markdown-section h2 {
padding-bottom: 12px;
margin-bottom: 12px;
}
.g-pv-container {
font-size: 12px;
color: #bbb;
}
.g-pv-container .g-time,
.g-pv-container .g-pv {
margin-right: 12px;
}
.g-btn-like-container {
position: fixed;
width: 48px;
height: 48px;
right: 24px;
bottom: 24px;
background: #fff;
box-shadow: 0 1px 2px 0 #00000030;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s;
z-index: 10;
}
.g-btn-like-container:hover {
box-shadow: 0 2px 4px 0 #00000050;
}
.g-btn-like {
position: absolute;
background-image: url('../images/like.png');
background-repeat: no-repeat;
/*background-size: 2900%;*/
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -47.5%);
overflow: hidden;
}
.is-liked {
background-position: -2800px 0;
}
.like-active {
animation-timing-function: steps(28);
animation-name: heart-burst;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes heart-burst {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
.sidebar-toggle::before {
content: "";
position: fixed;
background: #fff;
border-radius: 50%;
width: 100px;
height: 100px;
box-shadow: 0 0 4px 1px #ddd;
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
z-index: -1;
cursor: pointer;
transition: .5s all;
}
.sidebar-toggle-button span {
transition: .5s all;
opacity: 1;
transform: translate(0, 0) rotate(0);
}
body.sticky .sidebar-toggle {
width: 50px;
}
body.close .sidebar-toggle-button span:nth-child(1) {
transform: translate(0px, 9px) rotate(45deg);
background-color: #fff;
}
body.close .sidebar-toggle-button span:nth-child(3) {
transform: translate(0px, -3px) rotate(-45deg);
background-color: #fff;
}
body.close .sidebar-toggle-button span:nth-child(2) {
background-color: #fff;
opacity: 0;
}
body.close .sidebar-toggle::before {
background: #42b983;
}
body.close .sidebar-toggle:hover .sidebar-toggle-button {
opacity: .8;
}
@media screen and (max-width: 768px) {
.sidebar {
left: -360px;
}
body.close .sidebar {
transform: translateX(360px);
}
.markdown-section {
margin-left: 0;
margin-right: 0;
padding: 5px 12px 40px;
}
.gitalk-container.gitalk-container {
padding: 0 12px;
}
}
================================================
FILE: assets/css/prism-line-numbers.css
================================================
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;
}
================================================
FILE: assets/js/highlight.js
================================================
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;
================================================
FILE: assets/js/index.js
================================================
const gitalkConfig = {
clientID: '38238cb03b9966294d48',
clientSecret: '2550a359e8369c93d7dd1259f9db3984a117387f',
repo: 'CSS-Inspiration',
owner: 'chokcoco',
admin: ['chokcoco'],
distractionFreeMode: false,
language: "zh-CN",
proxy: 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'
}
window.$docsify = {
loadSidebar: true,
name: 'CSS Inspiration -- CSS灵感',
repo: 'https://github.com/chokcoco/CSS-Inspiration',
// 完整配置参数
search: {
maxAge: 86400000, // 过期时间，单位毫秒，默认一天
paths: "auto", // or 'auto'
placeholder: '搜索效果或CSS关键字，优惠券 或者 clip-path',
noData: 'No Results!',
// 搜索标题的最大程级, 1 - 6
depth: 2
},
plugins: [
function (hook, vm) {
hook.init(function() {
window.addEventListener('click', async (e) => {
const target = e.target;
const label = vm.route.path.split("/").pop().split('.')[0];
if (target.className.indexOf('g-btn-like') === -1 || target.className.indexOf('is-liked') !== -1) {
return;
}
target.setAttribute('class', 'g-btn-like like-active');
localStorage.setItem(`id_${label}`, true);
await addLike(label);
await insertPvAndLike(label);
}, true);
});
hook.doneEach(function () {
const label = vm.route.path.split("/").pop().split('.')[0];
gitalkRender(vm, label);
if (!label || label === 'init') {
return;
}
insertPvAndLike(label);
insertLikeDOM(label);
addPv(label);
});
}
]
}
async function insertPvAndLike(label) {
const id = md5(label);
const URL = '/getPageInfo';
await axios.get(URL, {
params: {
id
}
})
.then(function (res) {
const data = res.data;
if (!data.ret) {
const { likes = 0, pv = 0, ct = new Date().getTime() } = data.data;
insertPvDOM(pv, likes, ct);
}
})
.catch(function (error) {
console.log(error);
});
}
async function addPv(label) {
const id = md5(label);
const URL = '/getPageInfo/addpv';
return await axios.post(URL, {
id
})
.catch(function (error) {
console.log(error);
});
}
async function addLike(label) {
const id = md5(label);
const URL = '/getPageInfo/addlike';
return await axios.post(URL, {
id
})
.catch(function (error) {
console.log(error);
});
}
function insertPvDOM(pv, likes, ct) {
const el = document.querySelector('.g-pv-container');
if (el) {
el.remove();
}
let domObj, divEle;
domObj = Docsify.dom;
divEle = domObj.create("div");
divEle.className = "g-pv-container";
divEle.innerHTML = `<span class="g-time">创建于 ${format(ct)}</span><span class="g-pv">阅读 ${pv} 次</span><span class="g-likes">${likes} 人表示喜欢</span>`;
domObj.appendTo(document.querySelector('#main h2'), divEle);
}
function insertLikeDOM(label) {
const el = document.querySelector('.g-btn-like-container');
if (el) {
el.remove();
}
const isLiked = localStorage.getItem(`id_${label}`);
let domObj, divEle;
domObj = Docsify.dom;
divEle = domObj.create("div");
divEle.className = "g-btn-like-container";
divEle.innerHTML = `<div class='g-btn-like ${isLiked ? 'is-liked' : ''}'></div>`;
domObj.appendTo(document.querySelector('.content'), divEle);
}
function gitalkRender(vm, label) {
let domObj, main, divEle, gitalk;
domObj = Docsify.dom;
main = domObj.getNode("#main");
Array.apply(
null,
document.querySelectorAll("div.gitalk-container")
).forEach(function (ele) {
ele.remove();
});
divEle = domObj.create("div");
divEle.id = "gitalk-container-" + label;
divEle.className = "gitalk-container";
divEle.style = "width: " + main.clientWidth + "px; margin: 0 auto 20px;";
domObj.appendTo(domObj.find(".content"), divEle);
gitalk = new Gitalk(
Object.assign(gitalkConfig, { id: !label ? "home" : label })
);
gitalk.render("gitalk-container-" + label);
}
function format(date, unit) {
unit = unit || 'second';
if (!date) {
return '';
}
if (typeof date === 'string') return date;
if (typeof date === 'number') {
// 处理前后端标准时间戳相差 3 位的问题
if (date.length === 10) {
date *= 1000;
}
}
date = new Date(date);
const year = addLeadingZero(date.getFullYear());
const month = addLeadingZero(date.getMonth() + 1);
const day = addLeadingZero(date.getDate());
const hour = addLeadingZero(date.getHours());
const minute = addLeadingZero(date.getMinutes());
const second = addLeadingZero(date.getSeconds());
if (unit === 'year') return `${year}`;
if (unit === 'month') return `${year}-${month}`;
if (unit === 'day') return `${year}-${month}-${day}`;
if (unit === 'hour') return `${year}-${month}-${day} ${hour}`;
if (unit === 'minute') return `${year}-${month}-${day} ${hour}:${minute}`;
if (unit === 'second')
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
if (unit === 'hour2second') return `${hour}:${minute}:${second}`;
if (unit === 'reverseDay') return `${day} ${Months[+month - 1]} ${year}`;
}
const addLeadingZero = (t) => (t < 10 ? '0' : '') + t.toString();
================================================
FILE: assets/js/md5.js
================================================
!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<<t|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<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22,-1044525330),v=o(v,m=o(m,l=o(l,g,v,m,n[e+4],7,-176418897),g,v,n[e+5],12,1200080426),l,g,n[e+6],17,-1473231341),m,l,n[e+7],22,-45705983),v=o(v,m=o(m,l=o(l,g,v,m,n[e+8],7,1770035416),g,v,n[e+9],12,-1958414417),l,g,n[e+10],17,-42063),m,l,n[e+11],22,-1990404162),v=o(v,m=o(m,l=o(l,g,v,m,n[e+12],7,1804603682),g,v,n[e+13],12,-40341101),l,g,n[e+14],17,-1502002290),m,l,n[e+15],22,1236535329),v=u(v,m=u(m,l=u(l,g,v,m,n[e+1],5,-165796510),g,v,n[e+6],9,-1069501632),l,g,n[e+11],14,643717713),m,l,n[e],20,-373897302),v=u(v,m=u(m,l=u(l,g,v,m,n[e+5],5,-701558691),g,v,n[e+10],9,38016083),l,g,n[e+15],14,-660478335),m,l,n[e+4],20,-405537848),v=u(v,m=u(m,l=u(l,g,v,m,n[e+9],5,568446438),g,v,n[e+14],9,-1019803690),l,g,n[e+3],14,-187363961),m,l,n[e+8],20,1163531501),v=u(v,m=u(m,l=u(l,g,v,m,n[e+13],5,-1444681467),g,v,n[e+2],9,-51403784),l,g,n[e+7],14,1735328473),m,l,n[e+12],20,-1926607734),v=c(v,m=c(m,l=c(l,g,v,m,n[e+5],4,-378558),g,v,n[e+8],11,-2022574463),l,g,n[e+11],16,1839030562),m,l,n[e+14],23,-35309556),v=c(v,m=c(m,l=c(l,g,v,m,n[e+1],4,-1530992060),g,v,n[e+4],11,1272893353),l,g,n[e+7],16,-155497632),m,l,n[e+10],23,-1094730640),v=c(v,m=c(m,l=c(l,g,v,m,n[e+13],4,681279174),g,v,n[e],11,-358537222),l,g,n[e+3],16,-722521979),m,l,n[e+6],23,76029189),v=c(v,m=c(m,l=c(l,g,v,m,n[e+9],4,-640364487),g,v,n[e+12],11,-421815835),l,g,n[e+15],16,530742520),m,l,n[e+2],23,-995338651),v=f(v,m=f(m,l=f(l,g,v,m,n[e],6,-198630844),g,v,n[e+7],10,1126891415),l,g,n[e+14],15,-1416354905),m,l,n[e+5],21,-57434055),v=f(v,m=f(m,l=f(l,g,v,m,n[e+12],6,1700485571),g,v,n[e+3],10,-1894986606),l,g,n[e+10],15,-1051523),m,l,n[e+1],21,-2054922799),v=f(v,m=f(m,l=f(l,g,v,m,n[e+8],6,1873313359),g,v,n[e+15],10,-30611744),l,g,n[e+6],15,-1560198380),m,l,n[e+13],21,1309151649),v=f(v,m=f(m,l=f(l,g,v,m,n[e+4],6,-145523070),g,v,n[e+11],10,-1120210379),l,g,n[e+2],15,718787259),m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,d),m=t(m,h);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function h(n){return a(i(d(n),8*n.length))}function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>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<n.length;r+=1)t=n.charCodeAt(r),e+="0123456789abcdef".charAt(t>>>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);
//# sourceMappingURL=md5.min.js.map
================================================
FILE: assets/js/prism-line-number.js
================================================
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
/**
* Plugin name which is used as a class name for <pre> which is activating the plugin
* @type {String}
*/
var PLUGIN_NAME = 'line-numbers';
/**
* Regular expression used for determining line breaks
* @type {RegExp}
*/
var NEW_LINE_EXP = /\n(?!$)/g;
/**
* Resizes line numbers spans according to height of line of code
* @param {Element} element <pre> element
*/
var _resizeElement = function (element) {
var codeStyles = getStyles(element);
var whiteSpace = codeStyles['white-space'];
if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
var codeElement = element.querySelector('code');
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
var codeLines = codeElement.textContent.split(NEW_LINE_EXP);
if (!lineNumberSizer) {
lineNumberSizer = document.createElement('span');
lineNumberSizer.className = 'line-numbers-sizer';
codeElement.appendChild(lineNumberSizer);
}
lineNumberSizer.style.display = 'block';
codeLines.forEach(function (line, lineNumber) {
lineNumberSizer.textContent = line || '\n';
var lineSize = lineNumberSizer.getBoundingClientRect().height;
lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
});
lineNumberSizer.textContent = '';
lineNumberSizer.style.display = 'none';
}
};
/**
* Returns style declarations for the element
* @param {Element} element
*/
var getStyles = function (element) {
console.log(222);
if (!element) {
return null;
}
return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
};
window.addEventListener('resize', function () {
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);
});
Prism.hooks.add('complete', function (env) {
console.log(111);
if (!env.code) {
return;
}
// works only for <code> wrapped inside <pre> (not inline)
var pre = env.element.parentNode;
var clsReg = /\s*\bline-numbers\b\s*/;
if (
!pre || !/pre/i.test(pre.nodeName) ||
// Abort only if nor the <pre> nor the <code> have the class
(!clsReg.test(pre.className) && !clsReg.test(env.element.className))
) {
return;
}
if (env.element.querySelector('.line-numbers-rows')) {
// Abort if line numbers already exists
return;
}
if (clsReg.test(env.element.className)) {
// Remove the class 'line-numbers' from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class 'line-numbers' to the <pre>
pre.className += ' line-numbers';
}
var match = env.code.match(NEW_LINE_EXP);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;
var lines = new Array(linesNum + 1);
lines = lines.join('<span></span>');
lineNumbersWrapper = document.createElement('span');
lineNumbersWrapper.setAttribute('aria-hidden', 'true');
lineNumbersWrapper.className = 'line-numbers-rows';
lineNumbersWrapper.innerHTML = lines;
if (pre.hasAttribute('data-start')) {
pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
}
env.element.appendChild(lineNumbersWrapper);
_resizeElement(pre);
Prism.hooks.run('line-numbers', env);
});
Prism.hooks.add('line-numbers', function (env) {
env.plugins = env.plugins || {};
env.plugins.lineNumbers = true;
});
/**
* Global exports
*/
Prism.plugins.lineNumbers = {
/**
* Get node for provided line number
* @param {Element} element pre element
* @param {Number} number line number
* @return {Element|undefined}
*/
getLine: function (element, number) {
if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
return;
}
var lineNumberRows = element.querySelector('.line-numbers-rows');
var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);
if (number < lineNumberStart) {
number = lineNumberStart;
}
if (number > lineNumberEnd) {
number = lineNumberEnd;
}
var lineIndex = number - lineNumberStart;
return lineNumberRows.children[lineIndex];
}
};
}());
================================================
FILE: background/background-css-property-tv-noise.md
================================================
## 利用渐变及 CSS Property 实现 TV 噪音动画
利用渐变及 CSS Property 实现 TV 电视雪花屏的噪音动画。
### 关键点
CSS @property，它的出现，极大的增强的 CSS 的能力！
关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)
HTML：
```
<div></div>
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
}
@property --length {
syntax: '<length>';
inherits: false;
initial-value: 0.00085px;
}
div {
width: 240px;
height: 240px;
margin: auto;
}
div {
background-image: repeating-radial-gradient(
circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) var(--length)
);
animation: change 1s infinite alternate;
}
@keyframes change {
100% {
--length: 0.0009px;
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="PURE CSS TV NOISE EFFECT (Only Chrome 85+)" src="https://codepen.io/Chokcoco/embed/vYgrGEE?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/vYgrGEE">
PURE CSS TV NOISE EFFECT (Only Chrome 85+)</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: background/bg-attachment-frosted-glass.md
================================================
## 使用 background-attachment 实现毛玻璃效果
使用 background-attachment，filter: blur() 实现毛玻璃效果。
毛玻璃效果的重点在于，需要虚化的底图部分是会随页面 resize 变换而变换的。
`background-attachment:fixed` 则可以完美契合这一需求。
### 关键点
`background-attachment` 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。但是它本身很有意思。
`background-attachment`：如果指定了 `background-image` ，那么 `background-attachment` 决定背景是在视口中固定的还是随着包含它的区块滚动的。
### background-attachment: fixed
**fixed** 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
HTML：
```html
<div>
<p>使用 <br />background-attachment: fixed <br />filter: bulr() <br />实现毛玻璃效果</p>
</div>
```
SCSS：
```scss
$img: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
html,
body {
width: 100%;
height: 100%;
background-image: url($img);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top;
overflow: hidden;
}
div {
position: relative;
width: 30vw;
height: 40vh;
background: inherit;
margin: 50px auto;
padding: 5vmin;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, .5);
// transform: translate(-50%, -50%);
// left: 50%;
// top: 50%;
p {
position: relative;
color: #000;
z-index: 10;
font-size: 24px;
line-height: 1.5;
}
&::after {
position: absolute;
content: "";
background: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(10px);
z-index: 0;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='400' scrolling='no' title='使用background-attachment: fixed | filter: bulr() 实现毛玻璃效果' src='//codepen.io/Chokcoco/embed/OawrWM/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/OawrWM/'>使用background-attachment: fixed | filter: bulr() 实现毛玻璃效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-attachment-scroll-shadow.md
================================================
## 使用 background-attachment 实现滚动阴影
这里，我们借助 `background-attachment: srcoll` 和 `background-attachment: local` 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。
详见这篇文章：[使用纯 CSS 实现滚动阴影效果](https://juejin.cn/post/6913725602428600334)
HTML：
```html
<div class="g-table">
<table>
<thead>
<tr>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
</table>
<div class="g-scroll">
<table>
<tbody>
<tr>
<td>2021-01-01</td>
<td>XXXXX</td>
<td>DDDDD</td>
</tr>
</tbody>
</table>
</div>
</div>
```
SCSS：
```scss
.g-table {
margin: 50px auto;
width: 450px;
}
table {
position: relative;
width: 450px;
border: 1px solid #ccc;
text-align: center;
tbody {
border-collapse: separate;
height: 200px;
}
td, th {
width: 150px;
padding: 5px;
border: 1px solid #ccc;
}
}
.g-scroll {
top: -1px;
position: relative;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
background:
linear-gradient(#fff, transparent) top / 100% 100px,
radial-gradient(at 50% -15px, rgba(0, 0, 0, .8), transparent 70%) top / 100000% 12px;
background-repeat: no-repeat;
background-attachment: local, scroll;
}
```
效果如下（滚动表格即可看到效果）：
<iframe height="500" style="width: 100%;" scrolling="no" title="Pure CSS Table scroll shadow" src="https://codepen.io/Chokcoco/embed/abmqMJQ?height=500&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/abmqMJQ'>Pure CSS Table scroll shadow</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-clip-text-shine.md
================================================
## background-clip 实现流光文字效果
使用 `background-clip: text` 实现流光文字效果。
### 关键点
背景中有个属性为 background-clip， 其作用就是设置元素的背景（背景图片或颜色）的填充规则。
与 box-sizing 的取值非常类似，通常而言，它有 3 个取值，border-box，padding-box，content-box，后面规范新增了一个 background-clip。时至今日，部分浏览器仍需要添加前缀 webkit 进行使用 -webkit-background-clip。
使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
详细的可以看看这篇文章：[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)
HTML：
```html
<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>
```
SCSS：
```scss
html, body {
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse farthest-side at 40% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
display: flex;
}
p {
position: relative;
margin: auto;
font-size: 5rem;
word-spacing: 0.2em;
display: inline-block;
line-height: 1;
white-space: nowrap;
color: transparent;
background-color: #E8A95B;
background-clip: text;
}
p::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
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%);
background-clip: text;
background-size: 150% 100%;
background-repeat: no-repeat;
animation: shine 5s infinite linear;
}
@keyframes shine {
0% {
background-position: 50% 0;
}
100% {
background-position: -190% 0;
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="Shine Text" src="https://codepen.io/Chokcoco/embed/OJbEOmb?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/OJbEOmb'>Shine Text</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-conic-border-effect.md
================================================
## 角向渐变线条 border 效果
角向渐变实现线条 border 效果。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现线条 border 效果
HTML：
```html
<div></div>
```
SCSS：
```scss
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
div {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
&::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0 0;
background-image: conic-gradient(#399953, #399953);
animation: rotate 4s linear infinite;
}
&::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
animation: opacityChange 3s infinite alternate;
}
}
@keyframes opacityChange {
50% {
opacity:1;
}
100% {
opacity: .5;
}
}
```
效果如下：
<iframe height="450" style="width: 100%;" scrolling="no" title="Rotating border 2" src="https://codepen.io/Chokcoco/embed/zYKybmV?height=450&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/zYKybmV'>Rotating border 2</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-conic-border-light-effect.md
================================================
## 角向渐变实现光影 border 效果
角向渐变实现光影 border 效果。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现光影 border 效果
HTML：
```html
<div class="conic"></div>
<div class="conic conic-demo"></div>
```
SCSS：
```scss
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
*, *::before, *::after {
box-sizing: border-box;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.conic {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
margin: 20px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
&::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #1a232a;
background-repeat: no-repeat;
background-position: 0 0;
background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
animation: rotate 4s linear infinite;
}
&::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: #000;
border-radius: 5px;
}
}
.conic-demo::after {
animation: opacityChange 5s infinite linear;
}
@keyframes opacityChange {
50% {
opacity:.5;
}
100% {
opacity: 1;
}
}
```
效果如下：
<iframe height="500" style="width: 100%;" scrolling="no" title="Rotating border 3" src="https://codepen.io/Chokcoco/embed/dypaobm?height=500&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/dypaobm'>Rotating border 3</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-conic-circle-loading.md
================================================
## 角向渐变实现纯 CSS 圆环进度图
角向渐变实现纯 CSS 圆环进度图。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现拖尾的圆环进度条
HTML：
```html
<div class="g-container">
<div class="g-circle"></div>
</div>
```
SCSS：
```scss
body, html {
width: 100%;
height: 100%;
display: flex;
background: #333;
}
.g-container {
position: relative;
width: 200px;
height: 200px;
margin: auto;
border-radius: 50%;
box-sizing: border-box;
border: 6px solid #444;
}
.g-circle {
position: absolute;
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
border-radius: 50%;
background: conic-gradient(#fc0 0%, transparent 40%, transparent);
animation: rotate 3s ease-in-out infinite;
transition-origin: 50% 50%;
&::before {
content: "";
position: absolute;
top: 6px;
left: 6px;
bottom: 6px;
right: 6px;
background: #333;
border-radius: 50%;
// z-index: 1;
}
&::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
top: 0;
left: 50%;
transform: translate(-50%, -3px);
border-radius: 50%;
background: #fc0;
box-shadow: 0 0 4px 2px #fc0;
}
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
```
效果如下：
<iframe height="320" style="width: 100%;" scrolling="no" title="Pure CSS 圆环进度条" src="https://codepen.io/Chokcoco/embed/mdEKrrQ?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/mdEKrrQ'>Pure CSS 圆环进度条</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-conic-gradient-animation.md
================================================
## 角向渐变配合混合模式实现炫酷光影效果
角向渐变配合混合模式实现炫酷光影效果。
角向渐变，又叫角向渐变，属于正在路上的标准，具体的，可以看看我的这篇文章：
[神奇的 conic-gradient 角向渐变](https://www.cnblogs.com/coco1s/p/7079529.html)
HTML：
```html
<div></div>
```
SCSS：
```scss
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomConicGradient() {
$n: 16 + random(16);
$list: ();
@for $i from 0 to $n {
$list: $list, rgba(hsl(100, randomNum(250, 5, 10%), randomNum(1, 1, 1%)), randomNum(100, 0, .01));
}
@return conic-gradient($list, nth($list, 1));
}
div {
width: 100vw;
height: 100vh;
margin: 0;
background:
radial-gradient(hsl(9, randomNum(100, 75, 1%), randomNum(100, 75%, 1%)), black);
&:before, &:after {
position: absolute;
top: 50%; left: 50%;
margin: -100vmax;
width: 200vmax;
height: 200vmax;
opacity: .5;
mix-blend-mode: overlay;
animation: rotate randomNum(100, 25, .1s) ease-in-out infinite;
content: '';
}
&:before { background: randomConicGradient(); }
&:after {
background: randomConicGradient();
animation-duration: randomNum(100, 25, .1s);
animation-direction: reverse;
}
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
```
上面效果，使用了角向渐变 polyfill JS 库：
+ https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
+ https://leaverou.github.io/conic-gradient/conic-gradient.js
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height="350" style="width: 100%;" scrolling="no" title="animation conic-gradient" src="https://codepen.io/Chokcoco/embed/gRRdQq?height=350&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/gRRdQq'>animation conic-gradient</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-conic-gradient-repeating-pattern.md
================================================
## 一行代码重复角向渐变代码实现酷炫图案
一行代码重复角向渐变代码实现酷炫图案。
具体的，可以看看我的这篇文章：
[一行 CSS 代码的魅力](https://github.com/chokcoco/iCSS/issues/87)
SCSS：
```scss
html {
height: 100%;
background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="One Line CSS Pattern" src="https://codepen.io/Chokcoco/embed/ExgLxXL?height=400&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/ExgLxXL'>One Line CSS Pattern</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-arrow.md
================================================
## 线性渐变实现箭头符号
线性渐变实现箭头符号。
### 关键点
+ 利用多重线性渐变拼凑箭头形状
+ 恰当运用 `background-position`，`background-size`
HTML：
```html
<div class="arrow"></div>
```
SCSS：
```scss
.arrow{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 200px;
height: 40px;
text-align: center;
color: white;
font-size: 200%;
}
.arrow{
background:
linear-gradient(-135deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)
top right,
linear-gradient(-45deg, transparent 10%, #04e6fb 10%, #65ff9a 100%)
bottom right,
linear-gradient(-135deg, #04e6fb 0, #65ff9a 90%, transparent 90%)
top left,
linear-gradient(-45deg, #04e6fb 0, #65ff9a 90%, transparent 90%)
bottom left;
background-size: 90% 50%;
background-repeat: no-repeat;
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='265' scrolling='no' title='使用渐变实现箭头符号' src='//codepen.io/Chokcoco/embed/BGeJGm/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/BGeJGm/'>使用渐变实现箭头符号</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-border-effect.md
================================================
## 线性渐变线条 border 效果
线性渐变线条 border 效果。
### 关键点
+ 利用线性渐变 `conic-gradient` 与**遮罩**实现线条 border 效果
> 这里利用角向渐变也是可以的。
HTML：
```html
<div></div>
```
SCSS：
```scss
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
&::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
animation: rotate 4s linear infinite;
}
&::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
animation: opacityChange 3s infinite alternate;
}
}
@keyframes opacityChange {
50% {
opacity:1;
}
100% {
opacity: .5;
}
}
```
效果如下：
<iframe height="450" style="width: 100%;" scrolling="no" title="Rotating border" src="https://codepen.io/Chokcoco/embed/YzGdEMZ?height=450&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/YzGdEMZ'>Rotating border</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-gradient-maze.md
================================================
## 线性渐变实现类迷宫图形
使用线性渐变实现类迷宫图形。
随机的艺术。
HTML：
```pug
div.g-grid
- for(var i=0; i<400; i++)
div.g-box
```
SCSS：
```scss
$count: 400;
@function randomRotate() {
$r: random(100);
@if $r > 50 { @return 45 }
@if $r <= 50 { @return -45 }
}
.g-grid {
width: 100vmin;
height: 100vmin;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(20, 5%);
grid-template-rows: repeat(20, 5%);
}
@for $i from 1 to $count + 1 {
.g-box:nth-child(#{$i}) {
background: linear-gradient(#{randomRotate()}deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="CSS MAZE" src="https://codepen.io/Chokcoco/embed/zXYJaW?height=350&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/zXYJaW'>CSS MAZE</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-inscribed.md
================================================
## 线性渐变实现内切角
线性渐变实现内切角。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
<div class="notching"></div>
```
SCSS：
```scss
.notching{
width: 160px;
padding: 60px 20px;
}
.notching{
background:
linear-gradient(135deg, transparent 15px, deeppink 0)
top left,
linear-gradient(-135deg, transparent 15px, deeppink 0)
top right,
linear-gradient(-45deg, transparent 15px, deeppink 0)
bottom right,
linear-gradient(45deg, transparent 15px, deeppink 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='线性渐变实现内切角' src='//codepen.io/Chokcoco/embed/dQeWQK/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/dQeWQK/'>线性渐变实现内切角</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-progress-bar.md
================================================
## 线性渐变模拟进度条运动
使用线性渐变模拟进度条运动。
### 知识点
核心难点在于动画的首尾如何衔接上，需要自己尝试计算。
HTML：
```html
<div class="bar"></div>
<div class="bar overflow"></div>
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.bar {
position: relative;
width: 400px;
height: 30px;
margin: auto;
border-radius:20px;
// border: 1px solid #000;
background: #ffba01;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 400px;
height: 85px;
background: repeating-linear-gradient(45deg, #f06a0e, #f06a0e
10px, transparent 11px, transparent 19px, #f06a0e 20px);
background-position: 0 0;
background-repeat: no-repeat;
animation: move 1s linear infinite;
}
}
.overflow {
overflow: hidden;
}
@keyframes move {
from { background-position: 0 0; }
to { background-position: 0 -56px; }
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height="350" style="width: 100%;" scrolling="no" title="线性渐变模拟进度条" src="https://codepen.io/Chokcoco/embed/EzZwXg?height=350&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/EzZwXg'>线性渐变模拟进度条</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-scroll-indicator.md
================================================
## 线性渐变实现滚动进度条
使用线性渐变实现滚动进度条。
滚动下面的页面，你会看到顶部实现了进度条的效果，这里其实是个简单的利用了线性渐变的障眼法。
具体可以看看这篇文章：
[不可思议的纯 CSS 滚动进度条效果](https://github.com/chokcoco/iCSS/issues/43)
HTML：
```html
<h1>不可思议的纯 CSS 进度条效果</h1>
....
<p>OK，继续。这个效......</p>
```
SCSS：
```scss
body {
position: relative;
padding: 50px;
font-size: 24px;
line-height: 30px;
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
z-index: 1;
}
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
/**
* Unrelated css
*/
h1 {
font-size: 32px;
line-height: 60px;
}
ul {
margin-top: 30px;
}
p {
font-size: 24px;
line-height: 30px;
margin-top: 30px;
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="使用线性渐变实现滚动进度条" src="https://codepen.io/Chokcoco/embed/KbBXQM?height=350&theme-id=default&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/KbBXQM'>使用线性渐变实现滚动进度条</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-stripe.md
================================================
## 线性渐变背景实现条纹字
利用线性渐变背景实现条纹字。
### 关键点
重点在于渐变色白色与透明色的重复渐变。
结合其他 CSS 属性有很多作用，譬如立体条纹字。
HTML：
```html
<p>所有字体都是条纹字</p>
<p>利用线性渐变背景实现</p>
<p>重点在于渐变色白色与透明色的重复渐变</p>
<p>结合其他CSS属性有很多作用，譬如立体条纹字</p>
```
SCSS：
```scss
p {
position: relative;
text-align: center;
font-size: 15vmin;
line-height: 25vmin;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
background-size: 6px 6px;
z-index: 1;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='线性渐变实现条纹字' src='//codepen.io/Chokcoco/embed/YJgJjQ/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/YJgJjQ/'>线性渐变实现条纹字</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-linear-underline.md
================================================
## 线性渐变实现下划线
利用线性渐变实现下划线。与传统下划线相比，渐变实现的下划线有更多的可操控性。
+ 可控下划线距离底部的距离
+ 可控下划线的粗细
+ 可控下划线的颜色
+ 可添加动画&渐变
HTML：
```html
<hgroup class="underline">
<h1 class="underline1-ajkps">.underline1-ajkpys</h1>
<h1 class="underline2-ajkps">.underline2-ajkpys</h1>
<h1 class="underline3-ajkps">.underline3-ajkpys</h1>
</hgroup>
```
SCSS：
```scss
.underline {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
text-align: center;
color: white;
font-size: 200%;
background: #00aabb;
border-radius: 0.5em;
}
.underline1-ajkps,
.underline2-ajkps,
.underline3-ajkps {
height: 100px;
cursor: pointer;
position: absolute;
left: 16%;
text-shadow: 0.1em 0 #00aabb, -0.1em 0 #00aabb;
transition: 1s;
}
.underline1-ajkps {
top: 10%;
background: linear-gradient(white, white) no-repeat;
background-size: 100% 1px;
background-position: -10em 1.15em;
}
.underline1-ajkps:hover {
background-position: 0 1.15em;
}
.underline2-ajkps {
top: 38%;
background: linear-gradient(90deg, white 50%, transparent 0) repeat-x;
background-size: 0.2em 2px;
background-position: -3em 1.15em;
}
.underline2-ajkps:hover {
background-position: 0 1.15em;
}
.underline3-ajkps {
top: 66%;
background:
linear-gradient(-45deg, transparent 40%, white 0, white 60%, transparent 0) 0 1em,
linear-gradient(45deg, transparent 40%, white 0, white 60%, transparent 0) 0.1em 1em;
background-repeat: repeat-x;
background-size: 0.15em 0.1em;
background-position: -3em 1.15em;
}
.underline3-ajkps:hover {
background: linear-gradient(-45deg, transparent 40%, deeppink 0, deeppink 60%, transparent 0) 0 1em,
linear-gradient(45deg, transparent 40%, deeppink 0, deeppink 60%, transparent 0) 0.1em 1em;
background-repeat: repeat-x;
background-size: 0.15em 0.1em;
background-position: 0 1.15em;
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='利用 线性渐变 实现下划线' src='//codepen.io/Chokcoco/embed/pQKzBg/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/pQKzBg/'>利用 线性渐变 实现下划线</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-mask-image.md
================================================
## mask-image 实现图片变幻
mask-image 实现图片变幻。
主要借助了 mask-image，一张图片上应用 `mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);`，透明的部分则会凸显出另外一张图。
再利用动画，让 `mask-image: linear-gradient` 的角度旋转起来。
详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)
HTML：
```html
<div class="a"></div>
<div class="b"></div>
```
SCSS：
```scss
$img2: 'http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg';
$img1: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
$count: 360;
div {
position: absolute;
top:0;
left: 0;
width: 100vw;
height: 100vh;
}
.a {
background: url($img1);
background-size: 100% auto;
}
.b {
background: url($img2);
background-size: 100% auto;
mask-image: linear-gradient(0, rgba(0, 0, 0, 1) 40%, transparent 60%);
mask-image-position: 50% 50%;
animation: move 10s infinite;
}
@keyframes move {
@for $i from 0 through $count {
#{$i / $count * 100}% {
mask-image: linear-gradient($i / $count * 360deg, rgba(0, 0, 0, 1) 40%, transparent 60%);
}
}
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="mask-image 实现图片变幻" src="https://codepen.io/Chokcoco/embed/VqdQwB?height=350&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/VqdQwB'>mask-image 实现图片变幻</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-mask-text-show.md
================================================
## mask-image 实现文字的渐现
使用 `mask` 实现文字的渐现效果。
### 关键点
使用 mask 最重要结论就是：**添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明**。
详细的可以看看这篇文章：[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)
HTML：
```html
<p>Hello Mask</p>
<p class="radial">Hello Mask</p>
```
SCSS：
```scss
p {
margin: auto;
font-family: "Reggae One", cursive;
font-size: 48px;
color: #fff;
mask: radial-gradient(
circle at 0 50%,
#000,
transparent 10%,
transparent 0
);
mask-size: 100%;
animation: scale 5s infinite;
}
.radial {
mask: radial-gradient(
circle at 50% 0,
#000,
transparent 20%,
transparent 0
);
mask-size: 100% 100%;
animation: scale2 5s infinite;
}
@keyframes scale {
50%,
100% {
mask-size: 2000%;
}
}
@keyframes scale2 {
50%,
100% {
mask-size: 100% 2000%;
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="MASK Text Effect" src="https://codepen.io/Chokcoco/embed/OJbxZLM?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/OJbxZLM'>MASK Text Effect</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-mask-transition.md
================================================
## mask-image 实现图片转场变换
mask-image 实现图片转场变换。
详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)
HTML：
```html
<div></div>
```
SCSS：
```scss
html, body {
width: 100%;
height: 100%;
display: flex;
}
div {
margin: auto;
position: relative;
width: 30vw;
height: 70vh;
background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2128480768,3645204276&fm=26&gp=0.jpg) no-repeat;
background-size: cover;
&::before {
position: absolute;
content: "";
top: 0;left: 0; right: 0;bottom: 0;
background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1877625006,2341162086&fm=26&gp=0.jpg) no-repeat;
background-size: cover;
z-index: 1;
animation: maskRotate 4s ease-in-out infinite;
}
}
@keyframes maskRotate {
@for $i from 0 through 50 {
#{$i}% {
mask: linear-gradient(45deg, #000 #{$i * 2 + '%'}, transparent #{$i * 2.5 + '%'}, transparent #{$i * 2.5 + '%'});
}
}
100% {
mask: linear-gradient(45deg, #000， #000 100%);
}
}
```
效果如下：
<iframe height="400" style="width: 100%;" scrolling="no" title="MASK linear-gradient 转场" src="https://codepen.io/Chokcoco/embed/RwrpmyL?height=265&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/RwrpmyL'>MASK linear-gradient 转场</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-radial-btn-click-bubble.md
================================================
## 使用多重背景单标签实现气泡按钮点击效果
使用多重背景单标签实现气泡按钮点击效果
### 关键点
+ 通过多重背景实现（radial-gradient），并用 animation 改变 background-position。
HTML：
```html
<button class="bubbly-button">Click me!</button>
```
SCSS：
```scss
$fuschia: #ff0081;
$button-bg: $fuschia;
$button-text-color: #fff;
$baby-blue: #f8faff;
body{
font-size: 16px;
font-family: 'Helvetica', 'Arial', sans-serif;
text-align: center;
background-color: $baby-blue;
}
.bubbly-button{
font-family: 'Helvetica', 'Arial', sans-serif;
display: inline-block;
font-size: 1em;
padding: 1em 2em;
margin-top: 100px;
margin-bottom: 60px;
-webkit-appearance: none;
appearance: none;
background-color: $button-bg;
color: $button-text-color;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
&:focus {
outline: 0;
}
&:before, &:after{
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
&:before{
display: none;
top: -75%;
background-image:
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 20%, $button-bg 20%, transparent 30%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
//background-position: 0% 80%, -5% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 85% 30%;
}
&:after{
display: none;
bottom: -75%;
background-image:
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, transparent 10%, $button-bg 15%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%),
radial-gradient(circle, $button-bg 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
//background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
&:active{
transform: scale(0.9);
background-color: darken($button-bg, 5%);
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
&.animate{
&:before{
display: block;
animation: topBubbles ease-in-out 0.75s forwards;
}
&:after{
display: block;
animation: bottomBubbles ease-in-out 0.75s forwards;
}
}
}
@keyframes topBubbles {
0%{
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes bottomBubbles {
0%{
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
```
效果如下：
<iframe height="320" style="width: 100%;" scrolling="no" title="Bubbly button (Design by Gal Shir)" src="https://codepen.io/Chokcoco/embed/bGGMLdd?height=320&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/bGGMLdd'>Bubbly button (Design by Gal Shir)</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-radial-coupon.md
================================================
## 径向渐变实现优惠券波浪造型
渐变实现优惠券波浪造型。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
<div class="coupon">50</div>
<div class="wave">50</div>
```
SCSS：
```scss
.coupon {
position: relative;
width: 400px;
height: 160px;
margin: 50px auto;
background-image:
radial-gradient(circle at 1px 8px, transparent 6px, #f49714 6px, #f49714 0px),
radial-gradient(circle at 199px 8px, transparent 6px, #f49714 6px, #f49714 0px);
background-size: 200px 18px;
background-position: 0 0, 200px 0;
background-repeat-x: no-repeat;
font-size: 100px;
color: #fff;
font-weight: bold;
line-height: 160px;
padding-left: 60px;
box-sizing: border-box;
cursor: pointer;
&::before {
position: absolute;
content: "";
left: 240px;
top: 0;
bottom : 0;
width: 0;
border-left: 1px dashed #fff;
}
&::after {
position: absolute;
content: "立即领取";
font-size: 30px;
width: 70px;
top: 50%;
right: 2%;
transform: translate(-50%, -50%);
line-height: 40px;
letter-spacing: 5px;
}
}
.wave {
position: relative;
width: 400px;
height: 160px;
margin: 50px auto;
background: linear-gradient(90deg, #945700 0%, #f49714 100%);
filter: drop-shadow(-7px 4px 3px #333);
font-size: 100px;
color: #fff;
font-weight: bold;
line-height: 160px;
padding-left: 60px;
box-sizing: border-box;
cursor: pointer;
border-radius: 5px;
text-shadow: -2px -2px 2px #333;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
// left: 0;
right: 0;
bottom :0;
}
&::before {
width: 10px;
background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
background-size: 20px 20px;
background-position: 0 15px;
}
&::after {
width: 15px;
background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
background-size: 20px 40px;
background-position: 0 15px;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='优惠券波浪造型(coupon)' src='//codepen.io/Chokcoco/embed/vQLQXp/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/vQLQXp/'>优惠券波浪造型(coupon)</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-radial-focus.md
================================================
## 径向渐变实现舞台灯光聚焦效果
使用渐变实现舞台灯光聚焦效果。
### 关键点
+ 利用径向渐变生成一个从透明到黑色蒙板的占据整个屏幕的渐变
+ 为了让中心聚焦处可移动动画，整个渐变的容器需要比屏幕更大
HTML：
```html
<div class="radial-circle"></div>
```
SCSS：
```scss
$img: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
html,
body {
width: 100%;
height: 100%;
background-image: url($img);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.radial-circle {
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 3%, rgba(0, 0, 0, .7) 3.5%, rgba(0, 0, 0, .8) 100%);
animation: move 10s infinite alternate;
}
@keyframes move {
0% {
transform: translateX(-10%);
}
100% {
transform: translateX(10%);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='使用渐变实现舞台灯光聚焦效果' src='//codepen.io/Chokcoco/embed/PxrxGX/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/PxrxGX/'>使用渐变实现舞台灯光聚焦效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-wave-border.md
================================================
## 渐变实现波浪边框
渐变实现波浪边框。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
<body></body>
```
SCSS：
```scss
body {
position: relative;
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #607d8b, #673ab7);
background-size: 100% 50px;
background-repeat: no-repeat;
&::before {
content: "";
position: absolute;
left: 0;
top: 40px;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px, #fff 20px);
}
&::after {
content: "";
position: absolute;
left: 0;
top: 35px;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='265' scrolling='no' title='波浪边框(优惠券边框)' src='//codepen.io/Chokcoco/embed/MzwxBm/?height=265&theme-id=0&default-tab=css,result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/MzwxBm/'>波浪边框(优惠券边框)</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-wave-underline.md
================================================
## 渐变实现波浪下划线
利用渐变实现波浪下划线。
### 核心点
+ 重点一在于如何将两段 `radial-gradient` 无缝衔接组成波浪
+ 重点二在于动画行进过程如何首尾衔接
HTML：
```html
<p>渐变实现波浪</p>
<a class="flow-wave">Hover Me</a>
```
SCSS：
```scss
p {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%) scale(3);
font-size: 18px;
text-decoration: none;
padding: 10px;
cursor:pointer;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 10px -7px, transparent 8px, red 8px, red 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px);
}
&:hover::before {
animation: moveTop 2s infinite alternate linear;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 10px 27px, transparent 8px, green 8px, green 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: 0 calc(100% - 4px);
}
&:hover::after {
animation: moveBottom 2s infinite alternate linear;
}
}
.flow-wave {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%) scale(3);
font-size: 18px;
text-decoration: none;
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}
.flow-wave {
padding: 5px 0;
}
.flow-wave:hover,
.flow-wave:focus {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
from { background-position-x: -10px, 0; }
to { background-position-x: -30px, -20px; }
}
@keyframes moveTop {
100% {
bottom: -5px;
}
}
@keyframes moveBottom {
100% {
bottom: 5px;
}
}
```
效果如下：
<iframe height="350" style="width: 100%;" scrolling="no" title="渐变实现波浪下划线及动画" src="https://codepen.io/Chokcoco/embed/vMyBQe?height=350&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/vMyBQe'>渐变实现波浪下划线及动画</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/bg-wave.md
================================================
## 渐变实现波浪效果/波浪进度框
使用渐变实现波浪效果/波浪进度框。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
<div class="wave"></div>
```
SCSS：
```scss
.wave {
width: 20vmax;
height: 20vmax;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #0092d4;
background: linear-gradient(0deg, #0092d4 0%, #6bcefb 50%, transparent 50%);
border-radius: 50%;
z-index: 1;
overflow: hidden;
cursor: pointer;
}
.wave::before,
.wave::after {
content: "";
position: absolute;
transform: scaleX(1.3);
}
.wave::after {
top: 50%;
left: 0;
right: 0;
background-repeat: repeat-x;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px 15px,
transparent 12px,
#fff 13px,
#fff 20px
);
}
.wave::before {
top: 50%;
left: 0;
right: 0;
background-repeat: repeat-x;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 0px,
#fff 12px,
transparent 13px
);
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='400' scrolling='no' title='使用渐变实现波浪效果' src='//codepen.io/Chokcoco/embed/VVNVJw/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/VVNVJw/'>使用渐变实现波浪效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: background/css-property-variable-bg-change-animation.md
================================================
## 利用 CSS @property 探寻渐变的极限效果
利用 CSS @property 探寻渐变的极限效果
### 关键点
利用了 CSS @property，不了解的可以猛击本文：[CSS @property，让不可能变可能](https://juejin.cn/post/6951201528543707150)
### 线性渐变
CSS：
```CSS
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 100%;
}
body {
background: repeating-linear-gradient(45deg, deeppink, #fc0, #000, red, green, gray var(--per));
animation: perChange 60s infinite linear;
cursor: pointer;
&:hover {
animation-play-state: paused;
}
}
@keyframes perChange {
5% {
--per: 1%;
}
10% {
--per: .1%;
}
30% {
--per: .01%;
}
50% {
--per: .001%;
}
70% {
--per: .0001%;
}
78% {
--per: .00001%;
}
90% {
--per: .000001%;
}
95%,
100% {
--per: .0000001%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Property Animation - LinearGradient" src="https://codepen.io/Chokcoco/embed/qBjbZye?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/qBjbZye">
CSS Property Animation - LinearGradient</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### 径向渐变
CSS：
```CSS
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 100%;
}
body {
background: repeating-radial-gradient(deeppink, #fc0, #000, red, green, gray var(--per));
animation: perChange 25s infinite linear;
cursor: pointer;
&:hover {
animation-play-state: paused;
}
}
@keyframes perChange {
5% {
--per: 1%;
}
10% {
--per: .1%;
}
30% {
--per: .01%;
}
50% {
--per: .001%;
}
70% {
--per: .0001%;
}
78% {
--per: .00001%;
}
90% {
--per: .000001%;
}
95%,
100% {
--per: .0000001%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Property Animation - RadialGradient" src="https://codepen.io/Chokcoco/embed/BaZjKwQ?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/BaZjKwQ">
CSS Property Animation - RadialGradient</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### 角向渐变
CSS：
```CSS
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 100%;
}
body {
background: repeating-conic-gradient(deeppink, #fc0, #000, red, green, gray var(--per));
animation: perChange 25s infinite linear;
cursor: pointer;
&:hover {
animation-play-state: paused;
}
}
@keyframes perChange {
5% {
--per: 1%;
}
10% {
--per: .1%;
}
30% {
--per: .01%;
}
50% {
--per: .001%;
}
70% {
--per: .0001%;
}
78% {
--per: .00001%;
}
90% {
--per: .000001%;
}
95%,
100% {
--per: .0000001%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Property Animation - ConicGradient" src="https://codepen.io/Chokcoco/embed/PojZNab?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/PojZNab">
CSS Property Animation - ConicGradient</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: background/repeating-radial-background-artistic-bg.md
================================================
## 多重径向渐变实现美妙的艺术背景
利用多重径向渐变实现美妙的艺术背景。
### 关键点
多重径向渐变的单位数量级要非常的小！
关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)
HTML：
```
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
}
@property --length {
syntax: '<length>';
inherits: false;
initial-value: 0.0003px;
}
div {
width: 240px;
height: 240px;
margin: auto;
}
div:nth-child(1) {
background-image: repeating-radial-gradient(
circle at center center,
rgb(241, 43, 239),
rgb(239, 246, 244) 3px
);
}
div:nth-child(2) {
background-image: repeating-radial-gradient(
circle at 15% 30%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) 2px
);
}
div:nth-child(3) {
background-image: repeating-radial-gradient(
circle at center center,
rgb(81, 9, 72),
rgb(72, 90, 223),
rgb(80, 0, 34),
rgb(34, 134, 255),
rgb(65, 217, 176),
rgb(241, 15, 15),
rgb(148, 213, 118) 0.1px
);
}
div:nth-child(4) {
background-image: repeating-radial-gradient(
circle at center center,
rgb(38, 21, 217) 0px,
rgb(38, 21, 217) 2px,
rgba(8, 254, 5, 0.83) 2px,
rgba(8, 254, 5, 0.83) 3px
);
background-size: 69px 69px;
}
div:nth-child(5) {
background-image: repeating-radial-gradient(
ellipse at center center,
rgb(75, 154, 242),
rgb(64, 135, 228),
rgb(54, 117, 214),
rgb(43, 98, 200),
rgb(33, 79, 185),
rgb(22, 60, 171),
rgb(12, 42, 157),
rgb(1, 23, 143) 0.01px
);
}
div:nth-child(6) {
background-image: repeating-radial-gradient(
circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) var(--length)
);
transition: 4s --length;
cursor: pointer;
&:hover {
--length: 4px;
}
}
```
效果如下：
<iframe height="600" style="width: 100%;" scrolling="no" title="Magic Gradient Art" src="https://codepen.io/Chokcoco/embed/MWJXKXE?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Chokcoco/pen/MWJXKXE">
Magic Gradient Art</a> by Chokcoco (<a href="https://codepen.io/Chokcoco">@Chokcoco</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-color-set.md
================================================
## 使用 mix-blend-mode 实现图片任意颜色赋值技术
使用 `mix-blend-mode` 实现图片任意颜色赋值技术。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
详细分析请看：[两行 CSS 代码实现图片任意颜色赋色技术](https://www.cnblogs.com/coco1s/p/8080211.html)
HTML：
```html
<div class="pic">原图</div>
<div class="pic pic1">红色</div>
<div class="pic pic2">灰色</div>
<div class="pic pic3">渐变色</div>
```
SCSS：
```scss
$img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png';
.pic {
width: 200px;
height: 200px;
margin: 50px;
text-align: center;
font-size: 42px;
line-height: 420px;
float: left;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
.pic2 {
background-image: url($img), linear-gradient(#333, #333);
background-blend-mode: lighten;
background-size: cover;
}
.pic3 {
background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten;
background-size: cover;
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='400' scrolling='no' title='纯色图片赋色技术尝试' src='//codepen.io/Chokcoco/embed/rpLryX/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/rpLryX/'>纯色图片赋色技术尝试</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-douyin-logo.md
================================================
## 使用 mix-blend-mode 实现抖音 LOGO
使用 mix-blend-mode 实现抖音 LOGO。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
+ 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果
+ 利用 `mix-blend-mode: lighten` 混合模式实现两个 J 形结构重叠部分为白色
HTML：
```html
<div class="g-container">
<div class="j"></div>
<div class="j"></div>
</div>
```
SCSS：
```scss
body {
background: #000;
overflow: hidden;
}
.g-container {
position: relative;
width: 200px;
margin: 100px auto;
filter: contrast(150%) brightness(110%);
}
.j {
position: absolute;
top: 0;
left: 0;
width: 47px;
height: 218px;
z-index: 1;
background: #24f6f0;
&::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 47px solid #24f6f0;
border-top: 47px solid transparent;
border-radius: 50%;
top: 121px;
left: -147px;
transform: rotate(45deg);
}
&::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
border: 40px solid #24f6f0;
border-right: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
top: -110px;
right: -183px;
border-radius: 100%;
transform: rotate(45deg);
z-index: -10;
}
}
.j:last-child {
left: 10px;
top: 10px;
background: #fe2d52;
z-index: 100;
mix-blend-mode: lighten;
animation: moveLeft 10s infinite;
&::before {
border: 47px solid #fe2d52;
border-top: 47px solid transparent;
}
&::after {
border: 40px solid #fe2d52;
border-right: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
}
}
@keyframes moveLeft {
0% {
transform: translate(200px);
}
50% {
transform: translate(0px);
}
100% {
transform: translate(0px);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='450' scrolling='no' title='使用 mix-blend-mode 实现抖音 LOGO' src='//codepen.io/Chokcoco/embed/oQxQyw/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/oQxQyw/'>使用 mix-blend-mode 实现抖音 LOGO</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-loading.md
================================================
## mix-blend-mode 实现 loading 效果
mix-blend-mode 实现 loading 效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
这里使用了 `mix-blend-mode: screen` 滤色模式，这是一种提亮图像形混合模式。滤色的英文是 screen，也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相，相乘，然后再反相。简单记忆为"让白更白，而黑不变"。（不一定十分准确，如有错误还请指正）
我们将几个 div 按照不同延时(animation-delay)小幅度旋转起来，来达到一种很显眼很魔性的效果，适合做 loading 图。
HTML：
```html
<strong class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</strong>
```
SCSS：
```scss
body {
background:#291f34;
overflow:hidden;
}
.loading {
position:absolute;
left:50%;
top:30vh;
margin-left:-20vh;
display:block;
width:40vh;
height:40vh;
text-align:center;
filter:contrast(1.2);
span {
mix-blend-mode:screen;
display:block;
position:absolute;
border-radius:50%;
animation:wave 3s infinite linear;
}
span:nth-child(0) {
left:-11%;
right:-2%;
top:-12%;
bottom:-5%;
transform-origin:46% 53%;
animation-delay:0;
background-color:hsl(0, 50%, 50%);
}
span:nth-child(1) {
left:-4%;
right:-4%;
top:-9%;
bottom:-2%;
transform-origin:47% 50%;
animation-delay:-1s;
background-color:hsl(50, 60%, 50%);
}
span:nth-child(2) {
left:-11%;
right:-4%;
top:-10%;
bottom:-11%;
transform-origin:49% 53%;
animation-delay:-1.5s;
background-color:hsl(100, 70%, 50%);
}
span:nth-child(3) {
left:-7%;
right:-9%;
top:-11%;
bottom:-4%;
transform-origin:47% 52%;
animation-delay:-2s;
background-color:hsl(150, 80%, 50%);
}
span:nth-child(4) {
left:-8%;
right:-3%;
top:-5%;
bottom:-11%;
transform-origin:47% 52%;
animation-delay:-2.5s;
background-color:hsl(200, 90%, 50%);
}
span:nth-child(5) {
left:-10%;
right:-8%;
top:-4%;
bottom:-9%;
transform-origin:48% 51%;
animation-delay:-3s;
background-color:hsl(250, 100%, 50%);
}
span:nth-child(6) {
left:-9%;
right:-11%;
top:-5%;
bottom:-8%;
transform-origin:47% 50%;
animation-delay:-3.5s;
background-color:hsl(300, 100%, 50%);
}
}
@keyframes wave {
from {
transform:rotateZ(0deg);
}
to {
transform:rotateZ(360deg);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='350' scrolling='no' title='mix-blend-mode 实现 loading 效果' src='//codepen.io/Chokcoco/embed/PmJJeR/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/PmJJeR/'>mix-blend-mode 实现 loading 效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-mix-img.md
================================================
## 图片的类抖音 LOGO 晕眩效果
使用 background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### mix-blend-mode
除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。
+ 可以是背景图片与背景图片的混合，
+ 也可以是背景图片和背景色的之间的混合。
### 关键点
本例是 `background-blend-mode` | `mix-blend-mode` 是配合使用。
HTML：
```html
<div class="mix3d"></div>
```
SCSS：
```scss
.mix3d {
margin: 30px auto 0;
width: 400px;
height: 400px;
z-index: 2;
background: url('https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'), cyan;
background-blend-mode: lighten;
background-size: center;
&:after {
content: '';
position: absolute;
width: 400px;
height: 400px;
z-index: 3;
background: url('https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'), red;
background-blend-mode: lighten;
margin-left: 10px;
background-size: center;
mix-blend-mode: darken;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height='450' scrolling='no' title='使用background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果' src='//codepen.io/Chokcoco/embed/VVMQgj/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/VVMQgj/'>使用background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-mix.md
================================================
## mix-blend-mode MIX
使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。
当然，也可以搭配 filter 中的 blur 和 contrast。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### mix-blend-mode
除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。
+ 可以是背景图片与背景图片的混合，
+ 也可以是背景图片和背景色的之间的混合。
利用混合模式，我们可以尽情发挥想象。
### Demo MIX 1
HTML：
```pug
.container
.top
- for (i = 0; i < 60; i++)
.top_ball
.ball
.left
- for (i = 0; i < 60; i++)
.top_ball
.ball
.right
- for (i = 0; i < 60; i++)
.top_ball
.ball
```
SCSS：
```scss
$count: 60;
@function setBorderRadius() {
$pattern1: random(80) + 20;
$pattern2: 100 - $pattern1;
$pattern3: random(80) + 20;
$pattern4: 100 - $pattern3;
$pattern5: random(80) + 20;
$pattern6: 100 - $pattern5;
$pattern7: random(80) + 20;
$pattern8: 100 - $pattern7;
@return (#{$pattern3 + 0%} #{$pattern4 + 0%} #{$pattern1 + 0%} #{$pattern2 +
0%} / #{$pattern5 + 0%} #{$pattern7 + 0%} #{$pattern8 + 0%} #{$pattern6 +
0%});
}
html, body {
width: 100%;
height: 100%;
background: #000;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
filter: blur(3px) contrast(500) hue-rotate(50deg);
animation: filterChange 10s infinite alternate;
}
.ball {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: setBorderRadius();
mix-blend-mode: screen;
}
.top,
.left,
.right{
position: absolute;
width: 20vmin;
height: 20vmin;
@for $i from 1 through $count {
.top_ball:nth-child(#{$i}) {
$size: random(15) + 5vmin;
$opacity: random(100) / 100;
position: absolute;
top: 50%;
left: 50;
transform: translate(-50%, -50%);
width: $size;
height: $size;
border-radius: setBorderRadius();
background: rgba(random(255), random(255), random(255), $opacity);
}
}
}
.top {
top: 10vh;
left: 50vw;
@for $i from 1 through $count {
.top_ball:nth-child(#{$i}) {
animation: rotate random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;
}
}
}
.left {
top: 70vh;
left: 35vw;
@for $i from 1 through $count {
.top_ball:nth-child(#{$i}) {
animation: rotateLeft random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;
}
}
}
.right {
top: 70vh;
left: 65vw;
@for $i from 1 through $count {
.top_ball:nth-child(#{$i}) {
animation: rotateRight random(5000) + 1000ms infinite (200 * $i * -1ms) alternate;
}
}
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(-360deg);
}
100% {
transform: translate(calc(-50% - 15vw), calc(-50% + 60vh)) rotate(360deg);
}
}
@keyframes rotateLeft {
0% {
transform: translate(-50%, -50%) rotate(-360deg);
}
100% {
transform: translate(calc(-50% + 30vw), -50%) rotate(360deg);
}
}
@keyframes rotateRight {
0% {
transform: translate(-50%, -50%) rotate(-360deg);
}
100% {
transform: translate(calc(-50% - 15vw), calc(-50% - 60vh)) rotate(360deg);
}
}
@keyframes filterChange {
100% {
filter: blur(15px) contrast(10) hue-rotate(10deg);
}
}
```
效果如下：
<iframe height="320" style="width: 100%;" scrolling="no" title="PURE CSS MIX ?" src="https://codepen.io/Chokcoco/embed/REoKpQ?height=320&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/REoKpQ'>PURE CSS MIX ?</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### Demo MIX2
HTML：
```HTML
<div></div>
```
SCSS：
```scss
html,
body {
overflow: hidden;
// filter: blur(2px) contrast(3) hue-rotate(-20deg);
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #9c27b0, #ffc107, #fdf5cf, #F44336);
z-index: 20;
mix-blend-mode: color-burn;
}
body::after {
content: "";
position: absolute;
top: -200%;
left: 0;
right: 0;
bottom: -200%;
background: radial-gradient(circle at 35% 75%, #000, #fff, #333, #ccc, #666, #aaa);
background-size: 25% 25%;
animation: rotate 10s infinite linear;
z-index: 10;
mix-blend-mode: color-dodge;
}
div {
width: 200vw;
height: 200vh;
background: radial-gradient(circle at 50% 50%, #fff, #333, #ccc, #666, #aaa, #000);
background-size: 30% 25%;
animation: move 10s infinite linear alternate;
}
@keyframes move {
100% {
transform: translate(-100vw, 0);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
```
效果如下：
<iframe height="320" style="width: 100%;" scrolling="no" title="CSS MAGIC MIX" src="https://codepen.io/Chokcoco/embed/bOgamV?height=320&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/bOgamV'>CSS MAGIC MIX</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### Demo MIX3
HTML：
```pug
.container
-for(var i=0; i<8; i++)
.circle
```
SCSS：
```scss
$n: 8;
@function randomColor() {
@return rgba(random(255), random(255), random(255), 1);
}
html,
body {
width: 100%;
height: 100%;
background: #000;
}
.container {
position: absolute;
width: 300px;
height: 300px;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
// mix-blend-mode: color-dodge;
// background-blend-mode: color-dodge;
}
.circle {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
mix-blend-mode: color-dodge;
top: 0;
left: 0;
will-change: transform;
background: #fff;
}
@for $i from 1 through $n {
.circle:nth-child(#{$i}) {
background: radial-gradient(randomColor() 15%, randomColor() 30%, randomColor() 45%, randomColor() 60%, randomColor() 75%, randomColor() 90%, randomColor() 100%);
transform: rotate($i * 45deg) translate3d(0, 0, 0);
animation: move-#{$i} 15s infinite 2s ease-in-out;
}
@keyframes move-#{$i} {
10% { transform: rotate($i * 45deg) translate3d(120px, 0, 0) rotateZ(90deg); }
20% { transform: rotate($i * 90deg) translate3d(50px, 0, 0) rotateY(90deg); }
30% { transform: rotate($i * 180deg) translate3d(125px, 0, 0) rotateY(180deg); }
40% { transform: rotate($i * 135deg) translate3d(50px, 0, 0) rotateX(180deg); }
50% { transform: rotate($i * 45deg) translate3d(100px, 0, 0) rotateX(180deg); }
60% { transform: rotate($i * 405deg) translate3d(10px, -20px, 0) rotateX(90deg) rotateY(180deg); }
70% { transform: rotate($i * -45deg) translate3d(120px, 50px, 0) rotateY(0deg); }
80% { transform: rotate($i * 90deg) translate3d(50px, 0, 0) rotateY(180deg); }
90% { transform: rotate($i * 45deg) translate3d(150px, -20px, 0) rotateX(180deg);}
100% { transform: rotate($i * 45deg) translate3d(0, 0, 0); }
}
}
```
效果如下：
<iframe height="450" style="width: 100%;" scrolling="no" title="CSS MAGIC MIX 2" src="https://codepen.io/Chokcoco/embed/royQvE?height=450&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/royQvE'>CSS MAGIC MIX 2</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-rotate.md
================================================
## mix-blend-mode 实现颜色叠加旋转动画
mix-blend-mode 实现颜色叠加旋转动画。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
这里使用了 `mix-blend-mode: difference` 差值模式，通过查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不产生变化。
通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。
看看利用了这个混合模式，运用在一些多图层效果里，可以产生十分绚烂的混合效果：
HTML：
```pug
// pug模版
.container
-for (var x = 0; x < 6; x++)
.box
```
SCSS：
```scss
$count : 6;
$each: 360deg / $count;
$distance: 100px;
$boxshadow: 25px;
body {
background-color: #000;
overflow: hidden;
}
.container {
position: absolute;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.box {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #fff;
background: rgb(0, 0, 0);
box-shadow: inset 0 $boxshadow 0 $boxshadow rgb(255, 255, 255);
mix-blend-mode: difference;
}
@for $i from 1 through $count {
$curRotate: $i * $each;
.box:nth-child(#{$i}) {
transform: rotate($curRotate) translate(0, 50%);
animation: move#{$i} 10s linear infinite alternate;
}
@keyframes move#{$i} {
100% {
transform: rotate(calc(1080deg + #{$curRotate})) translate($distance);
}
}
}
```
效果如下：
<iframe height='400' scrolling='no' title='pureCssAnimation(webkit Only)' src='//codepen.io/Chokcoco/embed/VbMrKX/?height=265&theme-id=0&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Chokcoco/pen/VbMrKX/'>pureCssAnimation(webkit Only)</a> by Chokcoco (<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-text-glitch.md
================================================
## 类抖音 LOGO 文字故障效果
使用 mix-blend-mode 实现类抖音 LOGO 文字故障效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
+ 利用 `mix-blend-mode: lighten` 混合模式实现两段文字结构重叠部分为白色
+ 利用元素位移完成错位移动动画，形成视觉上的冲击效果
HTML：
```html
<div class="text-magic" data-word="CSSTextGlitch">
<div class="white"></div>
</div>
```
SCSS：
```scss
.text-magic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(3);
width: 300px;
font-size: 36px;
font-family: Raleway, Verdana, Arial;
color: transparent;
}
.white {
position: absolute;
left: -10px;
width: 100%;
height: 1px;
background: #000;
z-index: 4;
animation: whiteMove 10s ease-out infinite;
}
.text-magic::before {
content: attr(data-word);
position: absolute;
top: 0;
left: 0;
height: 36px;
color: red;
overflow: hidden;
z-index: 2;
filter: contrast(200%);
text-shadow: 1px 0 0 red;
animation: move 0.95s infinite;
}
.text-magic::after {
content: attr(data-word);
position: absolute;
top: 0;
left: -1px;
height: 36px;
color: rgba(255, 255, 255, 0.8);
overflow: hidden;
z-index: 3;
color: cyan;
filter: contrast(200%);
text-shadow: -1px 0 0 cyan;
mix-blend-mode: lighten;
animation: move 1.1s infinite 0.2s;
}
@keyframes whiteMove {
9% {
top: 38px;
}
14% {
top: 8px;
}
18% {
top: 42px;
}
22% {
top: 1px;
}
32% {
top: 32px;
}
34% {
top: 12px;
}
40% {
top: 26px;
}
43% {
top: 7px;
}
99% {
top: 30px;
}
}
@keyframes move {
10% {
top: -0.4px;
left: -1.1px;
}
20% {
top: 0.4px;
left: -0.2px;
}
30% {
left: .5px;
}
40% {
top: -0.3px;
left: -0.7px;
}
50% {
left: 0.2px;
}
60% {
top: 1.8px;
left: -1.2px;
}
70% {
top: -1px;
left: 0.1px;
}
80% {
top: -0.4px;
left: -0.9px;
}
90% {
left: 1.2px;
}
100% {
left: -1.2px;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
<iframe height="350" style="width: 100%;" scrolling="no" title="类抖音LOGO文字故障效果" src="https://codepen.io/Chokcoco/embed/KKwLaOV?height=350&theme-id=default&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Chokcoco/pen/KKwLaOV'>类抖音LOGO文字故障效果</a> by Chokcoco
(<a href='https://codepen.io/Chokcoco'>@Chokcoco</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
================================================
FILE: blendmode/blend-text-shine.md
================================================
## 使用 mix-blend-mode 实现光影文字效果
使用 mix-blend-mode 实现光影文字效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合
gitextract_9n49veyn/
├── .gitattributes
├── .gitignore
├── .nojekyll
├── 3d/
│ ├── 3d-ball.md
│ ├── 3d-count-number.md
│ ├── 3d-css-galaxy-shuttle.md
│ ├── 3d-cuber-progress-bar.md
│ ├── 3d-cuber-roll-404.md
│ ├── 3d-glowing-rotate-text.md
│ ├── 3d-infinite-maze.md
│ ├── 3d-line.md
│ ├── 3d-maze.md
│ ├── 3d-rope-swing.md
│ ├── 3d-spiral-number.md
│ ├── 3d-text-debut.md
│ ├── parallax-3d-1.md
│ ├── parallax-3d-2.md
│ └── parallax-3d-translate.md
├── README.md
├── _sidebar.md
├── animation/
│ ├── animation-button-border.md
│ ├── animation-curve.md
│ ├── animation-delay-control-text-effect.md
│ ├── animation-delay-wavy.md
│ ├── animation-direction.md
│ ├── animation-play-state.md
│ └── animation-rotate.md
├── assets/
│ ├── css/
│ │ ├── highlight.css
│ │ ├── index.css
│ │ └── prism-line-numbers.css
│ └── js/
│ ├── highlight.js
│ ├── index.js
│ ├── md5.js
│ └── prism-line-number.js
├── background/
│ ├── background-css-property-tv-noise.md
│ ├── bg-attachment-frosted-glass.md
│ ├── bg-attachment-scroll-shadow.md
│ ├── bg-clip-text-shine.md
│ ├── bg-conic-border-effect.md
│ ├── bg-conic-border-light-effect.md
│ ├── bg-conic-circle-loading.md
│ ├── bg-conic-gradient-animation.md
│ ├── bg-conic-gradient-repeating-pattern.md
│ ├── bg-linear-arrow.md
│ ├── bg-linear-border-effect.md
│ ├── bg-linear-gradient-maze.md
│ ├── bg-linear-inscribed.md
│ ├── bg-linear-progress-bar.md
│ ├── bg-linear-scroll-indicator.md
│ ├── bg-linear-stripe.md
│ ├── bg-linear-underline.md
│ ├── bg-mask-image.md
│ ├── bg-mask-text-show.md
│ ├── bg-mask-transition.md
│ ├── bg-radial-btn-click-bubble.md
│ ├── bg-radial-coupon.md
│ ├── bg-radial-focus.md
│ ├── bg-wave-border.md
│ ├── bg-wave-underline.md
│ ├── bg-wave.md
│ ├── css-property-variable-bg-change-animation.md
│ └── repeating-radial-background-artistic-bg.md
├── blendmode/
│ ├── blend-color-set.md
│ ├── blend-douyin-logo.md
│ ├── blend-loading.md
│ ├── blend-mix-img.md
│ ├── blend-mix.md
│ ├── blend-rotate.md
│ ├── blend-text-glitch.md
│ ├── blend-text-shine.md
│ ├── blend-water-wave.md
│ ├── mix-multi-graidient-bg.md
│ └── mixblend-text-wave-effect.md
├── border/
│ ├── border-chargin.md
│ ├── border-image-animate.md
│ ├── border-line-animation.md
│ ├── border-line-drop-animation.md
│ ├── border-loading.md
│ ├── border-outline-symbol-add.md
│ ├── border-overflow-btn.md
│ ├── border-typing.md
│ ├── border-wave-percent.md
│ └── border-wave.md
├── clippath/
│ ├── clippath-border-image.md
│ ├── clippath-border-line-radius.md
│ ├── clippath-border-line.md
│ ├── clippath-img-glitch.md
│ └── clippath-word-crack.md
├── cssdoodle/
│ ├── bg-artist-clippath.md
│ ├── bg-artist-pattern-2.md
│ ├── bg-artist-pattern.md
│ ├── bg-mask-composite.md
│ ├── bg-mask-mix.md
│ ├── fish-seaweed.md
│ ├── spotlight.md
│ └── sunset.md
├── filter/
│ ├── filter-ball-loading.md
│ ├── filter-ball-through.md
│ ├── filter-blur-constrast.md
│ ├── filter-fire-2.md
│ ├── filter-fire.md
│ ├── filter-ghost.md
│ ├── filter-hue-rotate-color.md
│ ├── filter-mix.md
│ ├── filter-polygon-shadow.md
│ ├── filter-shadow.md
│ ├── filter-single-div-water-drop.md
│ └── use-filter-blur-enhance-text-3d-effect.md
├── generate-content.js
├── hashmap.js
├── index.html
├── init.md
├── layout/
│ ├── best-way-to-center-element.md
│ ├── double-wing-layout.md
│ ├── grid-clip-path-gta5-poster.md
│ ├── holy-grail-layout-flex.md
│ ├── holy-grail-layout.md
│ ├── masonry-layout-colum.md
│ ├── masonry-layout-flex.md
│ ├── masonry-layout-grid.md
│ ├── multi-column-contour.md
│ ├── multi-row-or-column.md
│ ├── single-column-isometric.md
│ ├── use-margin-auto-to-simulate-align-self.md
│ └── use-margin-auto-to-simulate-space-between.md
├── others/
│ ├── 1px-line.md
│ ├── border-inset-text.md
│ ├── css-resize-switch-picture.md
│ ├── digital-char-rain-animation.md
│ ├── others-chrome-tab.md
│ ├── others-equiangular-spiral.md
│ ├── others-huawei-charging.md
│ ├── others-night.md
│ ├── others-pie.md
│ ├── pointer-follow-2.md
│ ├── pointer-follow-3.md
│ ├── pointer-follow.md
│ ├── reflect-artist.md
│ ├── reflect-btn-effect.md
│ ├── reflect-text-effect.md
│ ├── word-break-move.md
│ ├── word-break.md
│ └── word-glitch.md
├── pesudo/
│ ├── pesudo-animation-control-hover.md
│ ├── pesudo-animation-control-target.md
│ ├── pesudo-animation-control.md
│ ├── pesudo-boundary-judge.md
│ ├── pesudo-bubble.md
│ ├── pesudo-focus-checked.md
│ ├── pesudo-focus-target.md
│ ├── pesudo-focus-within-placeholder-shown.md
│ ├── pesudo-focus-within.md
│ ├── pesudo-juejin.md
│ ├── pesudo-loading-content.md
│ ├── pesudo-loading-line.md
│ ├── pesudo-not-2.md
│ └── pesudo-not.md
├── shadow/
│ ├── circle-loading.md
│ ├── inscribed-angle.md
│ ├── neon-effect-3d-text.md
│ ├── neon-shadow-light.md
│ ├── opacity-wrap.md
│ ├── projection-long-shadow.md
│ ├── projection-one-sided-shadow.md
│ ├── projection-solid-shadow.md
│ ├── projection-word-solid-shadow-ii.md
│ ├── projection-word-solid-shadow.md
│ ├── relief-style-btn.md
│ ├── shadow-ani-ii.md
│ ├── shadow-ani.md
│ ├── single-div-douyin-logo.md
│ ├── single-div-fork.md
│ └── single-div-ie-logo.md
├── svg/
│ ├── alipay-ar-scan.md
│ ├── svg-arc-word.md
│ ├── svg-btn-hover.md
│ ├── svg-dropshadow-line-neon-effect.md
│ ├── svg-feTurbulence-harmony-logo.md
│ ├── svg-feturbulence-btn-glitch.md
│ ├── svg-feturbulence-clouds.md
│ ├── svg-line-text-2.md
│ └── svg-line-text.md
└── text/
└── text-underline-wave.md
SYMBOL INDEX (36 symbols across 3 files)
FILE: assets/js/index.js
function insertPvAndLike (line 60) | async function insertPvAndLike(label) {
function addPv (line 82) | async function addPv(label) {
function addLike (line 94) | async function addLike(label) {
function insertPvDOM (line 106) | function insertPvDOM(pv, likes, ct) {
function insertLikeDOM (line 124) | function insertLikeDOM(label) {
function gitalkRender (line 144) | function gitalkRender(vm, label) {
function format (line 168) | function format(date, unit) {
FILE: assets/js/md5.js
function t (line 1) | function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<...
function r (line 1) | function r(n,t){return n<<t|n>>>32-t}
function e (line 1) | function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}
function o (line 1) | function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}
function u (line 1) | function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}
function c (line 1) | function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}
function f (line 1) | function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}
function i (line 1) | function i(n,r){n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l...
function a (line 1) | function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCh...
function d (line 1) | function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+...
function h (line 1) | function h(n){return a(i(d(n),8*n.length))}
function l (line 1) | function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length...
function g (line 1) | function g(n){var t,r,e="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),e+=...
function v (line 1) | function v(n){return unescape(encodeURIComponent(n))}
function m (line 1) | function m(n){return h(v(n))}
function p (line 1) | function p(n){return g(m(n))}
function s (line 1) | function s(n,t){return l(v(n),v(t))}
function C (line 1) | function C(n,t){return g(s(n,t))}
function A (line 1) | function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}
FILE: generate-content.js
constant ONLINE_URL (line 5) | const ONLINE_URL = 'https://csscoco.com/inspiration/#/.';
constant FILE_NAME (line 6) | const FILE_NAME = './_sidebar.md';
constant FILE_NAME_README (line 7) | const FILE_NAME_README = './README.md';
constant FILE_NAME_HASHMAP (line 8) | const FILE_NAME_HASHMAP = './hashmap.js';
constant FILE_NAME_ARR (line 9) | const FILE_NAME_ARR = [];
constant HASHMAP (line 10) | const HASHMAP = {};
function readFile (line 30) | async function readFile(filePath) {
function writeFile (line 64) | async function writeFile(name, data) {
function initWrite (line 74) | async function initWrite() {
function writeFileHashMap (line 97) | async function writeFileHashMap() {
Condensed preview — 183 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (519K chars).
[
{
"path": ".gitattributes",
"chars": 55,
"preview": "*.md linguist-language=CSS\n*.png linguist-language=CSS\n"
},
{
"path": ".gitignore",
"chars": 70,
"preview": "node_modules/\n.DS_Store\n.DS_Store?\n*/.DS_Store\n*/*/.DS_Store.DS_Store\n"
},
{
"path": ".nojekyll",
"chars": 0,
"preview": ""
},
{
"path": "3d/3d-ball.md",
"chars": 3338,
"preview": "## 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 "
},
{
"path": "3d/3d-count-number.md",
"chars": 6812,
"preview": "## 3D 数字计数动画\r\n\r\n3D 数字计数动画。\r\n\r\n### 关键点\r\n\r\n看着复杂，其实不难，主要是耗时间。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[你所不知道的 CSS 动画技巧与细节](https://www"
},
{
"path": "3d/3d-css-galaxy-shuttle.md",
"chars": 2924,
"preview": "## 3D 宇宙时空穿梭效果\n\n利用 CSS 3D 实现星空穿梭效果\n\n### 关键点\n\n1. 选取一张合适的星空图\n2. 利用 5 个元素设定上述星空图，在 3D 效果的作用下，在上下左右中5个方向铺满一屏\n3. 父容器在极小的 `per"
},
{
"path": "3d/3d-cuber-progress-bar.md",
"chars": 3375,
"preview": "## 3D 立方体进度条\n\n使用 CSS 3D 实现的立方体制作酷炫的进度条。\n\n### 关键点\n\n+ 可以利用 CSS Property 实现渐变的动画效果\n+ 可以利用滤镜的 hue-rotate 变化实现整体的颜色变化\n\n\nHTML："
},
{
"path": "3d/3d-cuber-roll-404.md",
"chars": 4491,
"preview": "## 3D 立方体滚动 404 效果\n\n使用 CSS 3D 实现的立方体制作的一个 404 效果。\n\n### 关键点\n\n其核心就在于在一个 CSS 3D 立方体的基础上：\n\n1. 添加立方体的滚动动画\n2. 控制下落的缓动函数，及落地的震荡"
},
{
"path": "3d/3d-glowing-rotate-text.md",
"chars": 2612,
"preview": "## 3D 光影变换文字效果\n\n利用 CSS 3D 实现光影变换文字效果。\n\n### 关键点\n\n+ 给父元素 `div` 设置 `transform-style: preserve-3d`，给每个 `<h1>` 设定不同的 `transla"
},
{
"path": "3d/3d-infinite-maze.md",
"chars": 3397,
"preview": "## 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非原创，原效果链接：[Persp"
},
{
"path": "3d/3d-line.md",
"chars": 1998,
"preview": "## 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.c"
},
{
"path": "3d/3d-maze.md",
"chars": 2068,
"preview": "## 3D 迷宫线条特效\r\n\r\n3D 迷宫线条特效。\r\n\r\n在这里 [使用线性渐变实现类迷宫图形](./background/bg-linear-gradient-maze.md)，利用线性渐变实现了一个简单的类似迷宫的线条图像，这里再实现"
},
{
"path": "3d/3d-rope-swing.md",
"chars": 4848,
"preview": "## 3D 绳动画\n\n非常好的学习 CSS 3D 的动画 DEMO。\n\nHTML：\n\n```HTML\n<input type=\"checkbox\" id=\"toggle\" checked />\n<section id=\"sect\">\n\t<l"
},
{
"path": "3d/3d-spiral-number.md",
"chars": 2840,
"preview": "## 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// "
},
{
"path": "3d/3d-text-debut.md",
"chars": 2403,
"preview": "## 3D 文字出场动画\n\n利用 CSS 3D 实现文字出场特效\n\n### 关键点\n\n1. 父元素、子元素设置 `transform-style: preserve-3d`\n2. 用 `span` 元素的两个伪元素复制两个相同的字，利用 `"
},
{
"path": "3d/parallax-3d-1.md",
"chars": 2528,
"preview": "## 借助 translate3d\\perspective 实现 3D 视差效果\r\n\r\n借助 translate3d\\perspective 实现 3D 视差效果。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以不同"
},
{
"path": "3d/parallax-3d-2.md",
"chars": 2312,
"preview": "## 借助 translate3d\\perspective 实现 3D 视差效果2\r\n\r\n借助 translate3d\\perspective 实现 3D 视差效果2。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以"
},
{
"path": "3d/parallax-3d-translate.md",
"chars": 2047,
"preview": "## 使用 translateZ 实现滚动视差\r\n\r\n使用 `translateZ` 实现滚动视差。\r\n\r\n视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网"
},
{
"path": "README.md",
"chars": 16126,
"preview": "\n\n这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\n\n## 在线预览\n\n[Online P"
},
{
"path": "_sidebar.md",
"chars": 10237,
"preview": "# CSS-Inspiration \n\n + [引言](./init.md) \n\n\n## 布局（Layout） \n\n+ [实现水平垂直居中最便捷的方法](./layout/best-way-to-center-element.md) \n+ "
},
{
"path": "animation/animation-button-border.md",
"chars": 3685,
"preview": "## 借助transition-delay实现按钮border动画效果\r\n\r\n借助 `transition-delay` 实现按钮 border hover 时的动画效果。\r\n\r\n\r\n### 关键点\r\n\r\n+ 给容器每一边的 border "
},
{
"path": "animation/animation-curve.md",
"chars": 1426,
"preview": "## CSS实现曲线运动\r\n\r\nCSS实现曲线运动。\r\n\r\nHTML：\r\n\r\n```html\r\n<div class=\"g-container\">\r\n <div class=\"g-ball\"></div>\r\n</div>\r\n```\r\n"
},
{
"path": "animation/animation-delay-control-text-effect.md",
"chars": 3825,
"preview": "## 利用 animation-delay 实现文字渐现效果\n\n利用 animation-delay 实现文字渐现效果\n\n### 关键点\n\n1. hover 状态下和非 hover 状态下的 `transition-duration` 是不"
},
{
"path": "animation/animation-delay-wavy.md",
"chars": 2088,
"preview": "## 利用动画延迟实现波浪动画\n\n利用动画延迟实现的波浪效果。\n\n### 关键点\n\n给每个子元素设定一个高度变化的动画，同时按顺序给每个元素设定一个不同时间的负延迟即可，就可以得到一个简单的波浪效果。\n\n关于本效果的详情，你可以查看这篇文章"
},
{
"path": "animation/animation-direction.md",
"chars": 2443,
"preview": "## scale 配合 transfrom-origin 精准控制动画方向\r\n\r\nscale 配合 transfrom-origin 精准控制动画方向。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[妙用 scale 与 tr"
},
{
"path": "animation/animation-play-state.md",
"chars": 2217,
"preview": "## CSS 巧妙控制动画行进\r\n\r\nCSS 巧妙控制动画行进。\r\n\r\n其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/"
},
{
"path": "animation/animation-rotate.md",
"chars": 1717,
"preview": "## 正负旋转相消动画\r\n\r\n正负旋转相消动画。\r\n\r\n### 关键点\r\n\r\n利用了两个容器相向旋转，其中具体的一些细节，的可以看看我的这篇文章：\r\n\r\n[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.co"
},
{
"path": "assets/css/highlight.css",
"chars": 1436,
"preview": "/*\r\nOriginal highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>\r\n*/\r\n\r\n.hljs {\r\n display: block;\r\n "
},
{
"path": "assets/css/index.css",
"chars": 4174,
"preview": "\r\nbody {\r\n font-family: lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, Wen"
},
{
"path": "assets/css/prism-line-numbers.css",
"chars": 845,
"preview": "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\np"
},
{
"path": "assets/js/highlight.js",
"chars": 1227,
"preview": "Prism.languages.scss=Prism.languages.extend(\"css\",{comment:{pattern:/(^|[^\\\\])(?:\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*)/,lookbehind:!0"
},
{
"path": "assets/js/index.js",
"chars": 5368,
"preview": "const gitalkConfig = {\r\n clientID: '38238cb03b9966294d48',\r\n clientSecret: '2550a359e8369c93d7dd1259f9db3984a117387f',"
},
{
"path": "assets/js/md5.js",
"chars": 3767,
"preview": "!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"
},
{
"path": "assets/js/prism-line-number.js",
"chars": 4604,
"preview": "(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 * Plu"
},
{
"path": "background/background-css-property-tv-noise.md",
"chars": 1404,
"preview": "## 利用渐变及 CSS Property 实现 TV 噪音动画\n\n利用渐变及 CSS Property 实现 TV 电视雪花屏的噪音动画。\n\n### 关键点\n\nCSS @property，它的出现，极大的增强的 CSS 的能力！\n\n关于本"
},
{
"path": "background/bg-attachment-frosted-glass.md",
"chars": 2226,
"preview": "## 使用 background-attachment 实现毛玻璃效果\r\n\r\n使用 background-attachment，filter: blur() 实现毛玻璃效果。\r\n\r\n毛玻璃效果的重点在于，需要虚化的底图部分是会随页面 res"
},
{
"path": "background/bg-attachment-scroll-shadow.md",
"chars": 2051,
"preview": "## 使用 background-attachment 实现滚动阴影\r\n\r\n这里，我们借助 `background-attachment: srcoll` 和 `background-attachment: local` 两个属性，在滚动初"
},
{
"path": "background/bg-clip-text-shine.md",
"chars": 2247,
"preview": "## background-clip 实现流光文字效果\r\n\r\n使用 `background-clip: text` 实现流光文字效果。\r\n\r\n### 关键点\r\n\r\n背景中有个属性为 background-clip， 其作用就是设置元素的背景"
},
{
"path": "background/bg-conic-border-effect.md",
"chars": 1617,
"preview": "## 角向渐变线条 border 效果\n\n角向渐变实现线条 border 效果。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现线条 border 效果\n\nHTML：\n\n```html\n<div>"
},
{
"path": "background/bg-conic-border-light-effect.md",
"chars": 1737,
"preview": "## 角向渐变实现光影 border 效果\n\n角向渐变实现光影 border 效果。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现光影 border 效果\n\nHTML：\n\n```html\n<di"
},
{
"path": "background/bg-conic-circle-loading.md",
"chars": 1811,
"preview": "## 角向渐变实现纯 CSS 圆环进度图\n\n角向渐变实现纯 CSS 圆环进度图。\n\n### 关键点\n\n+ 利用角向渐变 `conic-gradient` 与**遮罩**实现拖尾的圆环进度条\n\nHTML：\n\n```html\n<div clas"
},
{
"path": "background/bg-conic-gradient-animation.md",
"chars": 1957,
"preview": "## 角向渐变配合混合模式实现炫酷光影效果\r\n\r\n角向渐变配合混合模式实现炫酷光影效果。\r\n\r\n角向渐变，又叫角向渐变，属于正在路上的标准，具体的，可以看看我的这篇文章：\r\n\r\n[神奇的 conic-gradient 角向渐变](https"
},
{
"path": "background/bg-conic-gradient-repeating-pattern.md",
"chars": 733,
"preview": "## 一行代码重复角向渐变代码实现酷炫图案\r\n\r\n一行代码重复角向渐变代码实现酷炫图案。\r\n\r\n具体的，可以看看我的这篇文章：\r\n\r\n[一行 CSS 代码的魅力](https://github.com/chokcoco/iCSS/issue"
},
{
"path": "background/bg-linear-arrow.md",
"chars": 1305,
"preview": "## 线性渐变实现箭头符号\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"
},
{
"path": "background/bg-linear-border-effect.md",
"chars": 1779,
"preview": "## 线性渐变线条 border 效果\n\n线性渐变线条 border 效果。\n\n### 关键点\n\n+ 利用线性渐变 `conic-gradient` 与**遮罩**实现线条 border 效果\n\n> 这里利用角向渐变也是可以的。\n\nHTML"
},
{
"path": "background/bg-linear-gradient-maze.md",
"chars": 1138,
"preview": "## 线性渐变实现类迷宫图形\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"
},
{
"path": "background/bg-linear-inscribed.md",
"chars": 1073,
"preview": "## 线性渐变实现内切角\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<div class=\"notching\"></div>"
},
{
"path": "background/bg-linear-progress-bar.md",
"chars": 1472,
"preview": "## 线性渐变模拟进度条运动\r\n\r\n使用线性渐变模拟进度条运动。\r\n\r\n### 知识点\r\n\r\n核心难点在于动画的首尾如何衔接上，需要自己尝试计算。\r\n\r\nHTML：\r\n\r\n```html\r\n<div class=\"bar\"></div>\r\n"
},
{
"path": "background/bg-linear-scroll-indicator.md",
"chars": 1383,
"preview": "## 线性渐变实现滚动进度条\r\n\r\n使用线性渐变实现滚动进度条。\r\n\r\n滚动下面的页面，你会看到顶部实现了进度条的效果，这里其实是个简单的利用了线性渐变的障眼法。\r\n\r\n具体可以看看这篇文章：\r\n\r\n[不可思议的纯 CSS 滚动进度条效果]"
},
{
"path": "background/bg-linear-stripe.md",
"chars": 1169,
"preview": "## 线性渐变背景实现条纹字\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<p>"
},
{
"path": "background/bg-linear-underline.md",
"chars": 2525,
"preview": "## 线性渐变实现下划线\r\n\r\n利用线性渐变实现下划线。与传统下划线相比，渐变实现的下划线有更多的可操控性。\r\n\r\n+ 可控下划线距离底部的距离\r\n+ 可控下划线的粗细\r\n+ 可控下划线的颜色\r\n+ 可添加动画&渐变\r\n\r\nHTML：\r\n\r"
},
{
"path": "background/bg-mask-image.md",
"chars": 1716,
"preview": "## mask-image 实现图片变幻\r\n\r\nmask-image 实现图片变幻。\r\n\r\n主要借助了 mask-image，一张图片上应用 `mask-image: linear-gradient(0, rgba(0, 0, 0, 1) "
},
{
"path": "background/bg-mask-text-show.md",
"chars": 1458,
"preview": "## mask-image 实现文字的渐现\r\n\r\n使用 `mask` 实现文字的渐现效果。\r\n\r\n### 关键点\r\n\r\n使用 mask 最重要结论就是：**添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transpare"
},
{
"path": "background/bg-mask-transition.md",
"chars": 1603,
"preview": "## mask-image 实现图片转场变换\n\nmask-image 实现图片转场变换。\n\n详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)\n\nHTML：\n\n```h"
},
{
"path": "background/bg-radial-btn-click-bubble.md",
"chars": 4601,
"preview": "## 使用多重背景单标签实现气泡按钮点击效果\r\n\r\n使用多重背景单标签实现气泡按钮点击效果\r\n\r\n### 关键点\r\n\r\n+ 通过多重背景实现（radial-gradient），并用 animation 改变 background-posit"
},
{
"path": "background/bg-radial-coupon.md",
"chars": 2801,
"preview": "## 径向渐变实现优惠券波浪造型\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<div class=\"coupon\">50"
},
{
"path": "background/bg-radial-focus.md",
"chars": 1415,
"preview": "## 径向渐变实现舞台灯光聚焦效果\r\n\r\n使用渐变实现舞台灯光聚焦效果。\r\n\r\n### 关键点\r\n\r\n+ 利用径向渐变生成一个从透明到黑色蒙板的占据整个屏幕的渐变\r\n+ 为了让中心聚焦处可移动动画，整个渐变的容器需要比屏幕更大\r\n\r\n\r\nH"
},
{
"path": "background/bg-wave-border.md",
"chars": 1508,
"preview": "## 渐变实现波浪边框\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<body></body>\r\n```\r\n\r\nSCSS：\r\n`"
},
{
"path": "background/bg-wave-underline.md",
"chars": 3098,
"preview": "## 渐变实现波浪下划线\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``"
},
{
"path": "background/bg-wave.md",
"chars": 1645,
"preview": "## 渐变实现波浪效果/波浪进度框\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<div class=\"wave"
},
{
"path": "background/css-property-variable-bg-change-animation.md",
"chars": 3996,
"preview": "## 利用 CSS @property 探寻渐变的极限效果\n\n利用 CSS @property 探寻渐变的极限效果\n\n### 关键点\n\n利用了 CSS @property，不了解的可以猛击本文：[CSS @property，让不可能变可能]"
},
{
"path": "background/repeating-radial-background-artistic-bg.md",
"chars": 2719,
"preview": "## 多重径向渐变实现美妙的艺术背景\n\n利用多重径向渐变实现美妙的艺术背景。\n\n### 关键点\n\n多重径向渐变的单位数量级要非常的小！\n\n关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://"
},
{
"path": "blendmode/blend-color-set.md",
"chars": 1798,
"preview": "## 使用 mix-blend-mode 实现图片任意颜色赋值技术\r\n\r\n使用 `mix-blend-mode` 实现图片任意颜色赋值技术。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix "
},
{
"path": "blendmode/blend-douyin-logo.md",
"chars": 2810,
"preview": "## 使用 mix-blend-mode 实现抖音 LOGO\r\n\r\n使用 mix-blend-mode 实现抖音 LOGO。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend "
},
{
"path": "blendmode/blend-loading.md",
"chars": 2953,
"preview": "## mix-blend-mode 实现 loading 效果\r\n\r\nmix-blend-mode 实现 loading 效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blen"
},
{
"path": "blendmode/blend-mix-img.md",
"chars": 1803,
"preview": "## 图片的类抖音 LOGO 晕眩效果\r\n\r\n使用 background-blend-mode | mix-blend-mode 实现类抖音LOGO晕眩效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode`"
},
{
"path": "blendmode/blend-mix.md",
"chars": 8465,
"preview": "## mix-blend-mode MIX\r\n\r\n使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。\r\n\r\n当然，也可以搭配 filter 中的 blur 和 contr"
},
{
"path": "blendmode/blend-rotate.md",
"chars": 2049,
"preview": "## mix-blend-mode 实现颜色叠加旋转动画\r\n\r\nmix-blend-mode 实现颜色叠加旋转动画。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意"
},
{
"path": "blendmode/blend-text-glitch.md",
"chars": 2997,
"preview": "## 类抖音 LOGO 文字故障效果\r\n\r\n使用 mix-blend-mode 实现类抖音 LOGO 文字故障效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意"
},
{
"path": "blendmode/blend-text-shine.md",
"chars": 2005,
"preview": "## 使用 mix-blend-mode 实现光影文字效果\r\n\r\n使用 mix-blend-mode 实现光影文字效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中"
},
{
"path": "blendmode/blend-water-wave.md",
"chars": 2380,
"preview": "## CSS WAVE MOVE(惊艳的水波效果)\r\n\r\n使用 mix-blend-mode 实现惊艳的水波效果。\r\n\r\nCSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译"
},
{
"path": "blendmode/mix-multi-graidient-bg.md",
"chars": 2782,
"preview": "## mix-blend-mode 叠加多重渐变背景\n\n使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。\n\nCSS3 新增了一个很有意思的属性 -- `mix-blen"
},
{
"path": "blendmode/mixblend-text-wave-effect.md",
"chars": 1659,
"preview": "## 使用混合模式叠加实现文字波浪效果\n\n使用混合模式叠加实现文字波浪效果\n\n### 关键点\n\n传统的文字镂空展示背景更多的是使用 `background-clip`。\n\n但是本效果文字的背景是动画效果，无法使用 `background-c"
},
{
"path": "border/border-chargin.md",
"chars": 3279,
"preview": "## 活用 border-radius, 实现充电动画\r\n\r\n活用 border-radius, 实现充电动画\r\n\r\n关于本效果的详细信息，可以看看这篇文章：\r\n\r\n[巧用 CSS 实现酷炫的充电动画](https://github.com"
},
{
"path": "border/border-image-animate.md",
"chars": 1886,
"preview": "## 利用 border-image 实现动态边框\r\n\r\n利用 border-image 实现动态边框。\r\n\r\n利用 `border-image`，我们也可以实现一些有意思的边框动画。关于 `border-image`，有一篇非常好的讲解文"
},
{
"path": "border/border-line-animation.md",
"chars": 1898,
"preview": "## 活用 border-radius, 单标签线条动画\r\n\r\n活用 border-radius, 单标签线条动画。\r\n\r\n### 关键点 \r\n\r\n这个效果，其实更多的还是因为 filter 的 blur 和 contrast 滤镜。\r\n\r"
},
{
"path": "border/border-line-drop-animation.md",
"chars": 4769,
"preview": "## 使用 border-radius 的变化模拟绳子下坠\r\n\r\n使用 border-radius 的变化模拟绳子下坠。\r\n\r\n### 关键点 \r\n\r\n很有意思的一个小动画，精髓在于使用 border-radius 的变化模拟绳子下坠的感觉"
},
{
"path": "border/border-loading.md",
"chars": 1768,
"preview": "## border-radius变换实现loading效果\r\n\r\nborder-radius变换实现loading效果。\r\n\r\n------ \r\n\r\nHTML：\r\n\r\n```html\r\n<div></div>\r\n```\r\n\r\nSCSS：\r\n"
},
{
"path": "border/border-outline-symbol-add.md",
"chars": 1133,
"preview": "## 活用 outline 巧妙实现加号符号\r\n\r\n活用 outline 巧妙实现加号符号。\r\n\r\n惊为天人的一个小技巧，也许算是 `outline` 的一个bug，当向内收缩 `outline` 时，神奇的事情发生了。\r\n\r\n关于本效果的"
},
{
"path": "border/border-overflow-btn.md",
"chars": 1622,
"preview": "## 巧用 overflow 及实现边框线条动画\r\n\r\n巧用 overflow 及实现边框线条动画。\r\n\r\n借助 overflow 是实现 CSS 效果非常常见的手段。\r\n\r\nHTML：\r\n\r\n```html\r\n<div>Hover Me<"
},
{
"path": "border/border-typing.md",
"chars": 1133,
"preview": "## 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```ht"
},
{
"path": "border/border-wave-percent.md",
"chars": 1985,
"preview": "## 活用 border-radius, 实现波浪百分比图\r\n\r\n活用 border-radius, 实现波浪百分比图。\r\n\r\n### 关键点 \r\n\r\n+ 利用 border-radius 生成椭圆\r\n+ 并不是利用旋转的椭圆本身生成波浪效"
},
{
"path": "border/border-wave.md",
"chars": 1890,
"preview": "## 活用 border-radius, 实现波浪动画\r\n\r\n活用 border-radius, 实现波浪动画。\r\n\r\n### 关键点 \r\n\r\n+ 利用 border-radius 生成椭圆\r\n+ 并不是利用旋转的椭圆本身生成波浪效果，而是"
},
{
"path": "clippath/clippath-border-image.md",
"chars": 1698,
"preview": "## 使用 clip-path 和 border-image 实现圆角渐变边框\r\n\r\n使用 clip-path 和 border-image 实现圆角渐变边框。\r\n\r\n### border-image\r\n\r\n`border-image` 是"
},
{
"path": "clippath/clippath-border-line-radius.md",
"chars": 2060,
"preview": "## 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 属性可以创建一个只有元素的部分区域"
},
{
"path": "clippath/clippath-border-line.md",
"chars": 1659,
"preview": "## 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 属性可以创建一个只有元素的部分区域可以"
},
{
"path": "clippath/clippath-img-glitch.md",
"chars": 7228,
"preview": "## 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 属性可以创建一个只"
},
{
"path": "clippath/clippath-word-crack.md",
"chars": 3061,
"preview": "## 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 属性可以创建一个只有元素的部分区域可以"
},
{
"path": "cssdoodle/bg-artist-clippath.md",
"chars": 5459,
"preview": "## CSS-Doodle clip-path & drop-shadow 实现图案艺术\n\nCSS-Doodle clip-path & drop-shadow 实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](ht"
},
{
"path": "cssdoodle/bg-artist-pattern-2.md",
"chars": 4032,
"preview": "## CSS-Doodle 利用不同图形线条实现图案艺术 2\n\nCSS-Doodle 利用不同图形线条实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/cs"
},
{
"path": "cssdoodle/bg-artist-pattern.md",
"chars": 5185,
"preview": "## CSS-Doodle 利用不同图形线条实现图案艺术\n\nCSS-Doodle 利用不同图形线条实现图案艺术\n\n### CSS-doodle\n\n[css-doodle](https://github.com/css-doodle/css-"
},
{
"path": "cssdoodle/bg-mask-composite.md",
"chars": 2013,
"preview": "## CSS-Doodle background + mask 实现万花筒效果\n\nCSS-Doodle background + mask 实现万花筒效果\n\n### CSS-doodle\n\n[css-doodle](https://gith"
},
{
"path": "cssdoodle/bg-mask-mix.md",
"chars": 3019,
"preview": "## CSS-Doodle background + mask 实现条纹艺术背景\n\nCSS-Doodle background + mask 实现条纹艺术背景\n\n### CSS-doodle\n\n[css-doodle](https://gi"
},
{
"path": "cssdoodle/fish-seaweed.md",
"chars": 3588,
"preview": "## 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/c"
},
{
"path": "cssdoodle/spotlight.md",
"chars": 2022,
"preview": "## 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-do"
},
{
"path": "cssdoodle/sunset.md",
"chars": 2526,
"preview": "## 夏日城市夕阳图🌇\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 "
},
{
"path": "filter/filter-ball-loading.md",
"chars": 2410,
"preview": "## 小球穿梭放大loading动画\r\n\r\n小球穿梭放大loading动画。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效"
},
{
"path": "filter/filter-ball-through.md",
"chars": 1739,
"preview": "## 小球穿梭效果\r\n\r\n小球穿梭效果。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter: cont"
},
{
"path": "filter/filter-blur-constrast.md",
"chars": 1759,
"preview": "## 使用 filter:blur | filter:constrast 生成特殊融合效果\r\n\r\n使用 filter:blur | filter:constrast 生成特殊融合效果。\r\n\r\n### 关键点 \r\n\r\n本例子中两个单独的滤镜拿"
},
{
"path": "filter/filter-fire-2.md",
"chars": 3380,
"preview": "## 使用 filter:blur | filter:constrast 生成火焰效果2\r\n\r\n使用 filter:blur | filter:constrast 生成火焰效果。\r\n\r\n### 关键点 \r\n\r\n本 Demo 详细信息可阅读："
},
{
"path": "filter/filter-fire.md",
"chars": 2943,
"preview": "## 使用 filter:blur | filter:constrast 生成火焰效果\r\n\r\n使用 filter:blur | filter:constrast 生成火焰效果。\r\n\r\n### 关键点 \r\n\r\n本例子中两个单独的滤镜拿出来，它"
},
{
"path": "filter/filter-ghost.md",
"chars": 2111,
"preview": "## 单标签纯CSS实现幽灵动画\r\n\r\n单标签纯CSS实现幽灵动画。\r\n\r\n### 关键点 \r\n\r\n\r\n+ filter: blur() | filter: contrast() 的配合使用\r\n+ 单标签的限制，所以多重渐变也发挥了很重要的"
},
{
"path": "filter/filter-hue-rotate-color.md",
"chars": 884,
"preview": "## 使用 hue-rotate 实现渐变背景动画\r\n\r\n使用 hue-rotate 实现渐变背景动画。\r\n\r\n这种方法应该是实现渐变背景动画的比较好的方法。\r\n\r\nHTML：\r\n\r\n```HTML\r\n<div></div>\r\n```\r\n\r"
},
{
"path": "filter/filter-mix.md",
"chars": 2215,
"preview": "## 滤镜及混合模式混搭特效\r\n\r\n使用滤镜及混合模式混搭特效。\r\n\r\n本例子中用到了：\r\n\r\n+ filter: contrast()\r\n+ filter: brightness() \r\n+ filter: blur()\r\n+ backg"
},
{
"path": "filter/filter-polygon-shadow.md",
"chars": 1273,
"preview": "## 使用 drop-shadow 配合 clip-path 生成规则阴影\r\n\r\n使用 drop-shadow 配合 clip-path 生成规则阴影。\r\n\r\n### 关键点 \r\n\r\n使用 clip-path 可以很好的使用 SVG 的一些"
},
{
"path": "filter/filter-shadow.md",
"chars": 2014,
"preview": "## 使用 filter:blur 生成彩色阴影\r\n\r\n通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成的阴影通常只能是单色或者同色系的。"
},
{
"path": "filter/filter-single-div-water-drop.md",
"chars": 1649,
"preview": "## 单标签实现滴水效果\r\n\r\n单标签实现滴水效果。\r\n\r\n### 关键点 \r\n\r\n主要使用了 blur、contrast 两个滤镜，它们的作用分别是：\r\n\r\n+ filter: blur()： 给图像设置高斯模糊效果。\r\n+ filter"
},
{
"path": "filter/use-filter-blur-enhance-text-3d-effect.md",
"chars": 2370,
"preview": "## 利用 filter:blur 增强文字的 3D 效果\n\n利用 filter:blur 增强文字的 3D 效果\n\n### 关键点\n\n1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一"
},
{
"path": "generate-content.js",
"chars": 2915,
"preview": "const fs = require('fs');\nconst path = require(\"path\");\nconst filePath = path.resolve(__dirname, './');\n\nconst ONLINE_UR"
},
{
"path": "hashmap.js",
"chars": 4541,
"preview": "module.exports = {\"best-way-to-center-element\":true,\"double-wing-layout\":true,\"grid-clip-path-gta5-poster\":true,\"holy-gr"
},
{
"path": "index.html",
"chars": 3391,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <title>cssinspirationguide - csc inspiration gui"
},
{
"path": "init.md",
"chars": 616,
"preview": "\r\n\r\n\r\n\r\n希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 "
},
{
"path": "layout/best-way-to-center-element.md",
"chars": 1433,
"preview": "## 实现水平垂直居中最便捷的方法\r\n\r\n实现水平垂直居中最便捷的方法\r\n\r\n### 难点\r\n\r\n核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。\r\n\r\n原因如下，在 `dispaly: flex` "
},
{
"path": "layout/double-wing-layout.md",
"chars": 1613,
"preview": "## 双飞翼布局\r\n\r\n最常见的双飞翼布局实现方法。\r\n\r\n### 需求\r\n\r\n双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列"
},
{
"path": "layout/grid-clip-path-gta5-poster.md",
"chars": 4024,
"preview": "## grid 布局配合 clip-path 实现 GTA5 封面\n\n利用 grid 布局配合 clip-path 实现 GTA5 封面。\n\n### 关键点\n\n+ grid 实现不规则的网格布局\n+ clip-path 控制每个格子的形状\n"
},
{
"path": "layout/holy-grail-layout-flex.md",
"chars": 1436,
"preview": "## flex 实现圣杯布局\r\n\r\n使用 flex 实现的圣杯布局。\r\n\r\n### 需求\r\n\r\n圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n圣杯布局与双飞翼布局的不同之处，圣杯布局"
},
{
"path": "layout/holy-grail-layout.md",
"chars": 1523,
"preview": "## 圣杯布局\r\n\r\n最常见的圣杯布局实现方法。\r\n\r\n### 需求\r\n\r\n圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。\r\n\r\n圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没"
},
{
"path": "layout/masonry-layout-colum.md",
"chars": 1514,
"preview": "## CSS实现瀑布流布局（column-count）\r\n\r\n本例使用 CSS column 实现瀑布流布局\r\n\r\n关键点，\r\n\r\n+ column-count: 元素内容将被划分的最佳列数\r\n+ break-inside: 避免在元素内部"
},
{
"path": "layout/masonry-layout-flex.md",
"chars": 1869,
"preview": "## 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"
},
{
"path": "layout/masonry-layout-grid.md",
"chars": 2166,
"preview": "## CSS实现瀑布流布局（display: grid）\r\n\r\n本例使用 CSS grid 实现瀑布流布局\r\n\r\n关键点，\r\n\r\n+ 使用 `grid-template-columns`、`grid-template-rows` 分割行列\r"
},
{
"path": "layout/multi-column-contour.md",
"chars": 3251,
"preview": "## 6种实现多列等高的方法\r\n\r\n多种实现多列等高的方法\r\n\r\n### 需求\r\n\r\n多列等高，要求左右两列高度自适应且一样，分别设置不同背景色\r\n\r\n### 实现\r\n\r\n1. `padding + margin + overflow` 实"
},
{
"path": "layout/multi-row-or-column.md",
"chars": 2382,
"preview": "## 多方案实现跨行或跨列布局\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-floa"
},
{
"path": "layout/single-column-isometric.md",
"chars": 3605,
"preview": "## 多种方案实现单列等宽，其他多列自适应均匀布局\r\n\r\n多种方案实现单列等宽，其他多列自适应均匀布局\r\n\r\n### 需求\r\n\r\n共4列，首列宽度固定为200px，其余3列均分剩余宽度，每列间距10px\r\n\r\n### 实现\r\n\r\n+ `di"
},
{
"path": "layout/use-margin-auto-to-simulate-align-self.md",
"chars": 2071,
"preview": "## 使用 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核心点在于使用"
},
{
"path": "layout/use-margin-auto-to-simulate-space-between.md",
"chars": 1764,
"preview": "## 使用 margin auto 实现 flex 下的 justify-content: space-between\r\n\r\n使用 margin auto 实现 flex 下的 justify-content: space-between\r"
},
{
"path": "others/1px-line.md",
"chars": 3198,
"preview": "## retina屏下的1px线的实现\r\n\r\nretina屏下的1px线的实现，适用于 dpr：2 的情况。\r\n\r\n+ 法一：使用渐变实现，使用两种颜色填充 1px 宽内容\r\n+ 法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放\r\n"
},
{
"path": "others/border-inset-text.md",
"chars": 3592,
"preview": "## fieldset 与 legend 实现边框嵌套文字\r\n\r\n利用 `<fieldset>` 与 `<legend>` 实现边框嵌套文字效果\r\n\r\n[生僻标签 fieldset 与 legend 的妙用](https://github."
},
{
"path": "others/css-resize-switch-picture.md",
"chars": 2084,
"preview": "## 利用 resize 实现图片切换预览功能\n\n利用 resize 实现图片切换预览功能 。\n\n### 关键点\n\n+ CSS `resize` 属性允许你控制一个元素的可调整大小性\n+ 配合 `resize` 实现子元素的动态宽度\n\nHT"
},
{
"path": "others/digital-char-rain-animation.md",
"chars": 3463,
"preview": "## 暗黑字符雨动画\n\n纯 CSS 实现的暗黑字符雨动画。\n\n### 关键点\n\n+ 文字的竖排\n+ 使用 CSS 实现随机字符串的选取\n+ 使用 CSS 实现打字效果\n+ 增加光影与透明度变化\n\n详细信息，可以看看我的这篇文章：\n\n[【We"
},
{
"path": "others/others-chrome-tab.md",
"chars": 3321,
"preview": "## 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状"
},
{
"path": "others/others-equiangular-spiral.md",
"chars": 3608,
"preview": "## 等角螺线\r\n\r\n等角螺线。\r\n\r\n等角螺线，一个很有意思的几何图形。\r\n\r\n等角螺线的臂的距离以几何级数递增。 等角螺线是自我相似的；这即是说，等角螺线经放大后可与原图完全相同。 等角螺线的渐屈线和垂足曲线都是等角螺线。 从原点到等角"
},
{
"path": "others/others-huawei-charging.md",
"chars": 3658,
"preview": "## 华为充电动画\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```"
},
{
"path": "others/others-night.md",
"chars": 3931,
"preview": "## 夜晚居室图\r\n\r\n夜晚居室图（不知道叫什么好）\r\n\r\n### 关键点\r\n\r\n1. 使用了渐变完成了墙面窗户和地板上窗户的倒影\r\n2. 使用了 transform 变换完成了视觉上的效果\r\n3. 使用了 shadow 实现了门缝透光效果"
},
{
"path": "others/others-pie.md",
"chars": 2060,
"preview": "## 纯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<div class=\"container\">\r\n"
},
{
"path": "others/pointer-follow-2.md",
"chars": 2282,
"preview": "## 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"
},
{
"path": "others/pointer-follow-3.md",
"chars": 2571,
"preview": "## 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详细信息，"
},
{
"path": "others/pointer-follow.md",
"chars": 1939,
"preview": "## 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 实现鼠标"
},
{
"path": "others/reflect-artist.md",
"chars": 1801,
"preview": "## 利用 box-reflect 实现艺术图形\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect"
},
{
"path": "others/reflect-btn-effect.md",
"chars": 2425,
"preview": "## 利用 box-reflect 实现光影按钮\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect"
},
{
"path": "others/reflect-text-effect.md",
"chars": 3728,
"preview": "## 利用 box-reflect 实现 3D 照片墙倒影效果\r\n\r\n[`-webkit-box-reflect`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-"
},
{
"path": "others/word-break-move.md",
"chars": 2291,
"preview": "## 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// "
},
{
"path": "others/word-break.md",
"chars": 2119,
"preview": "## 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模"
},
{
"path": "others/word-glitch.md",
"chars": 2600,
"preview": "## CSS文字故障效果\r\n\r\nCSS文字故障效果。\r\n\r\n### 关键点\r\n\r\n+ 利用了伪元素生成了文字的两个副本\r\n+ 视觉效果由位移、遮罩、混合模式完成\r\n+ 配色借鉴了抖音 LOGO 的风格\r\n\r\n详细信息可以看我的这篇文章：\r\n"
},
{
"path": "pesudo/pesudo-animation-control-hover.md",
"chars": 1560,
"preview": "## 伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:hover` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 使用 hover 伪类，在鼠标悬停在按钮上面时，控制动画样式的暂"
},
{
"path": "pesudo/pesudo-animation-control-target.md",
"chars": 1907,
"preview": "## 伪元素 target 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:target` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 如何接收点击事件：本例子最重要的核心便是使用 `:targe"
},
{
"path": "pesudo/pesudo-animation-control.md",
"chars": 1895,
"preview": "## 伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放\r\n\r\n伪元素 `:checked` 实现纯 CSS 方式控制动画的暂停与播放。\r\n\r\n### 关键点\r\n\r\n+ 使用 radio 标签的 `:checked` 伪类，加"
},
{
"path": "pesudo/pesudo-boundary-judge.md",
"chars": 2906,
"preview": "## 伪元素实现边界智能判断移动\r\n\r\n伪元素实现边界智能判断移动。\r\n\r\n\r\n\r\n### 关键点\r\n\r\n+ 利用了伪元素生成了 4 个三角形组成了一个正方形，通过 hover 哪个透明的三角形来判断用户的操作方位。\r\n\r\n当然，在本题**"
},
{
"path": "pesudo/pesudo-bubble.md",
"chars": 2648,
"preview": "## 伪元素+border实现气泡对话框\r\n\r\n伪元素+border实现气泡对话框。\r\n\r\n### 关键点\r\n\r\n+ 使用 border 生成三角形形状。\r\n+ 使用 `filter: drop-shadow` 生成整体阴影。\r\n\r\nHTM"
},
{
"path": "pesudo/pesudo-focus-checked.md",
"chars": 2454,
"preview": "## 使用 checked 伪类实现纯 CSS Tab 切换\r\n\r\n使用 `:checked` 来实现 tab 切换功能。\r\n\r\n实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是：\r\n\r\n+ 如"
},
{
"path": "pesudo/pesudo-focus-target.md",
"chars": 2442,
"preview": "## 使用 target 伪类实现纯 CSS Tab 切换\r\n\r\n使用 `:target` 来实现 tab 切换功能。\r\n\r\n实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是：\r\n\r\n+ 如何接"
},
{
"path": "pesudo/pesudo-focus-within-placeholder-shown.md",
"chars": 2321,
"preview": "## placeholder-shown 配合 focus-within 实现 input 输入交互\r\n\r\n使用 `:placeholder-shown` && `:focus-within` 实现 input 输入交互。\r\n\r\n+ `:f"
},
{
"path": "pesudo/pesudo-focus-within.md",
"chars": 2186,
"preview": "## focus-within switch tab\r\n\r\n使用 `:focus-within` 来实现 tab 切换功能。\r\n\r\n`:focus-within` 它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获"
},
{
"path": "pesudo/pesudo-juejin.md",
"chars": 3155,
"preview": "## 伪元素 focus-within 纯 CSS 方式实现掘金登陆特效\r\n\r\n伪元素 `:focus-within` 纯 CSS 方式实现掘金登陆特效。\r\n\r\n![](https://user-images.githubuserconte"
},
{
"path": "pesudo/pesudo-loading-content.md",
"chars": 1113,
"preview": "## 伪元素实现打点 loading 效果\r\n\r\n伪元素实现打点 loading 效果。\r\n\r\n### 关键点\r\n\r\n+ 非常有意思，借助动画操控伪元素的 content\r\n\r\n一看就懂：\r\n\r\nHTML：\r\n```html\r\n<p>加载中"
},
{
"path": "pesudo/pesudo-loading-line.md",
"chars": 1944,
"preview": "## 伪元素遮罩实现线条 loading 效果\r\n\r\n伪元素遮罩实现线条 loading 效果\r\n\r\n### 关键点\r\n\r\n这个动画非常有意思，核心点在于如何使用 CSS 实现弧形线条的长短变化。\r\n\r\n核心在于遮罩。\r\n\r\n一看就懂：\r\n"
},
{
"path": "pesudo/pesudo-not-2.md",
"chars": 1357,
"preview": "## 使用:not()伪类控制特殊边框样式\r\n\r\n使用`:not()`伪类控制特殊边框样式。\r\n\r\n### 用法 \r\n\r\nCSS 否定伪类，:not(X)，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。"
},
{
"path": "pesudo/pesudo-not.md",
"chars": 2637,
"preview": "## 使用:not()伪类实现弹窗背景元素模糊\r\n\r\n使用:not()伪类实现弹窗背景元素模糊。\r\n\r\n### 用法 \r\n\r\nCSS 否定伪类，:not(X)，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元"
},
{
"path": "shadow/circle-loading.md",
"chars": 2176,
"preview": "## Box-shadow实现圆环进度条动画\r\n\r\nBox-shadow实现圆环进度条动画。这个真的算是奇技淫巧。\r\n\r\n### 关键点\r\n\r\n+ 圆环进度条的移动本质上是阴影顺序延时移动的结果。\r\n\r\nHTML：\r\n\r\n```html\r\n"
},
{
"path": "shadow/inscribed-angle.md",
"chars": 3051,
"preview": "## 使用box-shadow/渐变实现内切角\r\n\r\n使用box-shadow/渐变实现内切角。\r\n\r\n### 关键点\r\n\r\n+ 阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果\r\n+ 阴影实现缺"
},
{
"path": "shadow/neon-effect-3d-text.md",
"chars": 3426,
"preview": "## Neon Effect 3D TEXT\n\n利用阴影实现的 3D 氖灯效果。\n\n### 关键点\n\n+ 利用 `text-shadow` 叠加多层文字阴影\n+ 利用 animation 动态改变阴影颜色\n\nHTML：\n```\n<div c"
},
{
"path": "shadow/neon-shadow-light.md",
"chars": 2545,
"preview": "## box-shadow实现霓虹氖灯文字效果\r\n\r\n### 关键点\r\n\r\n+ 多重阴影的过渡效果与白色字体的叠加\r\n\r\nHTML：\r\n\r\n```html\r\n<div>\r\n <p class=\"pink\">PINK</p>\r\n</di"
},
{
"path": "shadow/opacity-wrap.md",
"chars": 983,
"preview": "## 使用 box-shadow 实现半透明遮罩\r\n\r\n使用 box-shadow 实现半透明遮罩，在某些特殊场景下能发挥很好的作用\r\n\r\nHTML：\r\n\r\n```html\r\n<p>背景文字背景文字背景文字背景文字</p>\r\n<div>Ho"
},
{
"path": "shadow/projection-long-shadow.md",
"chars": 1828,
"preview": "## 线性渐变模拟长阴影\r\n\r\nCSS 实现线性渐变模拟长阴影。\r\n\r\n### 关键点\r\n\r\n+ 借用了元素的两个伪元素 \r\n+ 通过渐变色填充两个伪元素，再通过位移、变换放置在合适的位置\r\n\r\n![](https://user-image"
},
{
"path": "shadow/projection-one-sided-shadow.md",
"chars": 1028,
"preview": "## 单侧投影\r\n\r\nCSS 实现单侧投影。\r\n\r\n### 关键点\r\n\r\n+ 外 box-shadow 前四个参数：x 偏移值、y 偏移值 、模糊半径、扩张半径。\r\n+ 单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或"
},
{
"path": "shadow/projection-solid-shadow.md",
"chars": 2925,
"preview": "## 立体投影\r\n\r\nCSS 实现立体投影。\r\n\r\n### 关键点\r\n\r\n+ 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作。\r\n+ 颜色的运用也很重要，阴影的颜"
},
{
"path": "shadow/projection-word-solid-shadow-ii.md",
"chars": 1580,
"preview": "## 线性渐变配合阴影实现条纹立体阴影条纹字\r\n\r\n线性渐变配合阴影实现条纹立体阴影条纹字。\r\n\r\n### 关键点\r\n\r\n+ 借用了元素的两个伪元素 \r\n+ 伪元素可以通过 `attr` 读取元素属性\r\n+ 通过生成***白色->透明色**"
},
{
"path": "shadow/projection-word-solid-shadow.md",
"chars": 1592,
"preview": "## 立体文字阴影\r\n\r\nCSS 实现立体文字阴影。\r\n\r\n### 关键点\r\n\r\n+ 立体文字阴影的关键点在于多层 text-shadow 的叠加\r\n+ 这里合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码"
},
{
"path": "shadow/relief-style-btn.md",
"chars": 3406,
"preview": "## 浮雕风格按钮\n\n利用 `box-shadow` 实现浮雕风格的按钮。\n\n### 关键点\n\n+ `box-shadow` 与颜色的合理搭配\n\nHTML：\n\n```HTML\n<form>\n <div class=\"segment\">\n "
},
{
"path": "shadow/shadow-ani-ii.md",
"chars": 3138,
"preview": "## box-shadow实现背景动画 2\r\n\r\nbox-shadow实现背景动画 。\r\n\r\n### 关键点\r\n\r\n+ 当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影 \r\n+ box-s"
},
{
"path": "shadow/shadow-ani.md",
"chars": 3244,
"preview": "## box-shadow实现背景动画 \r\n\r\nbox-shadow实现背景动画 。\r\n\r\n### 关键点\r\n\r\n+ 当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影 \r\n+ box-sh"
},
{
"path": "shadow/single-div-douyin-logo.md",
"chars": 2706,
"preview": "## 单标签实现抖音LOGO\r\n\r\n单标签实现抖音LOGO。\r\n\r\n### 关键点\r\n\r\n+ 主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影 \r\n+ drop-shadow 只能是单层阴影，所以另一层阴"
},
{
"path": "shadow/single-div-fork.md",
"chars": 1446,
"preview": "## 单标签实现叉子图形\r\n\r\n纯 CSS 单标签实现叉子图形。\r\n\r\n### 关键点\r\n\r\n+ 使用多重阴影的特性，完成叉子的头部部分。\r\n\r\n\r\nHTML：\r\n\r\n```html\r\n<div></div>\r\n```\r\n\r\nSCSS：\r\n"
},
{
"path": "shadow/single-div-ie-logo.md",
"chars": 1479,
"preview": "## 单标签借助 inset shadow 实现IE LOGO\r\n\r\n单标签借助 inset shdow 实现IE LOGO。\r\n\r\n### 关键点\r\n\r\n+ 关键在于类似星环的外围一圈使用了内阴影实现 \r\n\r\nHTML：\r\n\r\n```ht"
},
{
"path": "svg/alipay-ar-scan.md",
"chars": 1831,
"preview": "## 支付宝AR扫福动画\r\n\r\n支付宝AR扫福动画。\r\n\r\n### 关键点\r\n\r\n使用了 `stroke-dasharray` 和 `stroke-dashoffset` 控制线条动画。\r\n\r\n具体的可以看看我的这篇文章：\r\n\r\n[【Web"
},
{
"path": "svg/svg-arc-word.md",
"chars": 1320,
"preview": "## SVG绘制弧形文字\r\n\r\nSVG绘制弧形文字。\r\n\r\nHTML：\r\n\r\n```html\r\n<div class=\"circle-word\">\r\n <svg width=\"400px\" height=\"300px\" viewBox"
},
{
"path": "svg/svg-btn-hover.md",
"chars": 5170,
"preview": "## SVG 按钮 hover 线条动画\r\n\r\nSVG 按钮 hover 线条动画。\r\n\r\n### 关键点\r\n\r\n使用了 `stroke-dasharray` 和 `stroke-dashoffset` 控制线条动画。\r\n\r\n具体的可以看看"
},
{
"path": "svg/svg-dropshadow-line-neon-effect.md",
"chars": 2035,
"preview": "## SVG 配合 drop-shadow 实现线条光影效果\n\nSVG 配合 drop-shadow 实现线条光影效果。\n\n详见：[CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果](https://github.com"
},
{
"path": "svg/svg-feTurbulence-harmony-logo.md",
"chars": 2884,
"preview": "## 利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO\n\n利用 SVG feTurbulence 滤镜及 filter: blur 实现鸿蒙 LOGO\n\n### 关键点\n\n+ filter 滤镜的"
},
{
"path": "svg/svg-feturbulence-btn-glitch.md",
"chars": 2736,
"preview": "## SVG feTurbulence 滤镜实现故障按钮点击效果\n\n使用 SVG feTurbulence 滤镜实现故障按钮点击效果 。\n\n### 关键点\n\nSVG `<feTurbulence>` 滤镜能够实现半透明的烟熏或波状图像。 通"
},
{
"path": "svg/svg-feturbulence-clouds.md",
"chars": 1324,
"preview": "## SVG feTurbulence 滤镜实现云彩效果 \n\n使用 SVG feTurbulence 滤镜实现云彩效果 。\n\n### 关键点\n\nSVG `<feTurbulence>` 滤镜能够实现半透明的烟熏或波状图像。 通常用于实现一些"
},
{
"path": "svg/svg-line-text-2.md",
"chars": 2203,
"preview": "## SVG 文字 hover 线条动画 2\r\n\r\nSVG 文字 hover 线条动画\r\n\r\n### 关键点\r\n\r\n使用了 `stroke-dasharray` 和 `stroke-dashoffset` 控制线条动画。\r\n\r\n具体的可以看"
},
{
"path": "svg/svg-line-text.md",
"chars": 1548,
"preview": "## SVG 文字 hover 线条动画\r\n\r\nSVG 文字 hover 线条动画。\r\n\r\n### 关键点\r\n\r\n使用了 `stroke-dasharray` 和 `stroke-dashoffset` 控制线条动画。\r\n\r\n具体的可以看看"
},
{
"path": "text/text-underline-wave.md",
"chars": 1532,
"preview": "## 使用text-decoration实现波浪效果\r\n\r\n使用text-decoration实现波浪效果。\r\n\r\n### text-decoration\r\n\r\n一个非常有意思的 CSS 属性。\r\n\r\n`text-decoration` 这"
}
]
About this extraction
This page contains the full source code of the chokcoco/CSS-Inspiration GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 183 files (458.3 KB), approximately 167.0k tokens, and a symbol index with 36 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.