CSS 創意構想 - Part 2/2

背景

本文接上篇， 繼續咱們的《CSS》 創意構想。

由於有一些案例沒有代碼， 本着學習的態度， 我須要一個個補齊， 也方便你們看。

更新的時候可能就按小節， 逐步更新。

廢話補多少， 開始正文吧。

---

正文

本文的主要內容：

• 混合模式
• 濾鏡
• 僞元素
• 波浪效果
• 滾動指示器
• 滾動視差

1. 混合模式

• mix-blend-mode
• background-blend-mode

即： 將兩個或者多個圖片/圖層，利用混合模式疊加在一塊兒，產生新的效果。

好比：實現一個混色：

代碼：

<div class="g-mix-diff">
    <p>mix-blend-mode: difference</p>
</div>

.g-mix-diff {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 50vh;
    background: linear-gradient(45deg, #fff 50%, #000 50%);
}

.g-mix-diff p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    mix-blend-mode: difference;
}

這個特性是頗有用的， 好比在一些底色和前景色不肯定的場景， 就能夠用到這種模式。

Live Demo：

https://codepen.io/Chokcoco/p...

1.1 語法

mix-blend-mode 有不少種屬性， 簡單的列了一下：

{
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;

    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
}

具體效果， 各位能夠用上面的在線demo玩一下。

1.2 使用 background-blend-mode: lighten 改變圖片顏色

<div class="pic pic1"></div>


$img: 'hand.png';
.pic {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    cursor: pointer;
    transition: .5s all ease-out;
}

.pic1 {
    background-image: url($img), linear-gradient(#f09, #09f, #f0f);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: 0 0, 0 120px;
    background-repeat: no-repeat;
}

.pic1:hover {
    background-position: 0 0, 0 0;
}

圖片：

Hover 效果:

在線demo:

https://codepen.io/Chokcoco/p...

1.3 使用 mix-blend-mode: lighten 實現抖音 LOGO

合體以後：

code:

<div class="g-container">
    <div class="j"></div>
    <div class="j"></div>
</div>

body {
    background: #000;
    overflow: hidden;
}

.g-container {
    position: relative;
    width: 200px;
    margin: 20px 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);
    }
}

在線demo：

https://codepen.io/Chokcoco/p...

1.4 深刻挖掘，製做一些有意思的效果，給網站增色

好比以前哀悼的時候， 一行代碼讓網站變黑白。

html {      
  filter: grayscale(100%); 
}

1.4 其餘一些有意思的效果：

好比： 一個五彩斑斕的loading:

https://codepen.io/Chokcoco/p...

動感404:

https://codepen.io/Chokcoco/p...

光影效果：

在線demo：

https://codepen.io/Chokcoco/p...

2. 濾鏡

看， 圖片加上不一樣濾鏡以後的效果：

這麼神奇的效果， 也是一行代碼就能實現的。

{
    filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    ...

    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
}

在線demo :

https://codepen.io/Chokcoco/p...

須要注意的是：

• 濾鏡能夠疊加
• 多個濾鏡疊加，順序不一樣，效果不一樣。

看到這的時候， 你是否是會想起， 通常來講，矩陣運算不知足交換律的， 這條規律呢？

2.1 增亮圖片

增亮以後：

:hover {
    filter: brightness(1.1) contrast(110%);
}

在線demo :

https://codepen.io/Chokcoco/p...

2.2 彩色陰影

{ filter: blur(10px) brightness(80%) opacity(.8); }

在線demo：

https://codepen.io/Chokcoco/p...

2.3 hue-rotate() 實現漸變背景

div {
    background: linear-gradient(30deg, #ffcc00, deeppink, #9c27b0,);
    animation: hueRotate 20s infinite alternate;
}

@keyframes hueRotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

https://codepen.io/scaukk/pen...

2.4 CSS filter 最神奇之處，濾鏡融合效果

電腦要沒電了， 明天繼續寫。

僞元素

波浪效果

滾動指示器

滾動視差