亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇

          系統城裝機大師 - 固鎮縣祥瑞電腦科技銷售部宣傳站!

          當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

          巧用 -webkit-box-reflect 倒影實現各類動效(小結)

          時間:2021-04-22來源:www.snowmanhill.com作者:電腦系統城

          在很久之前的一篇文章,有講到 -webkit-box-reflect 這個屬性 -- 從倒影說起,談談 CSS 繼承 inherit

          -webkit-box-reflect 是一個非常有意思的屬性,它讓 CSS 有能力像鏡子一樣,反射我們元素原本繪制的內容。

          上一次寫它,它的兼容性還非常非常的慘淡,但是到今天,雖然還是一個 Non-standard 的語法,但是兼容性已經大有改觀,并且利用它,我們可以實現非常多有意思的效果。

          截止至 2021-02-19,它的兼容性已經達到了 91.02%,看看 CANIUSE -webkit-box-reflect:

          接下來進入正文。

          -webkit-box-reflect 基本用法

          -webkit-box-reflect 的語法非常簡單,最基本的用法像是這樣:

          1
          2
          3
          div {
              -webkit-box-reflect: below;
          }

          其中,below 可以是 below | above | left | right 代表下上左右,也就是有 4 個方向可以選。

          假設我們有如下一張圖片:

          1 <div></div>
          1
          2
          3
          div {
              background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
          }

          加上 -webkit-box-reflect: right,也就是右側的倒影:

          1
          2
          3
          4
          div {
              background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
              -webkit-box-reflect: right;
          }

          效果如下,生成了一個元素右側的鏡像元素:

          設置倒影距離

          在方向后面,還可以接一個具體的數值大小,表示倒影與原元素間的距離。

          1
          2
          3
          4
          div {
              background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
              -webkit-box-reflect: right 10px;
          }

          加上 10px 之后,倒影與原元素間將間隔 10px

          設置倒影虛實

          還有一個非常重要的功能,就是方位后面,還能再設置一個漸變值,利用這個漸變值,可以實現倒影的一個虛化效果,這一點非常重要。

          1
          2
          3
          4
          div {
              background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
              -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
          }

          看看效果,有了虛實變化之后,這樣就更像是一個倒影.

          其實,這里的漸變就是給倒影的圖片添加了一個 MASK 屬性,MASK 屬性的 transparent 部分,圖片將變得透明,而實色部分,則保持原圖。

          關于 CSS MASK 屬性,如果你還有什么疑問,建議看看這篇文章:奇妙的 CSS MASK

          CodePen Demo -- -webkit-box-reflect Demo

          使用 -webkit-box-reflect 實現一些有意思的動效

          掌握了基本的語法后,我們就可以利用其實現一些有意思的動效,下面簡單羅列一下。

          我發現這個屬性特別適合運用在一些暗黑系風格的頁面中。能夠讓很多動效看起來高大上很多。(個人審美)

          在按鈕中運用 -webkit-box-reflect

          配合一些動態邊框動畫的按鈕,能夠營造一種很科幻的效果:

          感興趣的可以自行戳源碼了解了解:

          CodePen demo -webkit-box-reflect Neon Button Hover Effect

          在文字中運用 -webkit-box-reflect

          在暗黑系的標題文字中,運用上 -webkit-box-reflect ,瞬間高大上了不少。

          CodePen demo - Font & -webkit-box-reflect

          在 3D 中運用 -webkit-box-reflect

          嘿嘿,接下來,我們甚至可以把 -webkit-box-reflect 運用中 3D 效果中,完全不一樣的觀感體驗。

          我們給一個 3D 照片墻,加上倒影效果:

          CodePen demo - 3DView & -webkit-box-reflect

          使用 -webkit-box-reflect 創造藝術圖案

          有趣的 CSS 藝術,它又來了。

          在袁川老師的這篇文章中 -- Chinese Window Lattice And CSS,介紹了利用 -webkit-box-reflect 生成剪紙藝術這樣一種思路。

          由于 -webkit-box-reflect 可以生成倒影,那么我們利用它進行不斷的套娃,一層疊一層,那么只需要生成一個基本的元素,就可以利用倒影產生出各種不同的效果。

          假設,我們有如下結構:

           

          1
          2
          3
          4
          5
          6
          7
          <div class="g-wrap1">
              <div class="g-wrap2">
                  <div class="g-wrap3">
                      <div class="g-wrap4"></div>
                  </div>
              </div>
          </div>

          我們只需要給 .g-wrap4 實現一個圖形,例如這樣:

          1
          2
          3
          4
          5
          .g-wrap4 {
              background:
                  radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
                  radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
          }

          然后就是 4 層套娃, 首先給 .g-wrap4 加上一層倒影 -webkit-box-reflect

          1
          2
          3
          .g-wrap4 {
              -webkit-box-reflect: right 0px;
          }

          得到:

          繼續套娃,給 .g-wrap3 加上一層倒影 -webkit-box-reflect

          1
          2
          3
          4
          5
          6
          .g-wrap4 {
              -webkit-box-reflect: right 0px;
          }
          .g-wrap3 {
              -webkit-box-reflect: below 0px;
          }

          繼續,給 .g-wrap2 加上一層倒影 -webkit-box-reflect

          1
          2
          3
          4
          5
          6
          7
          8
          9
          .g-wrap4 {
              -webkit-box-reflect: right 0px;
          }
          .g-wrap3 {
              -webkit-box-reflect: below 0px;
          }
          .g-wrap2 {
              -webkit-box-reflect: left 0px;
          }

          最后,給 .g-wrap1 加上一層倒影 -webkit-box-reflect

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          .g-wrap4 {
              -webkit-box-reflect: right 0px;
          }
          .g-wrap3 {
              -webkit-box-reflect: below 0px;
          }
          .g-wrap2 {
              -webkit-box-reflect: left 0px;
          }
          .g-wrap1 {
              -webkit-box-reflect: above 0px;
          }

          就可以得到一個通過 4 層倒影得到的圖形:

          這樣,通過不同的基礎圖形,發揮我們的想象力,就可以生成各式各樣的剪紙對稱圖形:

          完整的代碼,可以戳這里:CodePen Demo -- -webkit-box-reflect artist

          最后

          本文到此結束,希望對你有幫助

          分享到:

          相關信息

          • HTML5之audio屬性

            audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

            2020-03-04

          • HTML連載72-動畫效果及其他屬性

            一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

            2020-03-04

          系統教程欄目

          欄目熱門教程

          人氣教程排行

          站長推薦

          熱門系統下載

          亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇