国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用CSS實現逼真的水波紋點擊效果

Cciradih / 1755人閱讀

這篇文章特別介紹如何使用CSS來完成水波紋的效果。

div的層層疊疊

雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用“疊”的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著最重要的就是將背景設為固定：background-attachment:fixed；，然后讓背景的尺寸有大有小，就可以完成了，只要把六個div疊在一起，搭配CSS的animation，就可以讓六個div依序出現。

HTML:

CSS:

.wave{
  position:absolute;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width:30px;
  height:30px;
  border-radius:300px;
}
.wave0{
  background:#f00;
  z-index:2;
  background-size:auto 106%;
  animation:w 1s forwards;
}
.wave1{
  background:#d00;
  z-index:3;
  animation:w 1s .2s forwards;
}
.wave2{
  background:#b00;
  z-index:4;
  animation:w 1s .4s forwards;
}
.wave3{
  background:#900;
  z-index:5;
  animation:w 1s .5s forwards;
}
.wave4{
  background:#700;
  z-index:6;
  animation:w 1s .8s forwards;
}
.wave5{
  background:#500;
  z-index:7;
  animation:w 1s 1s forwards;
}
@keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width:300px;
    height:300px;
  }
}

制作水波

上面有幾個地方要稍微注意一下，第一個是因為位置都使用了絕對位置（absolute），因此我們要將所有的div定位在圓心一定有難度，這時候就必須使用CSS3的好用工具：calc，calc可以自動計算位置，借由這個方式，我們直接可以讓CSS替我們計算出圓心，相當的方便。（注意！calc的+、-號前后必須有空格，不然會出錯），然后就是每個animation要逐一加上延遲時間，就可以逐一地冒出來，如果我們再把半徑設大一點，就會變成圓形或是橢圓形！

了解了水波紋的原理之后，再來我們只要把上面的顏色換成背景圖，就可以順利的產生水波紋了。

HTML:

CSS:

.wave{
  position:absolute;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width:30px;
  height:30px;
  border-radius:300px;
  background:url(圖片路徑);
  background-attachment:fixed;
  background-position:center center;
}
.wave0{
  z-index:2;
  background-size:auto 106%;
  animation:w 1s forwards;
}
.wave1{
  z-index:3;
  background-size:auto 102%;
  animation:w 1s .2s forwards;
}
.wave2{
  z-index:4;
  background-size:auto 104%;
  animation:w 1s .4s forwards;
}
.wave3{
  z-index:5;
  background-size:auto 101%;
  animation:w 1s .5s forwards;
}
.wave4{
  z-index:6;
  background-size:auto 102%;
  animation:w 1s .8s forwards;
}
.wave5{
  z-index:7;
  background-size:auto 100%;
  animation:w 1s 1s forwards;
}
@keyframes w{
  0%{
    top:calc((100% - 30px)/2);
    left:calc((100% - 30px)/2);
    width:30px;
    height:30px;
  }
  100%{
    top:calc((100% - 300px)/2);
    left:calc((100% - 300px)/2);
    width:300px;
    height:300px;
  }
}

逼真的水波

比較需要注意的地方，就是背景的位置千萬要設為固定（background-attachment:fixed；），然后統一將背景居中，如此一來，背景的位置相同，但背景的大小不同，就會讓欺騙眼睛，讓眼睛認為看到了水波，不過里頭也用了一個小技巧讓水波看起來更逼真，就是讓每一個背景大小都不同，換句話說就是讓水波的震幅越來越小，讓背景大小從106 > 102 > 104 > 101 > 102 > 100，如此一來就會讓水波更逼真！

以上就是單純利用CSS制作水波紋的原理，當然最后就是要寫一段JS讓水波可以在鼠標點擊的剎那產生，而且下一個水波必須覆蓋上一個水波，然后水波產生后會自動消失，避免過多的div造成畫面延遲。

jQuery:

var mx, my, timer;
var z = 2;
$(document).on("click", function (e) {
  mx = e.pageX;
  my = e.pageY;
  z = z + 1;
  _wave(mx, my, z);
});

function _wave(i, j, k) {
  $(".ui-content").prepend(
    "
" +
    "
" +
    "
" +
    "
" +
    "
" +
    "
" +
    "
" +
    "
" +
    "
" +
    "
"
  );
  setTimeout(function () {
    $(".water" + k).remove();
  }, 3000);
}


要獲取效果的完整代碼：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114619.html

相關文章

  • 使用CSS實現逼真的水波紋點擊效果

    這篇文章特別介紹如何使用CSS來完成水波紋的效果。 div的層層疊疊 雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用疊的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著...

    Tony_Zby 評論0 收藏0

  • css動畫-實現一個最簡單的水波紋效果button

    摘要：類似的效果步驟在頁面寫出一個并賦予簡單的樣式代碼這是一個按鈕默認是無法用給它居中為了增加用戶體驗為了保持和的位置關系為了遮蓋超出的效果添加水波紋的基礎樣式代碼為了保持和的位置關系水波紋圓形水波紋顏色下面與動畫效果相關是時候的狀態默認 類似material-ui的button效果 步驟 1. 在頁面寫出一個button 并賦予簡單的樣式 代碼 這是一個按鈕 ...

    Hancock_Xu 評論0 收藏0

  • css 滾動視差 之 水波紋效果

    摘要：我們來看個例子代碼很簡單，讓視口出現滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了， 它可以定義背景圖片是相對視口固定， 還是隨著視口滾動， 加上這個屬性網頁瞬間就從屌絲變成 高大上。 我們來看個例子： ...

    _ang 評論0 收藏0

  • css 滾動視差 之 水波紋效果

    摘要：我們來看個例子代碼很簡單，讓視口出現滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了， 它可以定義背景圖片是相對視口固定， 還是隨著視口滾動， 加上這個屬性網頁瞬間就從屌絲變成 高大上。 我們來看個例子： html: I WANT...

    番茄西紅柿 評論0 收藏0

  • css 滾動視差 之 水波紋效果

    摘要：我們來看個例子代碼很簡單，讓視口出現滾動條，然后它是這樣的很普通的一個滾動效果，然后我們把注釋去掉，就是加上這句話華麗變身由于它相對視口固定，看起來就好像只有一個背景一樣。核心屬性： background-attachment 這個屬性就牛逼了， 它可以定義背景圖片是相對視口固定， 還是隨著視口滾動， 加上這個屬性網頁瞬間就從屌絲變成 高大上。 我們來看個例子： html: d...

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<