CSS 創意構想 - Part 2 / 2

背景

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

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

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

廢話很少少, 開始正文吧。git

------github

正文

本文的主要內容:web

  • 混合模式
  • 濾鏡
  • 僞類與僞元素
  • 波浪效果
  • 滾動指示器
  • 滾動視差
  • 如何學習CSS

1. 混合模式

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

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

好比:實現一個混色:segmentfault

image.png

代碼:緩存

<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;
}

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

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;
}

image.png

具體效果, 各位能夠用上面的在線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;
}

圖片:

image.png

Hover 效果:

image.png

在線demo:

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

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

image.png

合體以後:

image.png

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%); 
}

image.png

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

好比: 一個五彩斑斕的loading:
image.png
https://codepen.io/Chokcoco/p...

動感404:

image.png

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

光影效果:

image.png

在線demo:

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

2. 濾鏡

看, 圖片加上不一樣濾鏡以後的效果:

image.png

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

{
    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 增亮圖片

image.png

增亮以後:

image.png

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

在線demo :

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

2.2 彩色陰影

image.png

{ 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 最神奇之處,濾鏡融合效果

分開的兩個小球:

image.png

融合效果:

image.png

code:

<div class="g-mix">
    <div class="ball"></div>
    <div class="box"></div>
</div>


.g-mix {
    position: relative;
    width: 200px;
    height: 200px;
    margin: -300px auto;
    filter: contrast(15);
    background: #000;
    padding: 350px;
    z-index: -1;
}

.ball {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #ff3c41;
    filter: blur(8px);
}


.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    background-color: #ff3c41;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: turn 5s linear infinite;
    transform-origin: -100% center;
    filter: blur(8px);
}

@keyframes turn {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

核心代碼:

.g-mix { filter: contrast(15); } 

.g-ball { filter: blur(8px); }
  • filter: blur(): 給圖像設置高斯模糊效果
  • filter: contrast(): 調整圖像的對比度

合體的時候,產生了奇妙的融合現象,經過對比度濾鏡把高斯模糊的模糊邊緣給去掉,利用高斯模糊實現融合效果

在線demo1:

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

在線demo2:
https://codepen.io/Chokcoco/p...

僞類(:)與僞元素(::)

  • 區分僞元素和僞類,理解使用 ::: 的異同
  • 有一些特定的標籤是不支持僞元素 before 和 after 的(<img><input><iframe>
  • ::before,::after 僞元素能實現的,真實子元素均可以作到。僞元素在原先的元素基礎上插入額外的元素且這個元素不充當HTML的標籤的行爲,能很好的保持HTML結構的整潔

用處1: 擴大點擊區域

原理: 僞元素是能夠表明其宿主元素來響應的鼠標交互事件

示例代碼:

<div class="button"> Button </div>

.button::after {
    content:"";
    position:absolute;
    top:-20px;
    right:-20px;
    bottom:-20px;
    left:-20px;
}

在鼠標指針靠近按鈕附近的時候, 就能夠點擊, 而不用徹底移到按鈕上。

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

用處2: 實現...加載效果

最先看到這個效果仍是張鑫旭的博客。

核心代碼:

<p class="dot"></p>

p::after  {
    content: "加載中";
    animation: dot 3s infinite steps(3, start);
}

@keyframes dot {
    33.33% {
        content: "加載中.";
    }
    66.67% {
        content: "加載中..";
    }
    100% {
        content: "加載中...";
    }
}

用處3: 埋點與統計

示例代碼:

.button-1:active::after {
    content: url(./report.gif?action=click&id=button1);
    display: none;
}

.button-2:active::after {
    content: url(./report.gif?action=click&id=button2);
    display: none;
}

知道有這個用法就能夠了。

更多有趣的僞類/僞元素效果能夠移步這裏。

波浪效果

1. 使用text-decoration實現

image.png

使用 text-decoration-style: wavy 生成波浪下劃線。

缺點

因爲是文本,使用 text-decoration-style: wavy 生成的波浪線受字體的影響很大,極有可能在一部分設備調試正常,在另外一部設備因爲字體的變化致使譬如動畫首尾銜接出現問題。

核心代碼:

{
    color: transparent;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: deeppink;
}

在線demo:

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

2. 使用徑向漸變實現

效果:

image.png

code:

body {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #607d8b, #673ab7), rgba(0, 0, 0, .5);
    background-size: 100% 50px;
    background-repeat: no-repeat;
    animation: moveC 10s linear infinite;
    
    &::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);
        animation: moveA 10s linear infinite;
            
    }
    
    &::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);
        animation: moveB 10s linear infinite;
    }
}

@keyframes moveA{
    0% {
        top: 100px;
    }
    25% {
        top: 40px;
    }
    50% {
        top: 40px;
    }
    100% {
        top: 40px;
    }
}

@keyframes moveB{
    0% {
        top: 150px;
    }
    50% {
        top: 150px;
    }
    75% {
        top: 35px;
    }
    100% {
        top: 35px;
    }
}

@keyframes moveC {
    100% {
        background: linear-gradient(180deg, #607d8b, #673ab7), rgba(255, 255, 255, 0);
        background-size: 100% 50px;
        background-repeat: no-repeat;
    }
}

在線demo:

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

3. 使用 border-radius 實現

先看個圓:

image.png

咱們平時最經常使用的就是用來實現圓角, 其實用這個屬性, 能夠玩出不少花裏胡哨的效果, 好比加個旋轉動畫, 就變得很魔性:

code:

<div class="g-border-1 g-border-2"></div>

div.g-border-2 {
    animation: waveRotate 5s infinite linear;
}

div.g-border-1, div.g-border-2 {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border-radius: 45% 45% 47% 46%;
    background: deeppink;
    margin: 50px auto;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
}

@keyframes waveRotate {
        100% {
            transform: rotate(360deg);
        }
    }

Live demo:

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

應用 1: 優惠券的邊緣效果

image.png

code:

<div class="wave">150</div>

.wave {
    position: relative;
    width: 400px;
    height: 160px;
    margin: 20px auto;
    background: -webkit-gradient(linear, left top, right top, from(#945700), to(#f49714));
    background: linear-gradient(90deg, #945700 0%, #f49714 100%);
    -webkit-filter: drop-shadow(-7px 4px 3px #333);
    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;
}

.wave::before, .wave::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.wave::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;
}

.wave::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;
}

在線demo:

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

應用 2. 實現波浪動畫

image.png

code:

<h2>Pure Css Wave</h2>
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;
}

在線demo:

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

應用 3. 實現充電效果

建議調整到 0.5x 大小看完整效果。

image.png

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

還有一種粒子融合充電效果:

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

滾動指示器

所謂頁指示器, 其實就是在頁面頂部的一個進度條:

最先的時候, 是在張鑫旭的博客裏看到的, 戳這裏查看,

原理其實很簡單:

給容器留一條縫, 去截斷下面的三角形, 滑動的時候, 所截取的寬度就是當前頁面的進度。

在線demo:

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

image.png

附張鑫旭的demo:

https://www.zhangxinxu.com/st...

細心的朋友可能發現, 你這個進度條不是平的, 是斜的。

哈哈, 是啊, 由於是截取的是直角三角形的橫截面, 可是當這個三角形足夠高的時候, 橫截面近似是平的, 無傷大雅。

image.png

看起來更真實的demo:

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

滾動視差

視差滾動(Parallax Scrolling)是指讓多層背景以不一樣的速度移動,造成立體的運動效果,帶來很是出色的視覺體驗。 做爲網頁設計的熱點趨勢,愈來愈多的網站應用了這項技術。

實現滾動時差的方式有多種.

關鍵點

給容器設置上 transform-style: preserve-3d 和 perspective: xpx,那麼處於這個容器的子元素就將位於3D空間中,

再給子元素設置不一樣的 transform: translateZ(),這個時候,不一樣元素在 3D Z軸方向距離屏幕(咱們的眼睛)的距離也就不同。

滾動滾動條,因爲子元素設置了不一樣的 transform: translateZ(),那麼他們滾動的上下距離 translateY 相對屏幕(咱們的眼睛),也是不同的,這就達到了滾動視差的效果。

1. 藉助 translateZ 實現 視差效果

在線demo:

父元素設置 transform-style: preserve-3dperspective: 1px

子元素設置不一樣的 transform: translateZ

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

2. 藉助 translate3d perspective 實現 3D 視差效果

在線demo:

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

詳細分析請看:滾動視差?CSS 不在話下

如何學習CSS

這裏簡單給幾條建議:

結語

內容差很少就這麼多,不少效果仍是挺實用的。

其實, 平時遇到喜歡的效果,習慣性的打開控制檯, 看一下他們是怎麼實現的, 也是一個很是有趣的過程。

別的就很少說了, 但願以上內容對你們全部幫助和啓發。

若是錯誤, 能夠留言指正。

關注我

若是你以爲這篇內容對你挺有啓發,那就關注我吧~

圖片

更多精彩:

聊聊 ESM、Bundleless 、Vite 、Snowpack

記一次 「 無限列表 」滾動優化

「 面試三板斧 」之 代碼分割(上)

「 面試三板斧 」之緩存 (上)

「 面試三板斧 」之緩存 (下)

「 面試三板斧 」之 HTTP (上)

「 面試三板斧 」之 HTTP (下)

「 面試三板斧 」之  this

本文同步分享在 博客「皮小蛋」(SegmentFault)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索