` 设定不同的 `translateZ()` 来达到文字的 3D 效果
+ 辅助一些旋转，色彩变化给效果增色
HTML：
```
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
```
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);
}
```
效果如下：
================================================
FILE: 3d/3d-infinite-maze.md
================================================
## 3D 无限延伸视角动画
3D 无限延伸视角动画。
### 关键点
这个实现起来非常有难度。
+ 四面墙壁的无限延伸的感觉塑造
+ 视角的变动
+ 远处最深处的遮罩
非原创，原效果链接：[Perspective Origin Tunnel Animation](https://codepen.io/jkantner/pen/zXwyGr)
HTML：
```HTML
```
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);
}
}
```
效果如下：
================================================
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);
}
}
```
效果如下：
================================================
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;
}
}
```
效果如下：
================================================
FILE: 3d/3d-rope-swing.md
================================================
## 3D 绳动画
非常好的学习 CSS 3D 的动画 DEMO。
HTML：
```HTML
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
```
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
```
效果如下：
================================================
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);
}
}
```
效果如下：
================================================
FILE: 3d/3d-text-debut.md
================================================
## 3D 文字出场动画
利用 CSS 3D 实现文字出场特效
### 关键点
1. 父元素、子元素设置 `transform-style: preserve-3d`
2. 用 `span` 元素的两个伪元素复制两个相同的字，利用 `translateZ()` 让它们在 Z 轴间隔一定距离
3. 添加简单的旋转、透明度、字体颜色变化
可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。
HTML：
```
C
S
S
3
D
```
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%);
}
}
```
效果如下：
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
Glowing 3D TEXT
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
- swing
See the Pen CSS 3D TEXT by Chokcoco (@Chokcoco) on CodePen.
================================================ 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： ```htmlJust hover around
translateZ 3D
translateZ(-1)
translateZ(-2)
translateZ(-3)
Both
Rectangle
Circle
```
SCSS：
```scss
body {
background: #000;
}
div {
position: relative;
width: 200px;
height: 64px;
line-height: 64px;
box-shadow: inset 0 0 0 3px #fff;
margin: 50px auto;
text-align: center;
color: #fff;
font-size: 32px;
cursor: pointer;
transition: color 1s;
}
div::before,
div::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
box-sizing: border-box;
// transition: width .5s, height .5s;
// transition-delay: .5s, 0s;
border: 3px solid transparent;
}
.both:hover {
color: #00e2ff;
&::before {
transition: width .5s, height .5s, border-bottom-color 0s;
transition-delay: .5s, 0s, .5s;
width: 200px;
height: 64px;
border-left: 3px solid #00e2ff;
border-bottom: 3px solid #00e2ff;
}
&::after {
transition: width .5s, height .5s, border-right-color .5s;
transition-delay: 0s, .5s, .5s;
width: 200px;
height: 64px;
border-top: 3px solid #00e2ff;
border-right: 3px solid #00e2ff;
}
}
.rectangle {
&::after {
top: unset;
left: unset;
right: 0;
bottom: 0;
}
&:hover {
color: #00e2ff;
&::before {
transition: width .25s, height .25s, border-bottom-color 0s;
transition-delay: .25s, 0s, .25s;
width: 200px;
height: 64px;
border-left: 3px solid #00e2ff;
border-bottom: 3px solid #00e2ff;
}
&::after {
transition: width .25s, height .25s, border-top-color .25s;
transition-delay: 0.75s, 0.5s, 0.75s;
width: 200px;
height: 64px;
border-top: 3px solid #00e2ff;
border-right: 3px solid #00e2ff;
}
}
}
.circle {
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
&::before,
&::after{
border-radius: 50%;
}
&:hover {
color: #00e2ff;
&::before {
width: 120px;
height: 120px;
border-color: #00e2ff;
transition: border-top-color .25s linear,
border-right-color .25s linear,
border-bottom-color .25s linear,
border-left-color .25s linear;
transition-delay: 0s, .25s, .5s, .75s;
}
&::after {
width: 120px;
height: 120px;
border-top: 3px solid #00e2ff;
transform: rotate(270deg);
transition: transform .75s linear;
transition-delay: 0s;
}
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: animation/animation-curve.md
================================================
## CSS实现曲线运动
CSS实现曲线运动。
HTML：
```html
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam.
``` 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 按钮触发效果）： ================================================ 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)); } } ``` 效果如下： ================================================ FILE: animation/animation-direction.md ================================================ ## scale 配合 transfrom-origin 精准控制动画方向 scale 配合 transfrom-origin 精准控制动画方向。 其中具体的一些细节，的可以看看我的这篇文章： [妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/63) HTML： ```HTMLHover Me
```
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;
}
```
效果如下：
------
当然，其实这只是其中一种方案。
不使用 `transform-orign` + `scale` 也是可以实现的，直接使用定位的方案如下：
HTML：
```HTML
Hover Me
```
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;
}
```
================================================
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` 可以对代码进行编辑）：
================================================
FILE: animation/animation-rotate.md
================================================
## 正负旋转相消动画
正负旋转相消动画。
### 关键点
利用了两个容器相向旋转，其中具体的一些细节，的可以看看我的这篇文章：
[你所不知道的 CSS 动画技巧与细节](https://www.cnblogs.com/coco1s/p/7443263.html)
HTML：
```html
正负旋转相消3D动画
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 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 wrapped inside (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 nor the 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
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class 'line-numbers' to the
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('');
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：
```
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
}
@property --length {
syntax: '';
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;
}
}
```
效果如下：
================================================
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
使用
background-attachment: fixed
filter: bulr()
实现毛玻璃效果
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-attachment-scroll-shadow.md
================================================
## 使用 background-attachment 实现滚动阴影
这里，我们借助 `background-attachment: srcoll` 和 `background-attachment: local` 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。
详见这篇文章：[使用纯 CSS 实现滚动阴影效果](https://juejin.cn/post/6913725602428600334)
HTML：
```html
日期
姓名
地址
2021-01-01
XXXXX
DDDDD
```
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;
}
```
效果如下（滚动表格即可看到效果）：
================================================
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
Lorem ipsum dolor
```
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;
}
}
```
效果如下：
================================================
FILE: background/bg-conic-border-effect.md
================================================
## 角向渐变线条 border 效果
角向渐变实现线条 border 效果。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现线条 border 效果
HTML：
```html
```
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;
}
}
```
效果如下：
================================================
FILE: background/bg-conic-border-light-effect.md
================================================
## 角向渐变实现光影 border 效果
角向渐变实现光影 border 效果。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现光影 border 效果
HTML：
```html
```
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;
}
}
```
效果如下：
================================================
FILE: background/bg-conic-circle-loading.md
================================================
## 角向渐变实现纯 CSS 圆环进度图
角向渐变实现纯 CSS 圆环进度图。
### 关键点
+ 利用角向渐变 `conic-gradient` 与**遮罩**实现拖尾的圆环进度条
HTML：
```html
```
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);
}
}
```
效果如下：
================================================
FILE: background/bg-conic-gradient-animation.md
================================================
## 角向渐变配合混合模式实现炫酷光影效果
角向渐变配合混合模式实现炫酷光影效果。
角向渐变，又叫角向渐变，属于正在路上的标准，具体的，可以看看我的这篇文章：
[神奇的 conic-gradient 角向渐变](https://www.cnblogs.com/coco1s/p/7079529.html)
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
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);
}
```
效果如下：
================================================
FILE: background/bg-linear-arrow.md
================================================
## 线性渐变实现箭头符号
线性渐变实现箭头符号。
### 关键点
+ 利用多重线性渐变拼凑箭头形状
+ 恰当运用 `background-position`，`background-size`
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-linear-border-effect.md
================================================
## 线性渐变线条 border 效果
线性渐变线条 border 效果。
### 关键点
+ 利用线性渐变 `conic-gradient` 与**遮罩**实现线条 border 效果
> 这里利用角向渐变也是可以的。
HTML：
```html
```
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;
}
}
```
效果如下：
================================================
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%);
}
}
```
效果如下：
================================================
FILE: background/bg-linear-inscribed.md
================================================
## 线性渐变实现内切角
线性渐变实现内切角。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-linear-progress-bar.md
================================================
## 线性渐变模拟进度条运动
使用线性渐变模拟进度条运动。
### 知识点
核心难点在于动画的首尾如何衔接上，需要自己尝试计算。
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-linear-scroll-indicator.md
================================================
## 线性渐变实现滚动进度条
使用线性渐变实现滚动进度条。
滚动下面的页面，你会看到顶部实现了进度条的效果，这里其实是个简单的利用了线性渐变的障眼法。
具体可以看看这篇文章：
[不可思议的纯 CSS 滚动进度条效果](https://github.com/chokcoco/iCSS/issues/43)
HTML：
```html
不可思议的纯 CSS 进度条效果
....
OK，继续。这个效......
```
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;
}
```
效果如下：
================================================
FILE: background/bg-linear-stripe.md
================================================
## 线性渐变背景实现条纹字
利用线性渐变背景实现条纹字。
### 关键点
重点在于渐变色白色与透明色的重复渐变。
结合其他 CSS 属性有很多作用，譬如立体条纹字。
HTML：
```html
所有字体都是条纹字
利用线性渐变背景实现
重点在于渐变色白色与透明色的重复渐变
结合其他CSS属性有很多作用，譬如立体条纹字
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-linear-underline.md
================================================
## 线性渐变实现下划线
利用线性渐变实现下划线。与传统下划线相比，渐变实现的下划线有更多的可操控性。
+ 可控下划线距离底部的距离
+ 可控下划线的粗细
+ 可控下划线的颜色
+ 可添加动画&渐变
HTML：
```html
.underline1-ajkpys
.underline2-ajkpys
.underline3-ajkpys
```
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` 可以对代码进行编辑）：
================================================
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
```
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%);
}
}
}
```
效果如下：
================================================
FILE: background/bg-mask-text-show.md
================================================
## mask-image 实现文字的渐现
使用 `mask` 实现文字的渐现效果。
### 关键点
使用 mask 最重要结论就是：**添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明**。
详细的可以看看这篇文章：[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)
HTML：
```html
Hello Mask
Hello Mask
```
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%;
}
}
```
效果如下：
================================================
FILE: background/bg-mask-transition.md
================================================
## mask-image 实现图片转场变换
mask-image 实现图片转场变换。
详见：[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)
HTML：
```html
```
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%);
}
}
```
效果如下：
================================================
FILE: background/bg-radial-btn-click-bubble.md
================================================
## 使用多重背景单标签实现气泡按钮点击效果
使用多重背景单标签实现气泡按钮点击效果
### 关键点
+ 通过多重背景实现（radial-gradient），并用 animation 改变 background-position。
HTML：
```html
```
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%;
}
}
```
效果如下：
================================================
FILE: background/bg-radial-coupon.md
================================================
## 径向渐变实现优惠券波浪造型
渐变实现优惠券波浪造型。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
50
50
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-radial-focus.md
================================================
## 径向渐变实现舞台灯光聚焦效果
使用渐变实现舞台灯光聚焦效果。
### 关键点
+ 利用径向渐变生成一个从透明到黑色蒙板的占据整个屏幕的渐变
+ 为了让中心聚焦处可移动动画，整个渐变的容器需要比屏幕更大
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-wave-border.md
================================================
## 渐变实现波浪边框
渐变实现波浪边框。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
FILE: background/bg-wave-underline.md
================================================
## 渐变实现波浪下划线
利用渐变实现波浪下划线。
### 核心点
+ 重点一在于如何将两段 `radial-gradient` 无缝衔接组成波浪
+ 重点二在于动画行进过程如何首尾衔接
HTML：
```html
渐变实现波浪
Hover Me
```
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;
}
}
```
效果如下：
================================================
FILE: background/bg-wave.md
================================================
## 渐变实现波浪效果/波浪进度框
使用渐变实现波浪效果/波浪进度框。
### 关键点
+ 利用多重线性渐变及单个元素可以设置多层渐变叠加实现
HTML：
```html
```
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` 可以对代码进行编辑）：
================================================
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: '';
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%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
### 径向渐变
CSS：
```CSS
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '';
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%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
### 角向渐变
CSS：
```CSS
html, body {
width: 100%;
height: 100%;
}
@property --per {
syntax: '';
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%;
}
}
```
效果如下（鼠标悬停，可以暂停动画）：
================================================
FILE: background/repeating-radial-background-artistic-bg.md
================================================
## 多重径向渐变实现美妙的艺术背景
利用多重径向渐变实现美妙的艺术背景。
### 关键点
多重径向渐变的单位数量级要非常的小！
关于本效果的详细描述，你可以查看这篇文章：[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)
HTML：
```
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
}
@property --length {
syntax: '';
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;
}
}
```
效果如下：
================================================
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
原图
红色
灰色
渐变色
```
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` 可以对代码进行编辑）：
================================================
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
```
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` 可以对代码进行编辑）：
================================================
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
```
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` 可以对代码进行编辑）：
================================================
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
```
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` 可以对代码进行编辑）：
================================================
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);
}
}
```
效果如下：
### Demo MIX2
HTML：
```HTML
```
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);
}
}
```
效果如下：
### 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); }
}
}
```
效果如下：
================================================
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);
}
}
}
```
效果如下：
================================================
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
```
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` 可以对代码进行编辑）：
================================================
FILE: blendmode/blend-text-shine.md
================================================
## 使用 mix-blend-mode 实现光影文字效果
使用 mix-blend-mode 实现光影文字效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### 关键点
+ 利用混合模式 `mix-blend-mode: multiply` 生成渐变色的文字。
+ 利用 `mix-blend-mode: color-dodge` 混合模式，给文字加上点缀，实现美妙的光影效果
详细的可以看看这篇文章：[奇思妙想 CSS 文字动画 ](https://github.com/chokcoco/iCSS/issues/101)
HTML：
```html
Magic Text
```
SCSS：
```scss
.g-container {
margin: auto;
}
p {
position: relative;
font-size: 12vw;
line-height: 16vw;
// color: #9a9acc;
overflow: hidden;
-webkit-text-stroke: 3px #7272a5;
&::before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
mix-blend-mode: multiply;
}
&::after {
content: "";
background: radial-gradient(circle, #fff, #000 50%);
background-size: 25% 25%;
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
mix-blend-mode: color-dodge;
animation: mix 8s linear infinite;
}
}
@keyframes mix {
to {
transform: translate(50%, 50%);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: blendmode/blend-water-wave.md
================================================
## CSS WAVE MOVE(惊艳的水波效果)
使用 mix-blend-mode 实现惊艳的水波效果。
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
```
SCSS：
```scss
$circles: ();
$move: ();
$n: 8;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@for $i from 0 through $n {
$start-x: randomNum(100, 1) * 1vw;
$start-y: randomNum(100, 1) * 1vh;
$end-x: randomNum(150, -50) * 1vw;
$end-y: randomNum(150, -50) * 1vh;
$circles: append(
$circles,
radial-gradient(
randomNum(75, 25) * 1vw,
#ddd 0%,
#666 10%,
#fff,
#000,
#999
)
$start-x $start-y,
comma
);
$move: append($move, $end-x $end-y, comma);
}
html,
body {
width: 100%;
height: 100%;
overflow:hidden;
}
div {
position: absolute;
top:0;
left: 0;
right: 0;
bottom :0;
background: $circles;
animation: waveMove 15s infinite linear alternate;
background-blend-mode: difference;
filter: blur(2px) hue-rotate(0);
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #03a9f4;
mix-blend-mode: color-burn;
}
}
@keyframes waveMove {
100% {
background-position: $move;
filter: blur(5px) hue-rotate(30deg);
}
}
```
效果如下：
================================================
FILE: blendmode/mix-multi-graidient-bg.md
================================================
## mix-blend-mode 叠加多重渐变背景
使用 background-blend-mode | mix-blend-mode 可以实现很多很有意思的动画融合效果。
CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
### mix-blend-mode
除了 `mix-blend-mode` ，CSS 还提供一个 `background-blend-mode` 。也就是背景的混合模式。
+ 可以是背景图片与背景图片的混合，
+ 也可以是背景图片和背景色的之间的混合。
利用混合模式，我们可以尽情发挥想象。
### 多重渐变背景配合多重混合模式
原理大致是这样：
HTML：
```
```
SCSS：
```scss
html, body {
position: relative;
width: 100%;
height: 100%;
display: flex;
padding-bottom: 100px;
}
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div:nth-child(1) {
background: linear-gradient(
238deg,
rgb(130, 255, 0) 0%,
rgb(0, 84, 166) 100%
);
animation: move 12s infinite linear;
}
div:nth-child(2) {
background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);
mix-blend-mode: overlay;
animation: move 6s infinite linear;
}
div:nth-child(3) {
background: linear-gradient(238deg, rgb(200, 255, 255) 48%, rgb(3, 0, 151) 100%);
mix-blend-mode: multiply;
animation: move 6s infinite linear;
}
div:nth-child(4) {
background: radial-gradient(
100% 85% at 0% 100%,
rgb(0, 0, 0) 0%,
rgb(0, 131, 255) 50%,
rgb(255, 0, 0) 100%
);
mix-blend-mode: difference;
animation: move 6s infinite linear;
}
div:nth-child(5) {
background: radial-gradient(
100% 225% at 0% 100%,
rgb(255, 0, 0) 0%,
rgb(66, 255, 0) 100%
);
mix-blend-mode: difference;
animation: move 6s infinite linear;
}
div:nth-child(6) {
background: radial-gradient(
100% 140% at 100% 0%,
rgb(0, 134, 62) 0%,
rgb(0, 239, 255) 50%,
rgb(0, 113, 186) 100%
);
mix-blend-mode: overlay;
animation: move 6s infinite linear;
}
@keyframes move {
0% {
filter: unset;
}
100% {
filter: hue-rotate(360deg);
}
}
```
效果如下：
================================================
FILE: blendmode/mixblend-text-wave-effect.md
================================================
## 使用混合模式叠加实现文字波浪效果
使用混合模式叠加实现文字波浪效果
### 关键点
传统的文字镂空展示背景更多的是使用 `background-clip`。
但是本效果文字的背景是动画效果，无法使用 `background-clip` 进行穿透，这里通过混合模式 `mix-blend-mode` 的特性实现。
HTML：
```
TEXT WAVE
```
SCSS：
```scss
html, body {
width: 100%;
height: 100%;
display: flex;
}
.g-container {
margin: auto;
}
p {
position: relative;
font-size: 120px;
font-weight: bold;
background: #fff;
color: #000;
overflow: hidden;
&::before,
&::after {
content: "";
position: absolute;
top: -923px;
left: 50%;
width: 2000px;
height: 2000px;
border-radius: 45% 48% 43% 47%;
transform: translate(-50%, -50%);
background: rgba(3, 169, 244, .85);
animation: rotate 10s infinite linear;
z-index: 1;
mix-blend-mode: lighten;
}
&::after {
border-radius: 43% 47% 44% 48%;
animation: rotate 10s infinite .5s linear;
}
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
```
效果如下：
================================================
FILE: border/border-chargin.md
================================================
## 活用 border-radius, 实现充电动画
活用 border-radius, 实现充电动画
关于本效果的详细信息，可以看看这篇文章：
[巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75)
HTML：
```html
```
SCSS：
```scss
.container {
position: relative;
width: 140px;
margin: auto;
}
.header {
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
transform: translate(-50%, -10px);
border-radius: 5px 5px 0 0;
background: rgba(255, 255, 255, .88);
}
.battery-copy {
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden;
}
.battery {
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.22);
background: #fff;
z-index: 1;
&::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 80%;
background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
border-radius: 0px 0px 5px 5px;
box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg);
}
}
.g-wave {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, .8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
animation: move 10s linear infinite;
}
.g-wave:nth-child(2) {
border-radius: 38% 46% 43% 47%;
transform: translate(-50%, 0) rotate(-135deg);
}
.g-wave:nth-child(3) {
border-radius: 42% 46% 37% 40%;
transform: translate(-50%, 0) rotate(135deg);
}
@keyframes charging {
50% {
box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
}
95% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
}
}
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
```
效果如下：
================================================
FILE: border/border-image-animate.md
================================================
## 利用 border-image 实现动态边框
利用 border-image 实现动态边框。
利用 `border-image`，我们也可以实现一些有意思的边框动画。关于 `border-image`，有一篇非常好的讲解文章 -- [border-image 的正确用法](https://aotu.io/notes/2016/11/02/border-image/index.html)，本文不对基本定义做过多的讲解。
如果我们有这样一张图：
便可以利用 `border-image-slice` 及 `border-image-repeat` 的特性，得到类似的边框图案：
```CSS
div {
width: 200px;
height: 120px;
border: 24px solid;
border-image: url(image-url);
border-image-slice: 32;
border-image-repeat: round;
}
```
在这个基础上，可以随便改变元素的高宽，如此便能扩展到任意大小的容器边框中：
[CodePen Demo -- border-image Demo](https://codepen.io/Chokcoco/pen/oNzJeKd)
接着，在这篇文章 -- [How to Animate a SVG with border-image](https://css-tricks.com/how-to-animate-a-svg-with-border-image/) 中，还讲解了一种利用 `border-image` 的边框动画，非常的酷炫。
与上面例子不一样的是，我们只需要让我们的图案，动起来，就是我们需要这样一个背景图（掘金不支持 SVG 动图，[原图地址](https://skullctf.com/images/skull-border.svg)）：
那么，我们也就能得到运动的边框图，代码完全一样，但是，边框是运动的：
效果如下：
================================================
FILE: border/border-line-animation.md
================================================
## 活用 border-radius, 单标签线条动画
活用 border-radius, 单标签线条动画。
### 关键点
这个效果，其实更多的还是因为 filter 的 blur 和 contrast 滤镜。
然后通过旋转 `border-radius` 四个角值不同的 div 得到。
----
HTML：
```html
```
SCSS：
```scss
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #000;
filter: blur(5px) contrast(20);
&::before {
position: absolute;
content: "";
background: #000;
top: 0;
left: 0;
right: 0;
height: 20vh;
z-index: 10;
}
}
div {
position: relative;
width: 30vmin;
height: 30vmin;
margin: 30vh auto;
// border: 1vmin solid #fff;
border-radius: 46% 42% 47% 44%;
background: linear-gradient(#fff, #9c27b0);
transform: scale(15) translate(0, -13vh) rotate(0deg);
animation: rotate 10s infinite linear alternate;
&::before {
content: "";
position: absolute;
width: 99%;
height: 99%;
background: #000;
border-radius: 46% 42% 47% 44%;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
}
@keyframes rotate {
100% {
transform: scale(10) translate(0, -15vh) rotate(360deg);
}
}
@keyframes move {
50% {
left: 50%;
right: 49.95%;
}
100% {
left: 90%;
right: 9.7%;
}
}
```
效果如下：
================================================
FILE: border/border-line-drop-animation.md
================================================
## 使用 border-radius 的变化模拟绳子下坠
使用 border-radius 的变化模拟绳子下坠。
### 关键点
很有意思的一个小动画，精髓在于使用 border-radius 的变化模拟绳子下坠的感觉。
----
HTML：
```html
```
SCSS：
```scss
.g-container {
position: relative;
width: 400px;
height: 100vh;
margin: auto;
// display: flex;
}
.g-line {
position: absolute;
left: 200px;
width: 100px;
height: 100px;
border-radius: 0 0 0 120px;
border: 1px solid #000;
border-top: none;
// border-bottom: none;
border-right: none;
transform-origin: 0 0;
animation: lineMove 6s ease-in-out infinite;
transform: rotate(-90deg);
// transform: rotate(15deg);
// height: 290px;
// width: 50px;
// border-radius: 0 0 0 90%;
}
.g-man {
position: absolute;
top: 240px;
left: 170px;
width: 1px;
height: 40px;
background: #000;
opacity: 0;
animation: manShow 6s infinite ease-in-out;
&:before {
position: absolute;
content: "";
top: -100%;
left: -12px;
width: 25px;
height: 40px;
border-radius: 100%;
border: 1px solid #333;
animation: headrotate 6s infinite ease-in-out;
}
&::after {
content: "";
position: absolute;
left: 50%;
top: 110%;
transform: translate(-50%, 0) rotate(45deg);
transform-origin: center center;
width: 30px;
height: 30px;
border: 1px solid #333;
border-right: none;
border-bottom: none;
animation: footerShrink 6s infinite ease-in-out;
}
}
.g-hand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-20%, 0);
width: 50px;
height: 1px;
background: #000;
animation: manhandmove 6s infinite ease-in-out;
}
.g-ground {
position: absolute;
width: 120px;
height: 1px;
margin-top: 300px;
margin-left: 100px;
// background: #000;
animation: groundShow 6s infinite;
}
@keyframes lineMove {
15% {
width: 80px;
height: 270px;
}
27% {
border-radius: 0 0 0 90%;
}
35% {
width: 0px;
height: 290px;
border-radius: 0 0 0 90%;
transform: rotate(20deg);
}
45% {
width: 0px;
height: 300px;
border-radius: 0 0 0 0px;
transform: rotate(-8deg);
}
53% {
width: 0px;
height: 300px;
border-radius: 0 0 0 0px;
transform: rotate(3deg);
}
60% {
width: 0px;
height: 300px;
border-radius: 0 0 0 0px;
transform: rotate(0deg);
}
85% {
width: 0px;
height: 25px;
border-radius: 0 0 0 0px;
transform: rotate(0deg);
}
100% {
width: 0px;
height: 0px;
border-radius: 0 0 0 0px;
transform: rotate(0deg);
}
}
@keyframes groundShow {
29% {
background: opacity;
}
30% {
background: #000;
}
31.9% {
backgroun: #000;
}
32% {
background: opacity;
}
33.9% {
background: opacity;
}
34% {
background: #000;
}
60% {
background: #000;
}
61% {
background: opacity;
}
}
@keyframes manShow {
30% {
top: 240px;
opacity: 1;
}
60% {
top: 240px;
}
85% {
top: 0;
opacity: 1;
}
100% {
top: -10px;
opacity: 0;
}
}
@keyframes manhandmove{
55% {
transform: translate(-20%, 0) rotate(0deg);
}
60% {
transform: translate(-24%, 0) rotate(-30deg);
}
100% {
ransform: translate(-24%, 0) rotate(-30deg);
}
}
@keyframes headrotate {
55% {
transform: rotate(0);
}
60% {
transform: rotate(-25deg);
}
100% {
transform: rotate(-20deg);
}
}
```
效果如下：
================================================
FILE: border/border-loading.md
================================================
## border-radius变换实现loading效果
border-radius变换实现loading效果。
------
HTML：
```html
```
SCSS：
```scss
body {
background: #000;
}
div {
position: relative;
width: 35vmin;
height: 35vmin;
background: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
opacity: .8;
margin: 25vh auto;
border-radius: 35%;
animation: rotateMain 8s linear infinite;
}
div::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, #35a0f0 0%, #b233f0 100%);
opacity: .8;
box-shadow: 5px 5px 90px rgba(10, 102, 255, 0.5);
border-radius: 35%;
animation: rotateMain 8s linear 2s infinite;
}
div::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(60deg, #33580f 0%, #b7ee6d 100%);
opacity: .8;
box-shadow: 5px 5px 60px rgba(20, 102, 255, 0.3);
border-radius: 35%;
animation: rotateMain 8s linear 4s infinite;
z-index: -1;
}
@keyframes rotateMain {
50% {
transform: rotateZ(180deg);
border-radius: 50%;
}
100% {
transform: rotateZ(360deg);
border-radius: 35%;
}
}
```
效果如下：
================================================
FILE: border/border-outline-symbol-add.md
================================================
## 活用 outline 巧妙实现加号符号
活用 outline 巧妙实现加号符号。
惊为天人的一个小技巧，也许算是 `outline` 的一个bug，当向内收缩 `outline` 时，神奇的事情发生了。
关于本效果的详细信息，可以看看这篇文章：
[你所不知道的 CSS 负值技巧与细节](https://github.com/chokcoco/iCSS/issues/68)
> 更新于 2021/03/09，该效果于最新版本的 Chrome 已经被修复。
HTML：
```html
```
SCSS：
```scss
div {
width: 200px;
height: 200px;
background-color: #fc3;
box-sizing: border-box;
margin: auto;
}
div {
outline: 20px solid #000;
outline-offset: 10px;
animation: move 8s infinite linear;
}
@keyframes move {
50% {
outline-offset: -118px;
}
100% {
outline-offset: -118px;
}
}
```
效果如下：
================================================
FILE: border/border-overflow-btn.md
================================================
## 巧用 overflow 及实现边框线条动画
巧用 overflow 及实现边框线条动画。
借助 overflow 是实现 CSS 效果非常常见的手段。
HTML：
```html
Hover Me
```
SCSS：
```scss
div {
position: relative;
margin: auto;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
overflow: hidden;
&::after {
content: "Hover Me";
position: absolute;
top: 4px;
bottom: 4px;
right: 4px;
left: 4px;
line-height: 92px;
font-size: 24px;
background: #fff;
border: 2px solid yellowgreen;
cursor: pointer;
color: yellowgreen;
}
&::before {
content: "";
position: absolute;
top: 0px;
bottom: 0px;
right: -20px;
left: 0px;
background: #fff;
transform: rotateZ(-90deg) translate(-100%, -100%);
transform-origin: top left;
transition: transform .3s;
transition-timing-function: linear;
}
&:hover::before {
transform: rotateZ(0deg) translate(0%, -0%);
}
}
```
效果如下：
================================================
FILE: border/border-typing.md
================================================
## border-color 变换实现文字输入效果
border-color 变换实现文字输入效果。
### 关键点
+ 利用 border-right 实现光标闪烁
----
HTML：
```html
Pure CSS Typing animation.
```
SCSS：
```scss
body {
background: black;
color: #fff;
}
h1 {
font: bold 200% Consolas, Monaco, monospace;
border-right: 0.1em solid;
width: 16.5em;
width: 26ch;
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(26, end),
cursor-blink 0.3s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes cursor-blink {
50% {
border-color: transparent;
}
}
```
效果如下：
================================================
FILE: border/border-wave-percent.md
================================================
## 活用 border-radius, 实现波浪百分比图
活用 border-radius, 实现波浪百分比图。
### 关键点
+ 利用 border-radius 生成椭圆
+ 并不是利用旋转的椭圆本身生成波浪效果，而是利用它去切割背景，产生波浪的效果。
详见：[纯 CSS 实现波浪效果！](https://www.cnblogs.com/coco1s/p/7197662.html)
----
HTML：
```html
```
SCSS：
```scss
.container {
position: absolute;
width: 200px;
height: 200px;
padding: 5px;
border: 5px solid rgb(118, 218, 255);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
&::before,
&::after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
&::after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
```
效果如下：
================================================
FILE: border/border-wave.md
================================================
## 活用 border-radius, 实现波浪动画
活用 border-radius, 实现波浪动画。
### 关键点
+ 利用 border-radius 生成椭圆
+ 并不是利用旋转的椭圆本身生成波浪效果，而是利用它去切割背景，产生波浪的效果。
详见：[纯 CSS 实现波浪效果！](https://www.cnblogs.com/coco1s/p/7197662.html)
----
HTML：
```html
Pure Css Wave
```
SCSS：
```scss
body {
position: relative;
align-items: center;
min-height: 100vh;
background-color: rgb(118, 218, 255);
overflow: hidden;
&:before, &:after {
content: "";
position: absolute;
left: 50%;
min-width: 300vw;
min-height: 300vw;
background-color: #fff;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&:before {
bottom: 15vh;
border-radius: 45%;
animation-duration: 10s;
}
&:after {
bottom: 12vh;
opacity: .5;
border-radius: 47%;
animation-duration: 10s;
}
}
@keyframes rotate {
0% {
transform: translate(-50%, 0) rotateZ(0deg);
}
50% {
transform: translate(-50%, -2%) rotateZ(180deg);
}
100% {
transform: translate(-50%, 0%) rotateZ(360deg);
}
}
h2 {
position: relative;
color: #333;
z-index: 10;
text-align: center;
height: 100vh;
line-height: 140vh;
font-size: 8vw;
text-shadow: 3px 3px 2px #999;
}
```
效果如下：
================================================
FILE: clippath/clippath-border-image.md
================================================
## 使用 clip-path 和 border-image 实现圆角渐变边框
使用 clip-path 和 border-image 实现圆角渐变边框。
### border-image
`border-image` 是 CSS 规范 [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds-3/#border-images) (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。
[border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image)
### clip-path
一个非常有意思的 CSS 属性。
`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
### 关键点
因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过 `clip-path: inset()` 裁剪出带圆角的矩形元素。
HTML：
```HTML
```
SCSS：
```scss
.border-image-clip-path {
width: 200px;
height: 100px;
margin: auto;
border: 10px solid;
border-image: linear-gradient(45deg, gold, deeppink) 1;
clip-path: inset(0px round 10px);
animation: huerotate 6s infinite linear;
filter: hue-rotate(360deg);
}
@keyframes huerotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rorate(360deg);
}
}
```
效果如下：
================================================
FILE: clippath/clippath-border-line-radius.md
================================================
## clip-path 实现边框线条动画 2
clip-path 实现边框线条动画。
### clip-path
一个非常有意思的 CSS 属性。
`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
### 关键点
因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过动画 animation 将几个关键帧绘制出来即可。
HTML：
```HTML
Hello
```
SCSS：
```scss
div {
position: relative;
margin: auto;
width: 120px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
border: 2px solid gold;
border-radius: 10px;
background: gold;
transition: all .3s;
cursor: pointer;
&:hover {
filter: contrast(1.1);
}
&:active {
filter: contrast(0.9);
}
&::before,
&::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid gold;
transition: all .5s;
animation: clippath 3s infinite linear;
border-radius: 10px;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
.bg::before {
background: rgba(255, 215, 0, .5);
}
```
效果如下：
================================================
FILE: clippath/clippath-border-line.md
================================================
## clip-path 实现边框线条动画
clip-path 实现边框线条动画。
### clip-path
一个非常有意思的 CSS 属性。
`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
### 关键点
因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以通过动画 animation 将几个关键帧绘制出来即可。
HTML：
```HTML
Hello
示意图
```
SCSS：
```scss
div {
position: relative;
margin: auto;
width: 160px;
line-height: 160px;
text-align: center;
font-size: 24px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid gold;
transition: all .5s;
animation: clippath 3s infinite linear;
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 95% 0);
}
25% {
clip-path: inset(0 95% 0 0);
}
50% {
clip-path: inset(95% 0 0 0);
}
75% {
clip-path: inset(0 0 0 95%);
}
}
.bg::before {
background: rgba(255, 215, 0, .5);
}
```
效果如下：
================================================
FILE: clippath/clippath-img-glitch.md
================================================
## clip-path 实现图片的故障艺术风格动画
clip-path 实现图片的故障艺术风格动画。
### clip-path
一个非常有意思的 CSS 属性。
`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
### 关键点
+ 使用元素的伪元素复制两份图片副本，再使用 clip-path 对图片进行裁剪并且添加位移、变形、滤镜等等。
+ 动画部分代码太多了，有一半使用了 SASS 的循环函数随机生成
HTML：
```HTML
```
SCSS：
```scss
$img: "xxx";
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
div {
position: relative;
width: 658px;
height: 370px;
margin: auto;
background: url($img) no-repeat;
animation: main-img-hide 20s infinite step-end;
}
div::before,
div::after {
position: absolute;
width: 658px;
height: 370px;
top: 0;
left: 0;
background: inherit;
}
div::after {
content: "";
animation: glitch-one 20s infinite step-end;
}
div::before {
content: "";
animation: glitch-two 20s infinite 1s step-end;
}
@keyframes glitch-one {
@for $i from 20 to 30 {
#{$i / 2}% {
left: #{randomNum(200, -100)}px;
clip-path: inset(#{randomNum(150, 30)}px 0 #{randomNum(150, 30)}px);
}
}
15.5% {
clip-path: inset(10px 0 320px);
left: -20px;
}
16% {
clip-path: inset(10px 0 320px);
left: -10px;
opacity: 0;
}
45% {
opacity: 0.5;
left: -20px;
filter: hue-rotate(90deg) saturate(1.3);
}
45.5% {
left: 0px;
filter: invert(1);
}
46% {
clip-path: inset(150px 0 160px);
left: 15%;
}
46.5% {
clip-path: inset(20px 0 200px);
left: -10%;
transform: scale(1.1);
}
47% {
clip-path: inset(240px 0 20px);
left: -11%;
transform: scale(1.2);
}
47.5% {
clip-path: inset(20 0 20px);
left: 13%;
transform: scale(1.3);
filter: invert(0);
}
48% {
clip-path: inset(120 0 120px);
left: 15%;
transform: scale(1.1);
}
48.5% {
clip-path: inset(260px 0 10px);
left: -11%;
transform: scale(1.2);
filter: none;
}
49% {
clip-path: inset(5px 0 350px);
left: 11%;
transform: scale(1.3);
}
49.5% {
clip-path: inset(105px 0 210px);
left: 0%;
transform: scale(1.1);
}
50% {
clip-path: inset(175px 0 160px);
left: -11%;
}
50.5% {
clip-path: inset(95px 0 230px);
left: -14%;
transform: scale(1.2);
}
51% {
clip-path: inset(235px 0 12px);
left: -14%;
}
51.5% {
clip-path: inset(350px 0 7px);
left: -14%;
}
52% {
clip-path: inset(320px 0 27px);
left: -12%;
transform: scale(1.1);
}
52.5% {
clip-path: inset(190px 0 127px);
left: -11%;
transform: scale(1.3);
filter: hue-rotate(90deg) saturate(1.3);
}
54% {
clip-path: inset(20px 0 20px);
left: 12%;
transform: scale(1.1);
filter: none;
}
54% {
background-image: none;
}
}
@keyframes glitch-two {
@for $i from 40 to 50 {
#{$i / 2}% {
left: #{randomNum(200, -100)}px;
clip-path: inset(#{randomNum(180)}px 0 #{randomNum(180)}px);
}
}
25.5% {
clip-path: inset(10px 0 320px);
left: -20px;
}
26% {
clip-path: inset(10px 0 320px);
left: -10px;
opacity: 0;
}
45% {
opacity: 0.3;
left: -20px;
filter: hue-rotate(45deg) saturate(1.1);
}
45.5% {
left: 0px;
filter: invert(1.2);
}
46% {
clip-path: inset(50px 0 260px);
left: -12%;
}
46.5% {
clip-path: inset(120px 0 100px);
left: 8%;
transform: scale(1.2);
}
47% {
clip-path: inset(40px 0 300px);
left: 8%;
transform: scale(1.3);
}
47.5% {
clip-path: inset(220 0 70px);
left: -9%;
transform: scale(1.1);
filter: invert(1.1);
}
48% {
clip-path: inset(240px 0 120px);
left: 11%;
transform: scale(1.2);
}
48.5% {
clip-path: inset(0px 0 310px);
left: -12%;
transform: scale(1.2);
filter: none;
}
49% {
clip-path: inset(255px 0 50px);
left: 11%;
transform: scale(1.3);
}
49.5% {
clip-path: inset(10px 0 240px);
left: 6%;
transform: scale(1.1);
}
50% {
clip-path: inset(275px 0 90px);
left: -12%;
}
50.5% {
clip-path: inset(195px 0 90px);
left: 14%;
transform: scale(1.4);
}
51% {
clip-path: inset(35px 0 282px);
left: -14%;
}
51.5% {
clip-path: inset(350px 0 7px);
left: 14%;
}
52% {
clip-path: inset(20px 0 270px);
left: -12%;
transform: scale(1.1);
}
52.5% {
clip-path: inset(90px 0 227px);
left: -11%;
transform: scale(1.3);
filter: hue-rotate(150deg) saturate(1.3);
}
54% {
clip-path: inset(220px 0 100px);
left: 12%;
transform: scale(1.1);
filter: none;
}
54% {
background-image: none;
}
}
@keyframes main-img-hide {
5% {
filter: invert(1);
}
5.2% {
filter: none;
}
10% {
opacity: 0.5;
filter: grayscale(1);
}
11% {
filter: none;
opacity: 1;
}
45% {
opacity: 0.5;
filter: grayscale(1);
}
46% {
filter: none;
opacity: 1;
}
53.5% {
opacity: 0.5;
filter: grayscale(1);
}
54% {
filter: none;
opacity: 1;
}
54.5% {
opacity: 0.5;
filter: hue-rotate(30deg);
}
55% {
filter: none;
}
55.5% {
background-image: none;
filter: none;
opacity: 1;
}
56% {
background-image: url($img);
opacity: 0.5;
}
56.5% {
background-image: none;
}
57% {
background-image: url($img);
opacity: 0.8;
}
57.5% {
opacity: 0.3;
}
58% {
background-image: none;
}
}
```
效果如下：
================================================
FILE: clippath/clippath-word-crack.md
================================================
## clip-path 实现文字断裂效果
clip-path 实现文字断裂效果。
### clip-path
一个非常有意思的 CSS 属性。
`clip-path` CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。
[MDN - clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
### 关键点
核心思想是：使用元素的伪元素复制两份文本，再使用 clip-path 将元素本身、元素的两个伪元素分为3部分，分别对这3部分进行控制。
因为使用了 clip-path 裁剪后的元素，只有元素的剪切区域才能被显示，所以我们可以分别控制 3 个部分进行动画。
HTML：
```HTML
Text Crack
```
SCSS：
```scss
body, html
{
display: flex;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
font-family: sans-serif;
}
h1 {
position: relative;
margin: auto;
font-size: calc(20px + 5vw);
font-weight: bold;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 10px blue;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s linear forwards;
}
h1 span {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
h1::before,
h1::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
h1::before {
animation: crack1 2.5s linear forwards;
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
h1::after {
animation: crack2 2.5s linear forwards;
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
@keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
@keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
@keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
```
效果如下：
================================================
FILE: cssdoodle/bg-artist-clippath.md
================================================
## CSS-Doodle clip-path & drop-shadow 实现图案艺术
CSS-Doodle clip-path & drop-shadow 实现图案艺术
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)
HTML：
```HTML
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
clip-path: @shape(
split: 100;
r: cos(@r(3, 10)t);
);
}
filter: drop-shadow(-1px 0px 5px hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
));
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
clip-path: @shape(
split: 200;
r: cos(10t);
);
}
filter: drop-shadow(-1px 0px 5px hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
));
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
clip-path: @shape(
split: 240;
scale: .34;
origin: 0 -1.6;
degree: 180;
s: sqrt.abs.cos(t) / (sin(t) + 1.6);
r: 2 + (s - 2) * sin(t);
);
}
filter: drop-shadow(-1px 0px 5px hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
));
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 120deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
clip-path: @shape(
split: 300;
scale: .7;
r: cos.cos.cos.cos.cos(7t) ^ cos(7t);
);
}
filter: drop-shadow(2px 0px 10px hsla(
calc(calc(100 - @index()) * 2.55),
calc(@index() * 1%),
50%,
calc(@index() / 100)
));
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 90deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bicorn;
}
filter: drop-shadow(2px 0px 5px hsla(
calc(calc(100 - @index()) * 2.55),
calc(@index() * 1%),
50%,
calc(@index() / 100)
));
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 90deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bud @r(5, 10);
}
filter: drop-shadow(0px 0px @r(1, 10)px hsla(
calc(calc(10 - @index()) * 2.55),
calc(@index() * 1%),
50%,
calc(@index() / 100)
));
CSS Art with
<css-doodle />
```
SCSS：
```scss
:root {
--body-bg: #0a0c27;
--doodle-bg: #000;
--col: 6;
--gap: 2px;
--width: 95vw;
--size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));
}
html, body {
height: 100%;
margin: 0;
background: var(--body-bg);
}
body {
display: flex;
align-items: center;
}
main {
display: grid;
width: var(--width);
margin: auto;
background: var(--body-bg);
padding: calc(50vw - var(--width) / 2) 0;
grid-template-columns: repeat(var(--col), 1fr);
grid-gap: var(--gap);
position: relative;
padding-bottom: 5em;
}
p {
position: absolute;
bottom: 2em;
margin: 0;
width: 100%;
text-align: center;
font-family: cursive;
font-size: .9em;
line-height: 1;
color: rgba(74, 78, 113, .5);
}
p a {
text-decoration: none;
color: rgba(128, 53, 101, .8);
background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;
background-size: 2px 1px;
}
p a:hover {
color: rgba(128, 53, 101, 1);
}
css-doodle {
overflow: hidden;
width: var(--size);
height: var(--size);
background: var(--doodle-bg);
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/bg-artist-pattern-2.md
================================================
## CSS-Doodle 利用不同图形线条实现图案艺术 2
CSS-Doodle 利用不同图形线条实现图案艺术
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)
HTML：
```HTML
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 60deg));
background: rgba(0, 0, 0, calc((@index * 0.01)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 60deg));
background: #000;
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 60deg));
background: rgba(255, 255, 255, calc((@index * 0.01)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 45deg));
background: rgba(0, 0, 0, calc((@index * 0.01)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 89deg));
background: rgba(0, 0, 0, calc((@index * 0.01)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.01)));
}
:doodle {
@grid: 1x100 / 100vmin;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 44.6deg));
background: rgba(0, 0, 0, calc((@index * 0.008)));
@even {
background: rgba(255, 255, 255, calc((@index * 0.005)));
}
CSS Art with
<css-doodle />
```
SCSS：
```scss
:root {
--body-bg: #0a0c27;
--doodle-bg: #000;
--col: 6;
--gap: 2px;
--width: 95vw;
--size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));
}
html, body {
height: 100%;
margin: 0;
background: var(--body-bg);
}
body {
display: flex;
align-items: center;
}
main {
display: grid;
width: var(--width);
margin: auto;
background: var(--body-bg);
padding: calc(50vw - var(--width) / 2) 0;
grid-template-columns: repeat(var(--col), 1fr);
grid-gap: var(--gap);
position: relative;
padding-bottom: 5em;
}
p {
position: absolute;
bottom: 2em;
margin: 0;
width: 100%;
text-align: center;
font-family: cursive;
font-size: .9em;
line-height: 1;
color: rgba(74, 78, 113, .5);
}
p a {
text-decoration: none;
color: rgba(128, 53, 101, .8);
background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;
background-size: 2px 1px;
}
p a:hover {
color: rgba(128, 53, 101, 1);
}
css-doodle {
overflow: hidden;
width: var(--size);
height: var(--size);
background: var(--doodle-bg);
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/bg-artist-pattern.md
================================================
## CSS-Doodle 利用不同图形线条实现图案艺术
CSS-Doodle 利用不同图形线条实现图案艺术
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
具体的可以看看这篇文章：[CSS奇思妙想 -- 使用 CSS 创造艺术](https://github.com/chokcoco/iCSS/issues/94)
HTML：
```HTML
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
border-top: 2px solid hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
:doodle {
--rotate: @r(0, 360)deg;
--borderWidth: @r(1,4)px;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
:after {
content: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
overflow: hidden;
color: transparent;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
@size: 100%;
}
:doodle {
--rotate: @r(0, 360)deg;
--borderWidth: @r(1,4)px;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
border-top: var(--borderWidth) dashed hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
border-bottom: var(--borderWidth) dashed hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
:doodle {
--rotate: @r(0, 360)deg;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
border-top: 5px dashed hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
border-radius: 50%;
:doodle {
--rotate: @r(0, 360)deg;
--borderWidth: @r(2,4)px;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
border-top: var(--borderWidth) dashed hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
border-radius: @r(10%, 50%);
:doodle {
--rotate: @r(0, 360)deg;
--borderWidth: @r(2,4)px;
}
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * var(--rotate)));
border: var(--borderWidth) solid hsla(
calc(calc(100 - @index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
border-top: var(--borderWidth) dashed hsla(
calc(calc(@index()) * 2.55),
50%,
50%,
calc(@index() / 100)
);
border-bottom: var(--borderWidth) dashed hsla(
calc(calc(@index()) * 2.55),
80%,
65%,
calc(@index() / 100)
);
border-radius: @r(10%, 50%);
CSS Art with
<css-doodle />
```
SCSS：
```scss
:root {
--body-bg: #0a0c27;
--doodle-bg: #000;
--col: 6;
--gap: 2px;
--width: 95vw;
--size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));
}
html, body {
height: 100%;
margin: 0;
background: var(--body-bg);
}
body {
display: flex;
align-items: center;
}
main {
display: grid;
width: var(--width);
margin: auto;
background: var(--body-bg);
padding: calc(50vw - var(--width) / 2) 0;
grid-template-columns: repeat(var(--col), 1fr);
grid-gap: var(--gap);
position: relative;
padding-bottom: 5em;
}
p {
position: absolute;
bottom: 2em;
margin: 0;
width: 100%;
text-align: center;
font-family: cursive;
font-size: .9em;
line-height: 1;
color: rgba(74, 78, 113, .5);
}
p a {
text-decoration: none;
color: rgba(128, 53, 101, .8);
background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;
background-size: 2px 1px;
}
p a:hover {
color: rgba(128, 53, 101, 1);
}
css-doodle {
overflow: hidden;
width: var(--size);
height: var(--size);
background: var(--doodle-bg);
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/bg-mask-composite.md
================================================
## CSS-Doodle background + mask 实现万花筒效果
CSS-Doodle background + mask 实现万花筒效果
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
HTML：
```HTML
:doodle {
@grid: 2 x 5;
}
width: 40vmin;
height: 40vmin;
--colorMain: rgb(@r(255), @r(255), @r(255));
--colorSub: rgb(@r(255), @r(255), @r(255));
position: relative;
box-sizing: border-box;
margin: 1vmin;
border-radius: 50%;
border:2px solid #666;
box-shadow: 1px 1px 4px 2px #222;
// background: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));
background: var(--colorMain);
overflow: hidden;
:after {
--angle: calc(360deg / @index);
--start: @r(8, 30)px;
--end: @r(24, 80)px;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub), var(--colorMain));
mask: @m(@index, (
repeating-linear-gradient(calc(var(--angle) * @n), #fff 0, #fff var(--start), transparent var(--start), transparent var(--end))
));
-webkit-mask-composite: xor;
}
```
SCSS：
```scss
html, body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #333;
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/bg-mask-mix.md
================================================
## CSS-Doodle background + mask 实现条纹艺术背景
CSS-Doodle background + mask 实现条纹艺术背景
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
HTML：
```HTML
:doodle {
@grid: 3 x 1;
}
width: 40vmin;
height: 80vmin;
--colorMain: rgb(@r(255), @r(255), @r(255));
--colorSub: rgb(@r(255), @r(255), @r(255));
--colorThird: rgb(@r(255), @r(255), @r(255));
position: relative;
box-sizing: border-box;
margin: 1vmin;
border-radius: 5vmin;
border:2px solid #666;
box-shadow: 1px 1px 4px 2px #222;
background: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));
overflow: hidden;
@nth(2) {
background: linear-gradient(var(--colorMain), var(--colorSub));
}
@nth(3) {
background: unset;
}
:before {
--size: @r(2, 15)px;
--maskSize: @r(10, 75)px;
--percentage: @r(10, 30)%;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub));
mask:
linear-gradient(135deg, #fff var(--size), transparent 0),
linear-gradient(-135deg, #fff var(--size), transparent 0),
linear-gradient(45deg, #fff var(--size), transparent 0),
linear-gradient(-45deg, #fff var(--size), transparent 0),
linear-gradient(135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),
linear-gradient(-135deg, #fff calc(var(--percentage) + var(--size)), transparent 0),
linear-gradient(45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),
linear-gradient(-45deg, #fff calc(var(--percentage) + var(--size)), transparent 0),
linear-gradient(135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),
linear-gradient(-135deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),
linear-gradient(45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0),
linear-gradient(-45deg, #fff calc(var(--percentage) + var(--percentage) + var(--size)), transparent 0);
mask-size: var(--maskSize) var(--maskSize);
mask-position: 50% 50%;
-webkit-mask-composite: xor;
}
```
SCSS：
```scss
html, body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #333;
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/fish-seaweed.md
================================================
## CSS-Doodle fish 🐟 & seaweed 🍀
CSS-Doodle fish 🐟 & seaweed 🍀
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
HTML：
```HTML
:doodle { @grid: 1x35 / 100vw 100vh; }
:container {
background: linear-gradient(to top, rgba(0, 0, 0, .1) 0%, #aaf9ff 70%, transparent 100%);
margin: 0 auto;
background-repeat: no-repeat;
max-width: 740px;
overflow: hidden;
transform-style: preserve-3d;
perspective: 15px;
animation: move 15s infinite linear alternate;
}
@nth(2n) {
--hslh: @pick(90, 100);
--hsls: @pick(80%, 85%, 90%);
--color: hsla(var(--hslh), var(--hsls), 50%, 0.9);
position: relative;
width: 1vw;
height: 2vw;
border-radius: 50%;
background: var(--color);
top: @r(20, 70)vh;
transform: scale(@r(0.5, 1.3));
--n: @p(-1, 1, 1.2, -1.2);
--c: var(--color);
box-shadow: @m100(
calc(@sin(@n() / 10) * 2.4vmin * @var(--n))
calc(@n() * 1vmin) 0
hsla(var(--hslh), var(--hsls), calc(50% - 1% * 0.2 * @n()), calc(0.9 - 0.011 * @n()))
);
transform: translateZ(@r(-5)px);
z-index: 10;
}
@nth(4n + 1) {
position: relative;
width: 4.5vh;
height: 4vh;
--c: @pick(#bb2d00, #222, #6644a3);
background: var(--c);
top: @r(15, 90)vh;
@shape: @pick(fish, whale);
transform: translate3d(@r(-200, 200)%, @r(-200, 200)%, @r(-20)px) scale(@r(.8, 1.4)) rotate(calc(@pick(0deg, 180deg)));
z-index: @pick(5, 15);
opacity: .8;
animation: forward .8s infinite @r(0, 1.2)s alternate linear;
::before {
position: absolute;
content: "";
width: .5vh;
height: .5vh;
background: #fff;
border-radius: 50%;
left: 70%;
top: 45%;
z-index: 2;
}
}
@nth(7, 27) {
width: .6vw;
height: .6vw;
border-radius: 50%;
background: rgba(255, 255, 255, .3);
top: @r(10, 50)%;
box-shadow:
0 -8vh .3vh 1.2px rgba(255, 255, 255, .4),
0 -18vh .3vh 1.6px rgba(255, 255, 255, .5),
0 -30vh .3vh 2px rgba(255, 255, 255, .6);
z-index: 1;
transform: translate(@r(-1000, 1000)%, 0);
}
@keyframes move {
100% {
perspective: 40px;
}
}
@keyframes forward {
0% {
left: 0;
}
100% {
left: -3px;
}
}
```
SCSS：
```scss
html, body {
margin: 0;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/spotlight.md
================================================
## CSS-Doodle spotlight🎆
CSS-Doodle spotlight🎆
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
HTML：
```HTML
:doodle {
@grid: 1x26 / 100vw 100vh;
background: #000;
}
:container {
max-width: 70vw;
margin: 0 auto;
}
@even {
position: relative;
height: 70%;
top: 10%;
background: linear-gradient(to top, rgba(@r(50, 255), @r(255, 255), 255, 1), rgba(255, 255, 255, .1) 80%);
transform: perspective(@r(7, 35)vmin) rotateX(-@r(15, 45)deg) skewX(@r(-60, 60)deg);
transform-origin: center bottom;
box-shadow: 0 0 2vmin .1vmin rgba(255, 255, 255, .7);
opacity: 0;
animation: fadeIn 7s infinite calc(@index() * 0.03s);
}
@keyframes fadeIn {
1% {
opacity: 1;
}
10% {
opacity: 1;
filter: hue-rotate(0);
}
50% {
opacity: 1;
transform: perspective(@r(10, 35)vmin) rotateX(-@r(15, 45)deg) skewX(0deg);
filter: hue-rotate(360deg);
}
50.1% {
opacity: 0;
}
}
```
SCSS：
```scss
html, body {
margin: 0;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: cssdoodle/sunset.md
================================================
## 夏日城市夕阳图🌇
夏日城市夕阳图🌇
### CSS-doodle
[css-doodle](https://github.com/css-doodle/css-doodle) 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。
HTML：
```HTML
:doodle { @grid: 1x35 / 100vw 100vh; }
:container {
background: #ffcabb;
background: linear-gradient(to top, #ffcabb 50%, #de93b6 100%);
background-repeat: no-repeat;
}
position: relative;
align-self: end;
height: @rand(10%, 75%);
background: linear-gradient(to
top, #725392 0%, #b764ac 100%);
margin-left: @rand(0.1, 1)vw;
z-index: 1;
transform: scaleX(@rand(.8, 1.9));
::before {
content: "";
position: absolute;
bottom: 0;
left: @rand(-20, 12)px;
right: @rand(-20, 12)px;
top: @rand(15, 55)%;
background: linear-gradient(to
top, #352864 0%, #4d4280 100%);
z-index: 3;
}
::after {
content: "";
position: absolute;
width: .1vw;
height: .12vw;
top: @rand(15, 20)%;
left: @rand(10, 20)%;
z-index: 5;
box-shadow:
@rand(0.1, 2.1)vw @rand(0, 10)vh .5px rgba(246, 212, 0, .7),
@rand(0.1, 2.1)vw @rand(10, 15)vh .5px rgba(246, 212, 0, .6),
@rand(0.1, 2.1)vw @rand(15, 22)vh .5px rgba(246, 212, 0, .7),
@rand(0.1, 2.1)vw @rand(22, 30)vh .5px rgba(246, 212, 0, .6),
@rand(0.1, 2.1)vw @rand(30, 40)vh .5px rgba(246, 212, 0, .8);
}
```
SCSS：
```scss
html, body {
margin: 0;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body::after {
content: "";
position: absolute;
top: 10vmin;
right: 20vmin;
background: #fff;
width: 8vh;
height: 8vh;
border-radius: 50%;
box-shadow: 0 0 20px 2px rgba(253, 220, 189, 0.9);
}
```
效果如下（点击下图可以刷新效果）：
================================================
FILE: filter/filter-ball-loading.md
================================================
## 小球穿梭放大loading动画
小球穿梭放大loading动画。
### 关键点
主要使用了 blur、contrast 两个滤镜，它们的作用分别是：
+ filter: blur()： 给图像设置高斯模糊效果。
+ filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
----
HTML：
```HTML
```
SCSS：
```scss
$count: 7;
body,
html {
width: 100%;
height: 100%;
display: flex;
filter: blur(4px) contrast(8);
background: #000;
display: flex;
}
.g-container {
margin: auto;
position: relative;
width: 10vmin;
height: 10vmin;
}
.g-ball,
.g-first{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 50%;
transform: translate(-700%, 0);
opacity: 0;
// animation: move 3s infinite linear;
}
@for $i from 0 through $count {
.g-ball:nth-child(#{$i}) {
animation: move 3.5s infinite #{$i * 0.2 + 0.1}s linear;
}
}
.g-first {
animation: scaleMove 3.5s infinite linear;
}
@keyframes move {
25% {
opacity: 1;
transform: translate(-1vw, 0);
}
50% {
opacity: 1;
transform: translate(1vw, 0);
}
75%,
100% {
opacity: 0;
transform: translate(700%, 0);
}
}
@keyframes scaleMove {
25% {
opacity: 1;
transform: translate(-1vw, 0);
}
35% {
opacity: 1;
transform: scale(1);
}
70% {
opacity: 1;
transform: translate(1vw, 0) scale(2);
}
90%,
100% {
opacity: 0;
transform: translate(1vw, 0) scale(1);
}
}
```
效果如下：
================================================
FILE: filter/filter-ball-through.md
================================================
## 小球穿梭效果
小球穿梭效果。
### 关键点
主要使用了 blur、contrast 两个滤镜，它们的作用分别是：
+ filter: blur()： 给图像设置高斯模糊效果。
+ filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
----
HTML：
```HTML
```
SCSS：
```scss
body {
background: #000;
filter: blur(5px) contrast(10);
overflow: hidden;
}
.ball {
position: absolute;
left: 0;
top: 40vh;
height: 20vh;
width: 20vh;
border-radius: 50%;
background: #fff;
animation: move 10s infinite;
}
.g-wall {
position: absolute;
left: 20%;
top: 30vh;
height: 40vh;
width: 15vh;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
}
.g-wall:nth-child(2) {
left: 40%;
border-radius: 50%;
}
.g-wall:nth-child(3) {
left: 60%;
border-radius: 50%;
}
.g-wall:nth-child(4) {
left: 80%;
border-radius: 50%;
}
@keyframes move {
20% {
transform: translate(20vw, 0);
background: #ddd;
}
100% {
transform: translate(100vw, 0);
background: #ddd;
}
}
```
效果如下：
================================================
FILE: filter/filter-blur-constrast.md
================================================
## 使用 filter:blur | filter:constrast 生成特殊融合效果
使用 filter:blur | filter:constrast 生成特殊融合效果。
### 关键点
本例子中两个单独的滤镜拿出来，它们的作用分别是：
+ filter: blur()： 给图像设置高斯模糊效果。
+ filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
----
HTML：
```pug
// pug 模版
.container
.bg
- for(var i=0; i<1; i++)
.box
```
SCSS：
```scss
.container {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 50%;
filter: contrast(20);
}
.bg {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #000;
filter: contrast(20) blur(6px);
}
.box {
position: absolute;
top: 50%;
left: 80px;
transform: translate(-50%, -50%) rotate(0);
background-color: blue;
border-radius: 50%;
width: 100px;
height: 100px;
filter: unset;
filter: contrast(20) blur(6px);
animation: turn 5s linear infinite;
transform-origin: -100% center;
}
@keyframes turn {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
```
效果如下：
================================================
FILE: filter/filter-fire-2.md
================================================
## 使用 filter:blur | filter:constrast 生成火焰效果2
使用 filter:blur | filter:constrast 生成火焰效果。
### 关键点
本 Demo 详细信息可阅读：
[CSS 火焰？不在话下](https://github.com/chokcoco/iCSS/issues/62)
----
HTML：
```pug
// pug 模版
div.g-candle
div.g-body
div.g-fire-box
div.g-fire
-for(var i=0; i<200; i++)
div.g-ball
```
SCSS：
```scss
$count: 200;
html, body{
height: 100%;
background: #000;
overflow: hidden;
// filter: blur(1px) contrast(5);
}
.g-candle {
position: aboslute;
width: 400px;
margin: 0 auto;
height: 400px;
}
.g-body {
position: relative;
width: 100px;
height: 300px;
margin: 280px auto;
// border: 1px solid #fff;
background: linear-gradient(230deg, #ca9800, #573903, black 70%);
z-index: 1;
&::before {
position: absolute;
content: "";
width: 100px;
height: 40px;
border-radius: 50%;
// border: 1px solid #fff;
box-sizing: border-box;
top: -20px;
background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);
}
&::after {
position: absolute;
content: "";
width: 4px;
height: 48px;
background: #fff;
left: 50%;
top: -22px;
transform: translate(-50%, -50%);
border-radius: 50% 50% 0 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 60%, #fff);
opacity: .7;
filter: blur(1px);
}
}
.g-fire-box {
position: absolute;
top: 97px;
left: 50%;
width: 80px;
height: 200px;
transform: translate(-50%, -50%);
filter: blur(2px) contrast(20);
}
.g-fire {
position: absolute;
top: 30px;
left: 50%;
border-radius: 45%;
box-sizing: border-box;
border: 120px solid #000;
border-bottom: 120px solid transparent;
transform: translate(-50%, 0) scaleX(.45);
background-color: #761b00;
// filter: blur(20px) contrast(30);
}
.g-ball {
position: absolute;
top: 60px;
transform: translate(0, 0);
background: #fa8763;
border-radius: 50%;
z-index: -1;
mix-blend-mode: screen;
}
@for $i from 0 to $count {
.g-ball:nth-child(#{$i}) {
$width: #{random(50)}px;
width: $width;
height: $width;
left: calc(#{(random(70))}px - 55px);
}
.g-ball:nth-child(#{$i}) {
animation: movetop 1s linear -#{random(3000)/1000}s infinite;
}
}
@keyframes movetop {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(0, 0);
}
87.7% {
transform: translate(0, -170px);
opacity: 0;
}
100% {
transform: translate(0, -170px);
opacity: 0;
}
}
```
效果如下：
================================================
FILE: filter/filter-fire.md
================================================
## 使用 filter:blur | filter:constrast 生成火焰效果
使用 filter:blur | filter:constrast 生成火焰效果。
### 关键点
本例子中两个单独的滤镜拿出来，它们的作用分别是：
+ filter: blur()： 给图像设置高斯模糊效果。
+ filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
----
先来看看火焰的核心代码：
```css
.fire {
width: 0;
height: 0;
border-radius: 45%;
box-sizing: border-box;
border: 100px solid #000;
border-bottom: 100pxsolid transparent;
background-color: #b5932f;
transform: scaleX(.4);
filter: blur(20px) contrast(30);
}
```
分解一下过程：
接下来，我们只需要在火焰 .fire 这个 div 内部，用大量的黑色圆形，由下至上，无规律穿过火焰即可。由于滤镜的融合效果，火焰效果随之产生。
这里为了方便理解，我把背景色切换成白色，火焰动画原理一看即懂：
-----
HTML：
```pug
// pug 模版
.g-container
.g-fire
- for (var j = 1; j <=40; j++)
.g-dot
```
SCSS：
```scss
$douCount: 40;
$animationTime: 2;
$delayTime: 3;
@function randomNum($max, $min: 0) {
@return ($min + random($max));
}
body {
background: #000;
overflow: hidden;
}
:root {
--fireWidth: 115px;
--fireHeight: 200px;
--dotSize: 24px;
--fireColor: #b5932f;
// --fireColor: #008eff;
// --fireColor: #ff9900;
}
.g-container {
position: relative;
width: 384px;
height: 300px;
margin: 0 auto;
background-color: #000;
}
.g-fire {
position: absolute;
width: 0;
height: 0;
bottom: 100px;
left: 50%;
border-radius: 45%;
box-sizing: border-box;
border: 200px solid #000;
border-bottom: 200px solid transparent;
transform: translate(-50%, 0) scaleX(.4);
background-color: var(--fireColor);
filter: blur(20px) contrast(30);
}
.g-dot {
position: absolute;
bottom: -210px;
left: 0;
width: var(--dotSize);
height: var(--dotSize);
background: #000;
border-radius: 50%;
}
@for $i from 1 to $douCount + 1 {
.g-dot:nth-child(#{$i}) {
bottom: -#{randomNum(120, 240)}px;
left: #{randomNum(300, -160)}px;
animation: move #{randomNum($animationTime * 13, 7) / 10}s infinite #{randomNum($delayTime * 20) / 10}s linear;
}
}
@keyframes move {
100% {
transform: translate3d(0, -350px, 0);
}
}
```
效果如下：
================================================
FILE: filter/filter-ghost.md
================================================
## 单标签纯CSS实现幽灵动画
单标签纯CSS实现幽灵动画。
### 关键点
+ filter: blur() | filter: contrast() 的配合使用
+ 单标签的限制，所以多重渐变也发挥了很重要的作用
HTML：
```HTML
```
SCSS：
```scss
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #000;
filter: blur(3px) contrast(10);
}
div {
position: relative;
width: 80px;
height: 120px;
background:
radial-gradient(circle at 60px 40px, #000, #000 7px, transparent 7px),
radial-gradient(circle at 40px 40px, #000, #000 7px, transparent 7px),
radial-gradient(circle at 50px 50px, #fff, #fff);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: auto;
border-radius: 40px 40px 60px 20px;
transform: skewX(-10deg);
animation: moveMain 2s infinite ease-out;
}
div::before,
div::after {
content: "";
position: absolute;
background: #fff;
border-radius: 50%;
}
div::before {
width: 20px;
height: 20px;
top: 50px;
left: -10px;
box-shadow: 0 0 0 1px #fff;
animation: move 2s infinite ease-in;
}
div::after {
width: 30px;
height: 25px;
top: 95px;
left: -10px;
box-shadow: 0 0 0 1px #fff;
animation: move2 2s infinite ease-in;
}
@keyframes move {
80%,
100% {
box-shadow: -60px 0 0 .5px rgba(255, 255, 255, .5);
}
}
@keyframes move2 {
80%,
100% {
box-shadow: -100px 0 0 .5px rgba(255, 255, 255, .2);
}
}
@keyframes moveMain {
42% {
transform: skewX(-10deg) translate(40px, 0);
}
}
```
效果如下：
================================================
FILE: filter/filter-hue-rotate-color.md
================================================
## 使用 hue-rotate 实现渐变背景动画
使用 hue-rotate 实现渐变背景动画。
这种方法应该是实现渐变背景动画的比较好的方法。
HTML：
```HTML
```
SCSS：
```scss
div {
width: 300px;
height: 180px;
margin: auto;
background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
animation: hueRotate 10s infinite alternate;
}
@keyframes hueRotate {
100% {
filter: hue-rotate(360deg);
}
}
```
效果如下：
================================================
FILE: filter/filter-mix.md
================================================
## 滤镜及混合模式混搭特效
使用滤镜及混合模式混搭特效。
本例子中用到了：
+ filter: contrast()
+ filter: brightness()
+ filter: blur()
+ background-blend-mode: multiply
+ mix-blend-mode: saturation
-------
HTML：
```html
```
SCSS：
```scss
.halftone {
position: absolute;
width: 20vw;
height: 20vw;
background: white;
top: 50%;
left: 50%;
filter: contrast(100000%);
transform: translate(-50%, -50%);
overflow: hidden; // 电脑性能好的，关掉这个属性
}
.halftone > img {
width: 100%;
height: 100%;
filter: brightness(0.5) blur(4px);
animation: 3s animation-filter infinite alternate;
}
.halftone::after {
content: "";
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
background-blend-mode: multiply;
background: radial-gradient(8px 8px, cyan, white),
radial-gradient(8px 8px, magenta, white),
radial-gradient(8px 8px, yellow, white);
background-size: 8px 8px;
background-position: 0 -3px, -2px 0, 2px 0;
mix-blend-mode: saturation;
pointer-events: none;
transform: rotate(11.25deg);
transition: 1s ease-in-out transform;
z-index: 1;
animation: 3s animation-overlay infinite alternate;
}
@keyframes animation-overlay {
0% {
transform: rotate(450deg) scale(15);
}
100% {
transform: rotate(-90deg);
}
}
@keyframes animation-filter {
0% {
filter: brightness(0.5) blur(40px);
}
100% {
filter: brightness(0.5) blur(4px);
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: filter/filter-polygon-shadow.md
================================================
## 使用 drop-shadow 配合 clip-path 生成规则阴影
使用 drop-shadow 配合 clip-path 生成规则阴影。
### 关键点
使用 clip-path 可以很好的使用 SVG 的一些属性，绘制各种图形。绘制出来的图形如果希望带阴影，`box-shadow` 肯定是不行的，这个时候，`drop-shadow()` 则非常好用。
HTML：
```HTML
领取红包
```
SCSS：
```scss
.btn-wrap {
margin: auto;
filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5));
}
.btn{
content: "";
width: 200px;
height: 64px;
line-height: 64px;
text-align: center;
background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5bf);
color: #be9451;
font-size: 24px;
clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);
// box-shadow: inset 0px 0px 1px 1px #fff;
}
```
效果如下：
================================================
FILE: filter/filter-shadow.md
================================================
## 使用 filter:blur 生成彩色阴影
通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成的阴影通常只能是单色或者同色系的。
但是通过巧妙的利用 filter: blur 模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。
### 关键点
原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。
嗯，最重要的就是这一句 `filter: blur(10px) brightness(80%) opacity(.8)`。
HTML：
```html
bulr shadow
```
SCSS：
```scss
$img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505822443&di=941986df9c6514d5d43eaba4aa938347&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.qqtouxiang8.net%2Fuploads%2Fallimg%2Fc150313%2F142623130563050-922006.jpg';
@import url(https://fonts.googleapis.com/css?family=Righteous);
.container {
width: 200px;
margin: 20px auto;
}
.avator {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: url($img) no-repeat center center;
background-size: 100% 100%;
&::after {
content: "";
position: absolute;
top: 10%;
left: 0%;
width: 100%;
height: 100%;
background: inherit;
background-size: 100% 100%;
border-radius: 50%;
transform: scale(.95);
filter: blur(10px) brightness(80%) opacity(.8);
z-index: -1;
}
}
p {
margin-top: 30px;
text-align: center;
font-size: 28px;
font-family: Righteous;
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: filter/filter-single-div-water-drop.md
================================================
## 单标签实现滴水效果
单标签实现滴水效果。
### 关键点
主要使用了 blur、contrast 两个滤镜，它们的作用分别是：
+ filter: blur()： 给图像设置高斯模糊效果。
+ filter: contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
----
HTML：
```HTML
MAGICCSS
```
SCSS：
```scss
div {
position: relative;
width: 640px;
height: 106px;
color: #fff;
font-size: 124px;
text-align: center;
margin: 100px auto;
border-bottom: 10px solid #fff;
transform: skewY(5deg);
&::before,
&::after {
position: absolute;
content: "";
bottom : -20px;
left: 0;
width: 10px;
height: 20px;
border-radius: 50%;
background: #fff;
transform: translate(0, 0);
animation: move 7.5s ease-in-out infinite;
}
&::after {
animation: move 7.5s ease-in-out 1s infinite;
}
}
@keyframes move {
80% {
bottom : -30px;
transform: translate(623px, 0);
} 93% {
transform: translate(623px, 3px);
opacity: 1;
}100% {
transform: translate(623px, 150px);
opacity: 0;
}
}
```
效果如下：
================================================
FILE: filter/use-filter-blur-enhance-text-3d-effect.md
================================================
## 利用 filter:blur 增强文字的 3D 效果
利用 filter:blur 增强文字的 3D 效果
### 关键点
1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 `:nth-child` 和 `:nth-last-child` 高效编写 CSS 代码
2. 每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 `animation-delay` 让一半的动画延迟一半进行
3. 可以再配合 `text-shadow` 让文字更立体点
HTML：
```
C
S
S
3
D
E
F
F
E
C
T
```
SCSS：
```scss
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
$count: 12;
body, html {
width: 100%;
height: 100%;
display: flex;
font-family: 'Lobster', cursive;
perspective: 160vmin;
overflow: hidden;
}
p {
margin: auto;
font-size: 24vmin;
white-space: nowrap;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;
span {
text-shadow:
1px 1px 0 rgba(0, 0, 0, .9),
2px 2px 0 rgba(0, 0, 0, .7),
3px 3px 0 rgba(0, 0, 0, .5),
4px 4px 0 rgba(0, 0, 0, .3),
5px 5px 0 rgba(0, 0, 0, .1);
&:nth-child(-n+5) {
animation-delay: -5s;
}
}
}
@for $i from 1 to 7 {
span:nth-child(#{$i}),
span:nth-last-child(#{$i}) {
animation: filterBlur-#{$i} 10s infinite ease-in-out;
}
@keyframes filterBlur-#{$i} {
0% {
filter: blur(0px) contrast(5);
}
50% {
filter: blur(#{7 - $i}px) contrast(1);
}
100% {
filter: blur(0px) contrast(5);
}
}
}
@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}
```
效果如下：
================================================
FILE: generate-content.js
================================================
const fs = require('fs');
const path = require("path");
const filePath = path.resolve(__dirname, './');
const ONLINE_URL = 'https://csscoco.com/inspiration/#/.';
const FILE_NAME = './_sidebar.md';
const FILE_NAME_README = './README.md';
const FILE_NAME_HASHMAP = './hashmap.js';
const FILE_NAME_ARR = [];
const HASHMAP = {};
const regExp = /([^\u4E00-\u9FA50-9a-zA-Z_])/g;
const contentName = {
'layout': '布局（Layout）',
'shadow': '阴影(box-shadow、drop-shadow)',
'pesudo': '伪类/伪元素',
'filter': '滤镜(fliter)',
'border': '边框',
'background': '背景/渐变(linear-gradient/radial-gradient/conic-gradient)',
'blendmode': '混合模式（mix-blend-mode/background-blend-mode)',
'3d': '3D',
'animation': '动画/过渡(transition/animation)',
'clippath': 'clip-path',
'text': '文本类',
'others': '综合',
'cssdoodle': 'CSS-Doodle',
'svg': 'svg',
}
async function readFile(filePath) {
await initWrite();
Object.keys(contentName).forEach(async item => {
const curPath = path.resolve(filePath, item);
const newContent = `\n## ${contentName[item]} \n\n`;
writeFile(FILE_NAME, newContent);
writeFile(FILE_NAME_README, newContent);
const files = fs.readdirSync(curPath)
files.forEach(async name => {
const contentData = fs.readFileSync(`${curPath}/${name}`,'utf-8');
const title = contentData.split('\n')[0].split('## ')[1].replace(/[\r\n]/g,"");
const appendContent = `+ [${title}](./${item}/${name}) \n`;
const appendContentReadme = `+ [${title}](${ONLINE_URL}/${item}/${name}) \n`;
const id = name.split('.')[0];
FILE_NAME_ARR.push({
id,
name: title.replace(regExp, '')
});
HASHMAP[id] = true;
writeFile(FILE_NAME, appendContent);
writeFile(FILE_NAME_README, appendContentReadme);
});
console.log('HASHMAP', HASHMAP);
writeFileHashMap();
});
}
async function writeFile(name, data) {
fs.appendFileSync(name, data, function(err) {
if (err) {
return console.error(err);
}
console.log("数据写入成功！");
});
}
async function initWrite() {
const initData = `# CSS-Inspiration \n\n + [引言](./init.md) \n\n`;
const initDataReadme = `\n\n这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。\n\n## 在线预览\n\n[Online Pages](${ONLINE_URL}/init/)\n`;
fs.writeFileSync(FILE_NAME, initData, function(err) {
if (err) {
return console.error(err);
}
console.log("初始化数据写入成功！");
});
fs.writeFileSync(FILE_NAME_README, initDataReadme, function(err) {
if (err) {
return console.error(err);
}
console.log("初始化数据写入成功！");
});
}
async function writeFileHashMap() {
const data = `module.exports = ${JSON.stringify(HASHMAP)}`;
fs.writeFileSync(FILE_NAME_HASHMAP, data, function(err) {
if (err) {
return console.error(err);
}
console.log("HASHMAP写入成功！");
});
}
readFile(filePath);
================================================
FILE: hashmap.js
================================================
module.exports = {"best-way-to-center-element":true,"double-wing-layout":true,"grid-clip-path-gta5-poster":true,"holy-grail-layout-flex":true,"holy-grail-layout":true,"masonry-layout-colum":true,"masonry-layout-flex":true,"masonry-layout-grid":true,"multi-column-contour":true,"multi-row-or-column":true,"single-column-isometric":true,"use-margin-auto-to-simulate-align-self":true,"use-margin-auto-to-simulate-space-between":true,"circle-loading":true,"inscribed-angle":true,"neon-effect-3d-text":true,"neon-shadow-light":true,"opacity-wrap":true,"projection-long-shadow":true,"projection-one-sided-shadow":true,"projection-solid-shadow":true,"projection-word-solid-shadow-ii":true,"projection-word-solid-shadow":true,"relief-style-btn":true,"shadow-ani-ii":true,"shadow-ani":true,"single-div-douyin-logo":true,"single-div-fork":true,"single-div-ie-logo":true,"pesudo-animation-control-hover":true,"pesudo-animation-control-target":true,"pesudo-animation-control":true,"pesudo-boundary-judge":true,"pesudo-bubble":true,"pesudo-focus-checked":true,"pesudo-focus-target":true,"pesudo-focus-within-placeholder-shown":true,"pesudo-focus-within":true,"pesudo-juejin":true,"pesudo-loading-content":true,"pesudo-loading-line":true,"pesudo-not-2":true,"pesudo-not":true,"filter-ball-loading":true,"filter-ball-through":true,"filter-blur-constrast":true,"filter-fire-2":true,"filter-fire":true,"filter-ghost":true,"filter-hue-rotate-color":true,"filter-mix":true,"filter-polygon-shadow":true,"filter-shadow":true,"filter-single-div-water-drop":true,"use-filter-blur-enhance-text-3d-effect":true,"border-chargin":true,"border-image-animate":true,"border-line-animation":true,"border-line-drop-animation":true,"border-loading":true,"border-outline-symbol-add":true,"border-overflow-btn":true,"border-typing":true,"border-wave-percent":true,"border-wave":true,"background-css-property-tv-noise":true,"bg-attachment-frosted-glass":true,"bg-attachment-scroll-shadow":true,"bg-clip-text-shine":true,"bg-conic-border-effect":true,"bg-conic-border-light-effect":true,"bg-conic-circle-loading":true,"bg-conic-gradient-animation":true,"bg-conic-gradient-repeating-pattern":true,"bg-linear-arrow":true,"bg-linear-border-effect":true,"bg-linear-gradient-maze":true,"bg-linear-inscribed":true,"bg-linear-progress-bar":true,"bg-linear-scroll-indicator":true,"bg-linear-stripe":true,"bg-linear-underline":true,"bg-mask-image":true,"bg-mask-text-show":true,"bg-mask-transition":true,"bg-radial-btn-click-bubble":true,"bg-radial-coupon":true,"bg-radial-focus":true,"bg-wave-border":true,"bg-wave-underline":true,"bg-wave":true,"css-property-variable-bg-change-animation":true,"repeating-radial-background-artistic-bg":true,"blend-color-set":true,"blend-douyin-logo":true,"blend-loading":true,"blend-mix-img":true,"blend-mix":true,"blend-rotate":true,"blend-text-glitch":true,"blend-text-shine":true,"blend-water-wave":true,"mix-multi-graidient-bg":true,"mixblend-text-wave-effect":true,"3d-ball":true,"3d-count-number":true,"3d-css-galaxy-shuttle":true,"3d-cuber-progress-bar":true,"3d-cuber-roll-404":true,"3d-glowing-rotate-text":true,"3d-infinite-maze":true,"3d-line":true,"3d-maze":true,"3d-rope-swing":true,"3d-spiral-number":true,"3d-text-debut":true,"parallax-3d-1":true,"parallax-3d-2":true,"parallax-3d-translate":true,"animation-button-border":true,"animation-curve":true,"animation-delay-control-text-effect":true,"animation-delay-wavy":true,"animation-direction":true,"animation-play-state":true,"animation-rotate":true,"clippath-border-image":true,"clippath-border-line-radius":true,"clippath-border-line":true,"clippath-img-glitch":true,"clippath-word-crack":true,"text-underline-wave":true,"1px-line":true,"border-inset-text":true,"css-resize-switch-picture":true,"digital-char-rain-animation":true,"others-chrome-tab":true,"others-equiangular-spiral":true,"others-huawei-charging":true,"others-night":true,"others-pie":true,"pointer-follow-2":true,"pointer-follow-3":true,"pointer-follow":true,"reflect-artist":true,"reflect-btn-effect":true,"reflect-text-effect":true,"word-break-move":true,"word-break":true,"word-glitch":true,"bg-artist-clippath":true,"bg-artist-pattern-2":true,"bg-artist-pattern":true,"bg-mask-composite":true,"bg-mask-mix":true,"fish-seaweed":true,"spotlight":true,"sunset":true,"alipay-ar-scan":true,"svg-arc-word":true,"svg-btn-hover":true,"svg-dropshadow-line-neon-effect":true,"svg-feTurbulence-harmony-logo":true,"svg-feturbulence-btn-glitch":true,"svg-feturbulence-clouds":true,"svg-line-text-2":true,"svg-line-text":true}
================================================
FILE: index.html
================================================
cssinspirationguide - csc inspiration guide online
================================================
FILE: init.md
================================================
希望这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
本文档使用 `docsify + gittalk + codepen + mysql` 搭建。
## Contact Me
欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入 CSS 灵感的各种群聊：
+ 作者的微信公众号 - `iCSS前端趣闻`，想 Get 到最有意思的 CSS 资讯，千万不要错过 😄
+ QQ 群：418766876 联系我，[一键加群讨论](//shang.qq.com/wpa/qunwpa?idkey=318940c0ae56f4556447291fb2fc6147a7b1760487c49c1e3410c377d946fc5a)
+ 微信群：微信群已经满 200，无法扫码加入，需要手动拉人加入，可以加我微信 `coco1s`，备注 css，我拉你进群
## License
MIT
================================================
FILE: layout/best-way-to-center-element.md
================================================
## 实现水平垂直居中最便捷的方法
实现水平垂直居中最便捷的方法
### 难点
核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。
原因如下，在 `dispaly: flex` 下：
+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)
简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
HTML：
```HTML
```
SCSS：
```scss
.g-container {
width: 100vw;
height: 100vh;
display: flex;
// display: grid;
// display: inline-flex;
// display: inline-grid;
}
.g-box {
width: 40vmin;
height: 40vmin;
background: #000;
margin: auto;
}
```
效果如下：
================================================
FILE: layout/double-wing-layout.md
================================================
## 双飞翼布局
最常见的双飞翼布局实现方法。
### 需求
双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。
### 关键点
+ 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度
+ 双飞翼布局的关键点父元素不需要设置 padding
+ 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的
HTML：
```pug
// pug 模板引擎
div.g-container
div.g-middle
div.g-middle-inner middle-inner
div.g-left left
div.g-right right
```
SCSS：
```scss
.g-container {
position: relative;
height: 100vh;
min-width: 400px;
& > div {
height: 100vh;
float: left;
text-align: center;
color: #fff;
line-height: 100vh;
font-size: 3vw;
}
}
.g-middle {
position: relative;
width: 100%;
background: #cc6630;
.g-middle-inner {
margin: 0 200px;
}
}
.g-left {
position: relative;
width: 200px;
background: #ffcc00;
margin-left: -100%;
}
.g-right {
position: relative;
width: 200px;
background: pink;
margin-left: -200px;
}
```
效果如下：
================================================
FILE: layout/grid-clip-path-gta5-poster.md
================================================
## grid 布局配合 clip-path 实现 GTA5 封面
利用 grid 布局配合 clip-path 实现 GTA5 封面。
### 关键点
+ grid 实现不规则的网格布局
+ clip-path 控制每个格子的形状
关于本效果的详细描述，你可以查看这篇文章：[新时代创意布局不完全指南](https://github.com/chokcoco/iCSS/issues/70)
HTML：
```
```
SCSS：
```scss
*{
box-sizing: border-box;
}
body{
padding:0;
margin: 0;
background: #23232a;
}
img{
width:100%;
height: 100%;
object-fit: cover;
object-position: 40% 0;
}
.parent{
padding: .8rem;
background: black;
height: 95vh;
min-height: 500px;
width: 100%;
max-width: 600px;
margin: auto;
margin-top: 2.5vh;
border: 1px solid #c9b473;
overflow: hidden;
display: grid;
grid-template-columns: 1fr .7fr .3fr 1fr;
grid-template-rows: 20% 40% 20% 20%;
grid-template-areas: 'one two two three'
'four five five five'
'six five five five'
'six seven eight eight';
}
// For clipping I used mozilla's inspect element.
.child{
&:nth-child(1),
&:nth-child(2),
&:nth-child(3){
img{
width:120%;
height: 120%;
}
}
&:first-child{
grid-area: one;
clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%);
}
&:nth-child(2){
grid-area: two;
clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%);
}
&:nth-child(3){
grid-area: three;
clip-path:polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%);
}
&:nth-child(4){
grid-area: four;
clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%);
img{
width: 135%;
height: 135%;
}
}
&:nth-child(5){
grid-area: five;
clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 100%, 53% 63.21%, 3.23% 73.02%, 14.30% 44.04%);
}
&:nth-child(6){
grid-area: six;
clip-path: polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%);
}
&:nth-child(7){
grid-area: seven;
clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.30% 100.85%);
}
&:nth-child(8){
grid-area: eight;
clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%);
}
&:nth-child(9){
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
clip-path:polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%);
img{
object-position: 30% 50%;
height: 135%;
}
}
}
```
效果如下：
================================================
FILE: layout/holy-grail-layout-flex.md
================================================
## flex 实现圣杯布局
使用 flex 实现的圣杯布局。
### 需求
圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。
### 关键点
+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
+ 圣杯布局的关键点父元素需要设置 padding
+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的
HTML：
```pug
// pug 模板引擎
div.g-container
div.g-middle middle
div.g-left left
div.g-right right
```
SCSS：
```scss
.g-container {
position: relative;
height: 100vh;
min-width: 400px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
& > div {
height: 100vh;
text-align: center;
color: #fff;
line-height: 100vh;
font-size: 3vw;
}
}
.g-middle {
order: 2;
flex: auto 1 0 ;
background: #cc6630;
}
.g-left {
order: 1;
flex: 200px 0 0;
background: #ffcc00;
}
.g-right {
order: 3;
flex: 200px 0 0;
background: pink;
}
```
效果如下：
================================================
FILE: layout/holy-grail-layout.md
================================================
## 圣杯布局
最常见的圣杯布局实现方法。
### 需求
圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。
### 关键点
+ 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置
+ 圣杯布局的关键点父元素需要设置 padding
+ 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的
HTML：
```pug
// pug 模板引擎
div.g-container
div.g-middle middle
div.g-left left
div.g-right right
```
SCSS：
```scss
.g-container {
// overflow: hidden;
position: relative;
height: 100vh;
padding: 0 200px;
min-width: 400px;
& > div {
height: 100vh;
float: left;
text-align: center;
color: #fff;
line-height: 100vh;
font-size: 3vw;
}
}
.g-middle {
position: relative;
width: 100%;
background: #cc6630;
}
.g-left {
position: relative;
width: 200px;
background: #ffcc00;
margin-left: -100%;
left: -200px;
}
.g-right {
position: relative;
width: 200px;
background: pink;
margin-left: -200px;
right: -200px;
}
```
效果如下：
================================================
FILE: layout/masonry-layout-colum.md
================================================
## CSS实现瀑布流布局（column-count）
本例使用 CSS column 实现瀑布流布局
关键点，
+ column-count: 元素内容将被划分的最佳列数
+ break-inside: 避免在元素内部插入分页符
HTML：
```pug
// pug 模板引擎
div.g-container
-for(var j = 0; j<32; j++)
div.g-item
```
SCSS：
```scss
$count: 32;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
column-count: 4;
column-gap: .5vw;
padding-top: .5vw;
}
.g-item {
position: relative;
width: 24vw;
margin-bottom: 1vw;
break-inside: avoid;
}
@for $i from 1 to $count+1 {
.g-item:nth-child(#{$i}) {
height: #{randomNum(300, 50)}px;
background: randomColor();
&::after {
content: "#{$i}";
position: absolute;
color: #fff;
font-size: 2vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
```
效果如下：
================================================
FILE: layout/masonry-layout-flex.md
================================================
## CSS 实现瀑布流布局（display: flex）
本例使用 CSS flex 实现瀑布流布局
关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放
HTML：
```pug
// pug 模板引擎
div.g-container
-for(var i = 0; i<4; i++)
div.g-queue
-for(var j = 0; j<8; j++)
div.g-item
```
SCSS：
```scss
$lineCount: 4;
$count: 8;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
.g-queue {
display: flex;
flex-direction: column;
flex-basis: 24%;
}
.g-item {
position: relative;
width: 100%;
margin: 2.5% 0;
}
@for $i from 1 to $lineCount+1 {
.g-queue:nth-child(#{$i}) {
@for $j from 1 to $count+1 {
.g-item:nth-child(#{$j}) {
height: #{randomNum(300, 50)}px;
background: randomColor();
&::after {
content: "#{$j}";
position: absolute;
color: #fff;
font-size: 24px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}
```
效果如下：
================================================
FILE: layout/masonry-layout-grid.md
================================================
## CSS实现瀑布流布局（display: grid）
本例使用 CSS grid 实现瀑布流布局
关键点，
+ 使用 `grid-template-columns`、`grid-template-rows` 分割行列
+ 使用 `grid-row` 控制每个 item 的所占格子的大小
HTML：
```pug
// pug 模板引擎
div.g-container
-for(var i = 0; i<8; i++)
div.g-item
```
SCSS：
```scss
$count: 8;
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
@function randomColor() {
@return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
}
@for $i from 1 to $count+1 {
.g-item:nth-child(#{$i}) {
position: relative;
background: randomColor();
margin: 0.5vw;
&::after {
content: "#{$i}";
position: absolute;
color: #fff;
font-size: 2vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.g-item {
&:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
&:nth-child(2) {
grid-column: 2;
grid-row: 1 / 4;
}
&:nth-child(3) {
grid-column: 3;
grid-row: 1 / 5;
}
&:nth-child(4) {
grid-column: 4;
grid-row: 1 / 6;
}
&:nth-child(5) {
grid-column: 1;
grid-row: 3 / 9;
}
&:nth-child(6) {
grid-column: 2;
grid-row: 4 / 9;
}
&:nth-child(7) {
grid-column: 3;
grid-row: 5 / 9;
}
&:nth-child(8) {
grid-column: 4;
grid-row: 6 / 9;
}
}
```
效果如下：
================================================
FILE: layout/multi-column-contour.md
================================================
## 6种实现多列等高的方法
多种实现多列等高的方法
### 需求
多列等高，要求左右两列高度自适应且一样，分别设置不同背景色
### 实现
1. `padding + margin + overflow` 实现多列等高效果，兼容性好
2. border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动
3. 父元素线性渐变背景色实现多列等高（同理各种颜色障眼法）
4. display：flex实现多列等高
5. display：grid实现多列等高
6. display:table-cell 实现多列等高
HTML：
```html
content
content
content
content
content
```
SCSS：
```scss
h2 {
text-align: center;
line-height: 60px;
font-size: 20px;
background: #00bcd4;
color: #fff;
}
.g-container {
width: 1000px;
margin: 0 auto;
line-height: 2;
color: #fff;
& > div {
margin-bottom: 50px;
}
}
.g-padmar {
position: relative;
overflow: hidden;
.g-left {
float: left;
width: 200px;
background: #4caf50;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.g-right {
float: left;
width: 800px;
background: #99afe0;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
}
.g-border {
position: relative;
width: 800px;
border-left: 200px solid #4caf50;
background: #99afe0;
&::after {
content: ".";
display:block;
height: 0;
clear: both;
}
.g-right {
width: 800px;
}
.g-left {
float: left;
width: 200px;
margin-left: -200px;
}
}
.g-lineargradient {
background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0);
overflow: hidden;
.g-left {
float: left;
width: 200px;
}
.g-right {
float: left;
width: 800px;
}
}
.g-flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
.g-left {
flex: 200px 0 0 ;
background: #4caf50;
}
.g-right {
flex: auto 1 0;
background: #99afe0;
}
}
.g-grid {
display: grid;
// align-items: stretch; 默认值
grid-template-columns: 200px auto;
.g-left {
background: #4caf50;
}
.g-right {
background: #99afe0;
}
}
.g-table {
overflow:hidden;
display:table;
.g-left {
width: 200px;
display: table-cell;
background: #4caf50;
}
.g-right {
width: 800px;
display: table-cell;
background: #99afe0;
}
}
```
效果如下（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: layout/multi-row-or-column.md
================================================
## 多方案实现跨行或跨列布局
多方案实现多方案实现跨行或跨列布局
HTML：
```pug
// pug 模板引擎
div.g-container
h2 float 实现
div.g-float
- for(var i=0; i<3; i++)
div.g-item #{i}
h2 flex 实现
div.g-flex
- for(var i=0; i<3; i++)
div.g-item #{i}
h2 grid 实现
div.g-grid
- for(var i=0; i<3; i++)
div.g-item #{i}
```
SCSS：
```scss
.g-container {
margin: 20px auto;
width: 400px;
}
.g-item {
width: 190px;
height: 190px;
box-sizing: border-box;
border: 1px solid #666;
border-radius: 10px;
line-height: 190px;
font-size: 32px;
text-align: center;
cursor:pointer;
margin: 5px;
transition: .1s all;
}
.g-float {
overflow: hidden;
.g-item {
float: left;
}
.g-item:first-child {
height: 390px;
}
.g-item:first-child:hover {
height: 190px;
width: 390px;
}
}
h2 {
font-size: 28px;
text-align: center;
margin: 30px auto
}
.g-flex {
width: 400px;
height: 400px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
.g-item:first-child {
height: 390px;
}
}
.g-flex:hover {
flex-direction: row;
.g-item:first-child {
height: 190px;
width: 390px;
}
}
.g-grid {
width: 400px;
height: 400px;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
.g-item {
width: unset;
height: unset;
}
.g-item:first-child {
grid-row: 1 / 3;
grid-column: 1 / 2;
}
}
.g-grid:hover {
.g-item:first-child {
grid-row: 1 / 2;
grid-column: 1 / 3;
}
}
```
效果如下：
================================================
FILE: layout/single-column-isometric.md
================================================
## 多种方案实现单列等宽，其他多列自适应均匀布局
多种方案实现单列等宽，其他多列自适应均匀布局
### 需求
共4列，首列宽度固定为200px，其余3列均分剩余宽度，每列间距10px
### 实现
+ `display: grid` 实现
+ `display: flex` 实现
+ `position: aboslute + float` 实现
+ `position: aboslute + float +非calc实现`
### 难点
对于不使用 flex、grid 以及 css3 特性 calc 而言，实现多列自适应均匀分布只能是百分比。
百分比均分后间距的均分，这里参考了 bootstrap 的实现方式。
HTML：
```pug
// pug 模板引擎
div.g-grid
- for(var i=0; i<4; i++)
div.g-item #{i}
div.g-flex
- for(var i=0; i<4; i++)
div.g-item #{i}
div.g-position
- for(var i=0; i<4; i++)
div.g-item #{i}
div.g-justify
div.g-left 0
div.g-col
div.g-row
- for(var i=1; i<4; i++)
div.g-item-box
div.g-item #{i}
```
SCSS：
```scss
h2 {
font-size: 28px;
text-align: center;
color: #fff;
background: #009688;
line-height: 2;
}
.g-left,
.g-item {
background: #3f51b5;
line-height: 200px;
color: #fff;
text-align: center;
font-size: 24px;
}
.g-grid {
height: 200px;
background: #ff9800;
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
grid-column-gap: 10px;
margin-bottom: 20px;
}
.g-flex {
height: 200px;
background: #ff9800;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 20px;
.g-item {
flex: 0 1 calc((100% - 200px - 30px) / 3);
}
.g-item:first-child {
flex: 0 1 200px;
}
}
.g-position {
position: relative;
height: 200px;
background: #ff9800;
margin-bottom: 20px;
.g-item {
float: left;
width: calc((100% - 200px - 30px) / 3);
margin-left: 10px;
}
.g-item:nth-child(2) {
float: left;
width: calc((100% - 200px - 30px) / 3);
margin-left: 210px;
}
.g-item:first-child {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
float: unset;
margin-left: unset;
}
}
.g-justify {
position: relative;
height: 200px;
background: #ff9800;
margin-bottom: 20px;
.g-col,
.g-row,
.g-item-box {
box-sizing: border-box;
}
.g-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.g-row {
margin-right: -5px;
margin-left: -5px;
}
.g-col {
position: absolute;
top: 0;
left: 210px;
right: 0;
height: 200px;
overflow: hidden;
&:before,
&:after {
display: table;
content: " ";
}
&:after {
clear: both;
}
.g-item-box {
position: relative;
float: left;
width: 33.33%;
padding-left: 5px;
padding-right: 5px;
}
}
}
```
效果如下：
================================================
FILE: layout/use-margin-auto-to-simulate-align-self.md
================================================
## 使用 margin auto 实现 flex 下的 align-self: flex-end
使用 margin auto 实现 flex 下的 align-self: flex-end
### 难点
核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。
在 `dispaly: flex` 下：
+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)
简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
HTML：
```HTML
- liA
- liB
- liC
- liD
- liE
```
SCSS：
```scss
.g-flex {
height: 200px;
box-sizing: border-box;
background: #037d65;
display: flex;
// display: flex-inline;
// justify-content: space-around;
}
li {
// align-self: center;
width: 100px;
text-align: center;
font-size: 18px;
color: #fff;
margin: auto;
margin-bottom: 0;
margin-top: auto;
}
li:nth-child(1) {
height: 100px;
background: #336699;
}
li:nth-child(2) {
height: 120px;
background: #669933;
}
li:nth-child(3) {
height: 140px;
background: #996633;
}
li:nth-child(4) {
height: 160px;
background: #229955;
}
li:nth-child(5) {
height: 180px;
background: #199652;
}
```
效果如下：
================================================
FILE: layout/use-margin-auto-to-simulate-space-between.md
================================================
## 使用 margin auto 实现 flex 下的 justify-content: space-between
使用 margin auto 实现 flex 下的 justify-content: space-between
### 难点
核心点在于使用了 FFC/GFC 使 margin: auto 可以自动分配剩余空间。
在 `dispaly: flex` 下：
+ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
> [CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins](https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#auto-margins)
简单翻译一下，大意是在 **flex 格式化上下文**中，设置了 `margin: auto` 的元素，在通过 `justify-content` 和 `align-self` 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
HTML：
```HTML
- liA
- liB
- liC
- liD
- liE
```
SCSS：
```scss
.g-flex {
height: 100px;
margin-bottom: 100px;
box-sizing: border-box;
background: #037d65;
display: flex;
// justify-content: space-between;
}
li {
width: 100px;
line-height: 100px;
text-align: center;
font-size: 18px;
color: #fff;
margin: auto;
}
li:first-child {
margin-left: 0;
}
li:last-child {
margin-right: 0;
}
```
效果如下：
================================================
FILE: others/1px-line.md
================================================
## retina屏下的1px线的实现
retina屏下的1px线的实现，适用于 dpr：2 的情况。
+ 法一：使用渐变实现，使用两种颜色填充 1px 宽内容
+ 法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放
+ 法三：base64 编码实现
+ 法四：base64 编码嵌入SVG实现
HTML：
```html
retina屏下的1px线的实现
正常使用1px border效果（本DEMO请在移动端环境下查看）
法一：使用渐变实现，使用两种颜色填充 1px 宽内容
法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放
法三：base64 编码实现
法四：base64 编码嵌入SVG实现
```
SCSS：
```scss
body {
// overflow: hidden;
}
div {
width: 100vw;
height: 80px;
margin: 30px auto;
background-color: rgba(0, 0, 0, 0.1);
text-align: center;
padding-top: 20px;
font-size: 16px;
box-sizing: border-box;
}
/*border-top:1px*/
.border_normal,
.border_gradient,
.border_scale,
.border_boxshadow,
.border_base64,
.border_svg{
border-top: 1px solid #999;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.border_gradient {
background-image: linear-gradient(to top, transparent 50%, #999 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top center;
border-top: 0 none;
padding-top: 1px;
}
.border_scale {
position: relative;
padding-top: 1px;
border-top: 0 none;
}
.border_scale:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
border-top: 1px solid #999;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
.border_base64 {
padding-top: 1px;
border-top: 0 none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);
background-position: 0 0;
background-repeat: repeat-x;
background-size: 1px 1px;
}
.border_svg {
border-top: 0 none;
background-image:url("data:image/svg+xml;utf8,");
background-position:0 0;
background-repeat:no-repeat;
}
}
```
效果如下，demo效果需要在移动端环境下观看（点击 `HTML/SCSS` 可以对代码进行编辑）：
================================================
FILE: others/border-inset-text.md
================================================
## fieldset 与 legend 实现边框嵌套文字
利用 `