背景
本文接上篇, 繼續咱們的《CSS》 創意構想。php
由於有一些案例沒有代碼, 本着學習的態度, 我須要一個個補齊, 也方便你們看。css
更新的時候可能就按小節, 逐步更新。html
廢話很少少, 開始正文吧。git
------github
正文
本文的主要內容:web
混合模式
濾鏡
僞類與僞元素
波浪效果
滾動指示器
滾動視差
如何學習CSS
1. 混合模式
mix-blend-mode
background-blend-mode
即: 將兩個或者多個
圖片/圖層,利用混合模式疊加
在一塊兒,產生新的效果
。面試
好比:實現一個混色:segmentfault
代碼:緩存
<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; }
具體效果, 各位能夠用上面的在線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 最神奇之處,濾鏡融合效果
分開的兩個小球:
融合效果:
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
實現
使用 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. 使用徑向漸變實現
效果:
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 實現
先看個圓:
咱們平時最經常使用的就是用來實現圓角
, 其實用這個屬性, 能夠玩出不少花裏胡哨的效果, 好比加個旋轉動畫, 就變得很魔性:
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: 優惠券的邊緣效果
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. 實現波浪動畫
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
大小看完整效果。
https://codepen.io/Chokcoco/p...
還有一種粒子融合充電效果:
https://codepen.io/Chokcoco/p...
滾動指示器
所謂頁指示器, 其實就是在頁面頂部的一個進度條:
最先的時候, 是在張鑫旭的博客裏看到的, 戳這裏查看,
原理其實很簡單:
給容器留一條縫, 去截斷下面的三角形, 滑動的時候, 所截取的寬度就是當前頁面的進度。
在線demo:
https://codepen.io/Chokcoco/p...
附張鑫旭的demo:
https://www.zhangxinxu.com/st...
細心的朋友可能發現, 你這個進度條不是平的, 是斜的。
哈哈, 是啊, 由於是截取的是直角三角形的橫截面
, 可是當這個三角形足夠高的時候, 橫截面近似是平的, 無傷大雅。
看起來更真實的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-3d
和 perspective: 1px
子元素設置不一樣的 transform: translateZ
https://codepen.io/Chokcoco/p...
2. 藉助 translate3d perspective 實現 3D 視差效果
在線demo:
https://codepen.io/Chokcoco/p...
詳細分析請看:滾動視差?CSS 不在話下
如何學習CSS
這裏簡單給幾條建議:
- 多看,多寫
- 《
CSS Secrets
》、CodePen、CSS-Tricks - CSS Battle
- 張鑫旭、大漠老師-w3cplus、iCSS、CSS-inspiration
結語
內容差很少就這麼多,不少效果仍是挺實用的。
其實, 平時遇到喜歡的效果,習慣性的打開控制檯, 看一下他們是怎麼實現的, 也是一個很是有趣的過程。
別的就很少說了, 但願以上內容對你們全部幫助和啓發。
若是錯誤, 能夠留言指正。
關注我
若是你以爲這篇內容對你挺有啓發,那就關注我吧~
更多精彩:
聊聊 ESM、Bundleless 、Vite 、Snowpack
本文同步分享在 博客「皮小蛋」(SegmentFault)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。