效果图
废话不多说上代码
需要文档版本源码，可以加我的HTML5前端交流群111645711
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%);
}
网站源码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3绘制画笔铅笔轮廓动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="graph"
x="28" y="8" width="30" height="30"
patternUnits="userSpaceOnUse">
<line x1="0" x2="800" y1="0" y2="0" stroke="#CBCFE9" stroke-width="1"/>
<line x1="10" x2="10" y1="0" y2="600" stroke="#CBCFE9" stroke-width="1"/>
</pattern>
<filter id="edgeClean" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .5 1 1" />
</feComponentTransfer>
</filter>
</defs>
<rect fill="url(#graph)" width="800" height="600"/>
<path class="shadowEnd" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
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"/>
<path class="shadow" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
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"/>
<g class="drawing">
<g class="pencilFills">
<path fill="#FFC334" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
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"/>
<path fill="#FBCA7E" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
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"/>
<path fill="#E2AF38" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M491.2,224.1L311.5,383.4
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"/>
<polygon fill="#39434D" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" points="266.8,393.6 249.7,397.4
255.6,381 "/>
</g>
<g class="pencilOutlines" stroke-width="2">
<path class="pencilOutline" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" d="M311.5,383.4
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"/>
<polyline class="ridge" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="291.2,361.9
291.9,361.3 474.6,199.2 "/>
<line class="tipTop" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="255.6" y1="381" x2="271" y2="337.8"/>
<line class="tipBot" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="311.5" y1="383.4" x2="266.8" y2="393.6"/>
<polygon class="lead" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="249.7,397.4
266.8,393.6 255.6,381 249.7,397.4 "/>
</g>
</g>
<g class="pencil">
<g>
<path fill="#FFC334" d="M42.3,183.8c-13.6-2.9-19.4-10.3-20.8-23.5L201.2,1c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L42.3,183.8z"/>
<path fill="#FBCA7E" d="M42.3,183.8C44.6,197.5,51.9,205,62,206l-51,11.6l-7.1-8l17.6-49.3C22.9,173.5,28.7,180.9,42.3,183.8z"/>
<path fill="#E2AF38" d="M241.7,46.7L62,206c-10.1-1-17.4-8.5-19.7-22.2l182.8-162L242,40.9C243.5,42.6,243.4,45.2,241.7,46.7z"/>
<polygon fill="#39434D" points="17.2,216.2 0.2,220 6,203.6 "/>
</g>
<g>
<path fill="none" d="M21.5,160.3L201.2,1c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L242,40.9c1.5,1.7,1.3,4.3-0.3,5.8L62,206
c-10.1-1-17.4-8.5-19.7-22.2C28.7,180.9,22.9,173.5,21.5,160.3z"/>
<polyline fill="none" points="225.1,21.8 42.3,183.8 41.6,184.4 "/>
<polyline fill="none" points="62,206 10.9,217.6 0.2,220 3.9,209.6 21.5,160.3 "/>
<line fill="none" x1="6" y1="203.6" x2="17.2" y2="216.2"/>
</g>
</g>
</svg>
<script src='js/TweenMax.min.js'></script>
<script src='js/MorphSVGPlugin.min.js'></script>
<script src='js/ScrubGSAPTimeline_debug.js'></script>
<script src='js/DrawSVGPlugin.js?r=12'></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.aaa-cg.com.cn?lcc" target="_blank">素材</a></p>
</div>
</body>
</html>
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
