高能CSS3繪製畫筆鉛筆輪廓動畫特效源碼

GIF/990K

CSS源碼

body {

background-color:#EAE8E6;

overflow: hidden;

text-align:center;

}

body,

html {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

svg{

position:absolute;

width:800px;

height:600px;

visibility:hidden;

overflow: hidden;

transform:translate(-50%, 0%);

}

網站源碼

CSS3繪製畫筆鉛筆輪廓動畫特效

x="28" y="8" width="30" height="30"

patternUnits="userSpaceOnUse">

l14.7-0.8l0.3,0l8.3-0.5l0,0l61-3.4l244.9-67.4C331.4,147.3,331.6,146.1,329.6,145.3z"/>

c-13.6-2.9-19.4-10.3-20.8-23.5l179.7-159.3c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L291.9,361.3z"/>

c2.3,13.7,9.6,21.2,19.7,22.2l-44.7,10.1L255.6,381l15.4-43.2C272.4,350.9,278.3,358.4,291.9,361.3z"/>

c-10.1-1-17.4-8.5-19.7-22.2l182.8-162l16.9,19.1C493,220,492.9,222.6,491.2,224.1z"/>

255.6,381 "/>

l179.7-159.3c1.7-1.5,1.9-4.1,0.3-5.8l-16.9-19.1l-18.1-20.4c-1.5-1.7-4.1-1.9-5.8-0.3L271,337.8c1.4,13.2,7.3,20.6,20.8,23.5

C294.1,374.9,301.4,382.4,311.5,383.4z"/>

291.9,361.3 474.6,199.2 "/>

266.8,393.6 255.6,381 249.7,397.4 "/>

c-10.1-1-17.4-8.5-19.7-22.2C28.7,180.9,22.9,173.5,21.5,160.3z"/>

適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. 不支持IE8及以下瀏覽器。

來源：素材

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！