成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用code打造自己的過渡動畫

tinysun1234 / 1498人閱讀

摘要：起源自己的過渡動畫，為什么要這個東西呢不是說好的么。所以本喵決定打造自己的過渡動畫。給出的示例屬性指定了模式到路徑開始的距離通過修改這兩個屬性，動畫的邊界就相應(yīng)的動起來了。

起源

自己的過渡動畫，為什么要這個東西呢？不是說好的Simple is beautiful么。的確我也是非常欣賞簡潔的東西，但是對于掛載在Github上的本博客，在國內(nèi)訪問總是不那么流暢，而Next主題的文字下落動畫恰恰使博客訪問體驗變的非常糟糕（感覺訪問變得更慢了）。所以本喵決定打造自己的過渡動畫。

借鑒

在兩三個月前記得訪問過一個個人博客，過渡動畫非常驚艷，但當(dāng)時并沒有時間詳細(xì)琢磨實現(xiàn)細(xì)節(jié)。如今正好借鑒一番，經(jīng)過一番Google，還是本喵找到了（但是作者的博客好像沒有維護(hù)了，無法訪問），好在也是依托Github pages 掛載的博客，直接把源碼下載下來進(jìn)行研究。

地址： https://github.com/ceoimon/ce...

實現(xiàn)細(xì)節(jié)

動畫并非純css實現(xiàn)而是使用了SVG + CSS

可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是一種基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的圖形格式。 SVG由W3C制定，是一個開放標(biāo)準(zhǔn)。
既然是矢量圖，它的縮放就不會失真，因為表示方法是基于數(shù)學(xué)的表示，而不是像素點。動畫中的筆畫即是基于SVG中path標(biāo)簽中的數(shù)據(jù)先后順序。
#mySVG path {
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 11434;
  stroke-dashoffset: 11456;
  -webkit-animation: dash 5s linear infinite;
  animation: dash 5s linear infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
/*   -webkit-transition:fill 0.5s 1s linear;
  transition:fill 0.5s 1s linear;*/
}
@-webkit-keyframes dash {
  10% {
    stroke-dashoffset: 11456;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
    fill: #000;
  }
  95% {
    stroke-dashoffset: 11456;
    fill: #000;
  }
  100% {
    stroke-dashoffset: 11456;
    fill: transparent;
  }
}

不過當(dāng)我理解了這svg兩個屬性(stroke-dasharray，stroke-dashoffset)后，還是非常震驚于這個動畫的實現(xiàn)原理。

stroke-dasharray屬性可控制用來描邊的點劃線的圖案范式。

MDN給出的示例：




    
    
    
    
    
    
    
    
    
    


stroke-dashoffset屬性指定了dash模式到路徑開始的距離

通過CSS修改這兩個屬性，動畫的邊界就相應(yīng)的動起來了。

我的實現(xiàn)

我的素材：

使用 AI 得到 SVG，最終效果：

GeekCat體驗

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116429.html

相關(guān)文章

  • CSS 小結(jié)筆記之變形、過渡與動畫

    摘要：變形變形移動移動可以指定像素值也可以指定百分比，注意指定百分比是自身大小的百分比，因此可以用于設(shè)置盒子定位時的居中對齊在設(shè)置后再移動自身的即可。方向上的移動在現(xiàn)實生活中是距離變遠(yuǎn)，距離變近。1、過渡transition 過渡屬性用法： transition :ransition-property transition-durationtransition-timing-functiontra...

    番茄西紅柿 評論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團(tuán)隊，全球非常出名的可視化團(tuán)隊。于是筆者嘗試著把移植到中。 使用SVG + CSS實現(xiàn)動態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評論0 收藏0

  • 「碼個蛋」2017年200篇精選干貨集合

    摘要：讓你收獲滿滿碼個蛋從年月日推送第篇文章一年過去了已累積推文近篇文章，本文為年度精選，共計篇，按照類別整理便于讀者主題閱讀。本篇文章是今年的最后一篇技術(shù)文章，為了讓大家在家也能好好學(xué)習(xí)，特此花了幾個小時整理了這些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 讓你收獲滿滿！ 碼個蛋從2017年02月20...

    wangtdgoodluck 評論0 收藏0

  • 匠心打造Vue側(cè)滑菜單組件

    摘要：本文介紹一個簡單的類似的布局組件的實現(xiàn)，基于。介紹的內(nèi)容已經(jīng)制作成組件。即當(dāng)不可以拖出抽屜時，應(yīng)觸發(fā)默認(rèn)事件，比如垂直方向的滾動等等。這種優(yōu)化可以將一部分復(fù)雜的計算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。 本文介紹一個簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實現(xiàn)，基于Vue.js。介紹的內(nèi)容已經(jīng)制作成 vue-drawer-layout...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

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