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>
任何提示?