亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

用code打造自己的過(guò)渡動(dòng)畫

tinysun1234 / 1496人閱讀

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

起源

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

借鑒

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

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

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

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

可縮放矢量圖形（英語(yǔ)：Scalable Vector Graphics，SVG）是一種基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的圖形格式。 SVG由W3C制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)。
既然是矢量圖，它的縮放就不會(huì)失真，因?yàn)楸硎痉椒ㄊ腔跀?shù)學(xué)的表示，而不是像素點(diǎn)。動(dòng)畫中的筆畫即是基于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;
  }
}

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

stroke-dasharray屬性可控制用來(lái)描邊的點(diǎn)劃線的圖案范式。

MDN給出的示例：




    
    
    
    
    
    
    
    
    
    


stroke-dashoffset屬性指定了dash模式到路徑開(kāi)始的距離

通過(guò)CSS修改這兩個(gè)屬性，動(dòng)畫的邊界就相應(yīng)的動(dòng)起來(lái)了。

我的實(shí)現(xiàn)

我的素材：

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

GeekCat體驗(yàn)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116429.html

相關(guān)文章

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

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

    番茄西紅柿 評(píng)論0 收藏0

  • SVG

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

    104828720 評(píng)論0 收藏0

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

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

    wangtdgoodluck 評(píng)論0 收藏0

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

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

    sutaking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<