guillaumejuvenet - 这个网站是如何建立的? / SVG路径/自绘图

时间:2016-10-26 12:19:54

标签: css svg path automation draw

Binding.ElementName 我对这个家伙的投资组合印象深刻。谁能告诉我它是如何工作的?

我尝试在Illustrator中创建路径并开始使用CSS中的笔画绘制它。 一切正常,但我还远,远离类似的效果。

这是我用它的方式。

body {
  background-color: #a3d5d3;
}

#check path{
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 116px; /* stroke-dasharray: 10px 5px;  linia obrysowania*/
  stroke-dashoffset: -116px; /*gdzie zaczynaja sie linie*/
  fill: transparent;
  transition: stroke-dashoffset 0.6s linear 0.5s, fill 1s ease;
  
}
#check.checked path {
  fill: #fff;
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset 0.8s linear, fill 2s ease 0.7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app ng-init="checked = false">
  <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 30 29" id="check" ng-class="checked ? 'checked' : ''">
	<path style="stroke-dashoffset: {{range}}px" fill="#fff" d="M1.609,0.008c0.013,0.129,0.023,0.248,0.033,0.367
		c0.103,1.153,0.203,2.307,0.307,3.459c0.132,1.465,0.265,2.933,0.395,4.397c0.11,1.232,0.219,2.467,0.328,3.7
		c0.124,1.389,0.249,2.777,0.373,4.167c0.109,1.23,0.218,2.467,0.328,3.699c0.134,1.502,0.27,3.002,0.398,4.504
		c0.008,0.098,0.039,0.139,0.135,0.164c3.177,0.896,6.352,1.793,9.525,2.688c0.08,0.021,0.176,0.021,0.256,0
		c3.187-0.895,6.373-1.789,9.56-2.682c0.109-0.031,0.143-0.078,0.15-0.186c0.067-0.838,0.146-1.674,0.219-2.51
		c0.082-0.922,0.166-1.846,0.248-2.77c0.074-0.826,0.146-1.65,0.221-2.477c0.084-0.924,0.166-1.848,0.248-2.771
		c0.072-0.825,0.146-1.649,0.221-2.476c0.082-0.92,0.164-1.84,0.246-2.76c0.074-0.828,0.146-1.656,0.223-2.486
		c0.082-0.92,0.164-1.84,0.246-2.76c0.074-0.838,0.148-1.678,0.228-2.517c0.021-0.25,0.042-0.502,0.065-0.76
		C17.571,0.008,9.6,0.008,1.609,0.008z M20.831,7.965c-3.82,0-7.638,0-11.47,0c0.09,1.033,0.179,2.056,0.267,3.082
		c3.649,0,7.287,0,10.938,0c-0.026,0.217-0.061,0.422-0.08,0.629c-0.051,0.521-0.1,1.043-0.146,1.562
		c-0.084,0.943-0.166,1.892-0.248,2.835c-0.071,0.848-0.146,1.691-0.221,2.539c-0.047,0.535-0.101,1.07-0.146,1.604
		c-0.008,0.084-0.062,0.086-0.11,0.102c-1.294,0.355-2.585,0.713-3.878,1.066c-0.709,0.197-1.416,0.396-2.126,0.592
		c-0.032,0.01-0.076,0.004-0.11-0.008c-2.006-0.551-4.011-1.104-6.015-1.652c-0.092-0.023-0.094-0.08-0.1-0.146
		c-0.051-0.645-0.102-1.283-0.15-1.927c-0.067-0.864-0.135-1.729-0.203-2.595c-0.002-0.021-0.002-0.049-0.004-0.08
		c0.99,0,1.978,0,2.971,0c0.025,0.281,0.052,0.563,0.076,0.838c0.044,0.49,0.088,0.98,0.13,1.473
		c0.004,0.057,0.021,0.078,0.075,0.094c1.076,0.287,2.15,0.578,3.228,0.867c0.038,0.012,0.084,0.006,0.123-0.004
		c1.063-0.285,2.123-0.574,3.188-0.855c0.063-0.02,0.092-0.049,0.098-0.113c0.117-1.254,0.236-2.51,0.357-3.764
		c0-0.004-0.002-0.008-0.004-0.022c-3.463,0-6.929,0-10.401,0C6.596,11.049,6.326,8.029,6.055,5c5.025,0,10.028,0,15.057,0
		C21.021,5.988,20.925,6.971,20.831,7.965z"/>
  </svg>
  <button ng-click="checked = !checked">Toggle</button>
</div>

任何提示?

0 个答案:

没有答案